Egert白鹭引擎学习日志03

最新推荐文章于 2021-11-25 22:48:04 发布

山中油老虎

最新推荐文章于 2021-11-25 22:48:04 发布

阅读量897

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_39258590/article/details/83831830

这篇博客介绍了如何在Egret游戏开发中利用TabBar和ViewStack创建选项卡组件。首先创建MainSceneView.exml文件并设计界面，接着制作自定义按钮组件testViewSkin.exml，包括对应的ts文件testView.ts。接着配置TabBar的布局和参数，如设置itemrenderer为testView，并调整scrollRect。同样，设置了ViewStack的selectedindex。最后，将场景添加到舞台并在Main.ts中运行，实现了选项卡切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用控件TabBar 和ViewStack实现选项卡组件

（1）.首先需要添加一个现实界面，在resourc文件夹下面新建一个游戏场景的.exml文件 MainSceneView.exml

然后在设计界面使用组件，摆放好游戏界面场景，这里使用Group是为了场景更好管理。TabBar中需要绑定自己做的按钮组件

ViewStack中存放的是两个选项卡内容

2.添加按钮组件

在resourc文件下在新建一个控件.exml文件 testViewSkin.exml

在场景中添加一张按钮大小的图片，同时再再src文件下新建一个与控件相对应的ts文件 testView.ts

class testView extends eui.ItemRenderer {
	public icon_img:eui.Image;

	constructor() {
		super();
		this.skinName = "testViewSkin";
	}

	protected childrenCreated() {
		super.childrenCreated();
	}

	protected dataChanged(): void {
		// console.log("------------------"+this.data);
	}
}

3.设置控件TabBar 和ViewStack的参数

先将TabBar 的布局设定为VerticalLayout(垂直布局)

接下来就来设置TabBar 和ViewStack的参数了，在MainSceneView.exml 场景中点击TabBar----所有属性，itemrenderer(细目渲染器)中添加写好的按钮控件类testView

再将scrollRect (x=0,y=0,width=250,height=100) (x,y,控件宽，高)

把selectedindex的值设置为0

再来设置ViewStack参数，把selectedindex的值设置为0

所有参数设置完成

4.把场景添加到舞台

在src文件目录下添加一个.ts文件

点击打开ts文件进行编辑

class MainScene extends eui.Component {
    public bg: eui.Image;
    public tab_01: eui.TabBar;
    public view_01: eui.ViewStack;
    public group01: eui.Group;
    public group02: eui.Group;

    public constructor() {
        super();
        this.skinName = "MainSceneView";

    }

    protected childrenCreated(): void {
        super.childrenCreated();

        let dataArr: any[] = [{ name: "按钮1", down_url: "btn_common_0_png", up_url: "btn_common_1_png" },
        { name: "按钮2", down_url: "btn_common_0_png", up_url: "btn_common_1_png" },];
        this.tab_01.dataProvider = new eui.ArrayCollection(dataArr);
        this.tab_01.useVirtualLayout = true;
        this.tab_01.addEventListener(eui.ItemTapEvent.ITEM_TAP, this.onBarItemTap, this);
    }

    private onBarItemTap(e: eui.ItemTapEvent): void {
        this.view_01.selectedIndex = e.itemIndex;

    }

    //
    private OnClickBtn(e: egret.TouchEvent): void {

    }

    protected partAdded(partName: string, instance: any): void {
        super.partAdded(partName, instance);
    }
    //移除监听事件
    public destroy() {


    }
}

再将整个场景添加到舞台在Main.ts中