如何动态生成一个UI并将其挂载在另一个UI上

丸子 · 发表于昨天 19:09

此工程仅仅作为演示，不可直接复用！

以制作一个很简易的排行榜为例
先制作一个排行榜的Item和一个排行榜的View

因为ScrollBox没有自动布局，这里有个小技巧
（1）在ScrollBox下面放一个Canvas（容器）
（2）打开Canvas的垂直自动大小

（3）打开自动布局，容器类型选择垂直布局，再设置一下间隔

然后我们单独再新建两个脚本，ViewUI和ItemUI，让他们分别继承View_generate和Item_generate
在ViewUI中我们写如下的代码：



import { ItemUI } from "./ItemUI";

import View_Generate from "./ui-generate/View_generate";



export class ViewUI extends View_Generate {

    /** 当脚本被实例后，会在第一帧更新前调用此函数 */

    protected onStart(): void {

        //给按钮增加点击事件，创建item

        this.mStaleButton.onClicked.add(()=> {

            this.creatItems();

        });

    }



    //创建item

    private creatItems() {

        //创建Item对象

        let item = UIService.create(ItemUI);

        //将item添加到容器下面（要注意是调用uiObject）

        this.mItemRoot.addChild(item.uiObject);

    }

}