백로 EUI 탭 +는, ViewStack

참조 :

백로 튜토리얼 - 탭

 

많은 게임 탭 UI.

자습서 공식 웹 사이트는 명확하지 않다 말했다. 사용은 그 자체로 작성합니다. 여기 EUI 탭 +는, ViewStack와 모양을 얻을 수 있습니다.

 

 

 

피부 탭에 새 항목을 작성하십시오

첫 번째는 이미지 업 디스플레이 버튼입니다

두 번째는 이미지를 선택 표시 버튼입니다

데이터 {}의 라벨 라벨 세번째 세트는, ViewStack 컨텐츠 명을 디스플레이

 

소스 코드에 EXML는, 제 사진 visible.disabled = "FALSE"visible.up = 설정 = "FALSE"제 1 픽쳐 visible.down 설정 "FALSE"

 

2. 스테이지로 드래그 탭 구성 요소

아이디 탭을 설정하기 위해, 피부 TabBarSkin 대한 항목은 레이아웃 HorizontalLayout 수평으로 배치된다.

 

제공된 데이터 소스의 dataProvider = "는, ViewStack"로 EXML 소스 설정하는 제 기본 선택 의해 selectedIndex = "0"

 

 

 3 스테이지로 드래그는, ViewStack

는, ViewStack 제공의 ID는, ViewStack

하부는, ViewStack 드래그 세 개의 버튼 (또는 사용자 정의 UI)는 세 개의 버튼 스위치는 세 페이지에 상당한다.

 

 

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如果要实现，得自己写自定义组件了。