Egret EUI Tab + ViewStack

參考：

Egret教程-選項卡

 

游戲中很多選項卡的UI。

官網教程說的不清楚。以前是用自己寫的。這里用Eui的Tab+ViewStack實現一下。

 

 

 

1. 新建Tab的條目皮膚

第一個Image是按鈕彈起時顯示

第二個Image是按鈕選中時顯示

第三個Label的標簽設置為{data}，用於顯示ViewStack的內容name

 

進入exml的源碼，設置第一張圖片visible.down="false"，設置第二張圖片visible.disabled="false", visible.up="false"

 

2. 拖動一個Tab組件到舞台

設置ID為tab，條目皮膚為TabBarSkin，布局為水平排列HorizontalLayout。

 

進入exml源碼，設置數據源dataProvider="viewStack"，設置默認選擇第一項selectedIndex="0"

 

 

 3 拖動一個ViewStack到舞台

設置Viewstack的ID為viewstack

拖動3個按鈕（或者自定義UI）到viewstack下，這3個按鈕就相當於要切換的3個頁面。

 

 

進入exml源碼，設置按鈕的name，這個name會映射到TabBarSkin上的Labe的{data}上。

 

 

4   代碼里操作tab+viewstack

tab監聽ITEM_TAP事件

/**
 * 主頁
 * @author chenkai 2020.2.16
 */
class HomeScene extends eui.Component{
	public tab:eui.TabBar;
	public viewStack:eui.ViewStack;

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

	protected childrenCreated(){
		this.tab.addEventListener(eui.ItemTapEvent.ITEM_TAP, this.itemTap, this);
	}

	private itemTap(e:eui.ItemTapEvent){
		                                           //當點擊第一個選項卡按鈕時，下面輸出為
		console.log(e.itemIndex, e.itemRenderer);  //0
		console.log(e.itemRenderer);               //第一個選項按鈕實例
		console.log(this.viewStack.selectedIndex); //0 
		console.log(this.viewStack.selectedChild); //viewstack下的第一個Button實例
	}
}

　　

 實際效果：

 

問題：

1. 當按鈕樣式不同時，怎么整？

因為Tab用的條目皮膚是TabBarSkin是一個皮膚，當3個按鈕，每個按鈕外觀不同時，就用不了了。

Laya的Tab+Viewstack使用方便，支持3個按鈕使用1個皮膚，也支持3個按鈕使用3個皮膚，Egret如果要實現，得自己寫自定義組件了。