白鷺EUIタブ+のViewStack

参考：

白鷺チュートリアル - タブ

多くのゲームタブUI。

チュートリアルの公式ウェブサイトは明らかではないと述べました。自身で書かれていました。ここでEUIタブ+のViewStackと外観を実現。

皮膚のタブに新しいエントリを作成します。1.

最初のイメージアップ表示ボタンです

第二は、画像を選択し、表示ボタンです

{データ}のラベルラベル三組のViewStackコンテンツ名を表示します

ソースコードにExml、第1の画像visible.down =「false」に設定する第二の画像がvisible.disabled設定=「false」を、visible.up =「false」を

2.ステージにドラッグし、タブコンポーネント

ID]タブを設定するには、皮膚TabBarSkinのエントリは、レイアウトがHorizontalLayout水平に配置されています。

提供されるデータソースのdataProvider =「のViewStack」、デフォルトの選択のselectedIndex =「0」を設定して最初にExml源

3ステージにドラッグのViewStack

ViewStackコンテナのための提供のViewStack ID

下のViewStackにドラッグ三つのボタン（またはカスタムUI）は、3つのボタンスイッチは、3つのページに相当します。

Exml源は、セットボタン名を入力し、この名前はTabBarSkin上{データ}ラベにマッピングされます。

4コードの動作]タブ+のViewStack

タブリスニング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使用方便，支持使用统一皮肤和特有皮肤，Egret如果要实现，得自己写自定义组件了。

问题：

おすすめ