eui-eui.ViewStack

ViewStack 導航器容器由一組彼此上下堆疊的子容器組成，其中一次只可以顯示一個子容器。選擇另一個子容器後，它將顯示在原來子容器的位置處，所以看起來好像此子容器替換了原來的子容器。但是，原來的子容器仍然存在，只不過它現在處於不可見狀態。以下為 TabBar 作為版面切換的控件

以下為 exml

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" top="20">
        <!-- tabbar 區 -->
        <e:TabBar dataProvider="{viewStack}">
            <!-- 自訂 tabbar 皮膚 -->
            <e:itemRendererSkinName>
                <e:Skin states="up,down">
                    <e:Group>
                        <e:Rect fillColor="0x333333" width="100" height="50" />
                        <e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0"
                                 verticalCenter="0" />
                    </e:Group>
                </e:Skin>
            </e:itemRendererSkinName>
            <e:layout>
                <e:HorizontalLayout gap="1" />
            </e:layout>
        </e:TabBar>
        <!-- 內容區 -->
        <e:Group width="600" height="200">
            <e:Rect fillColor="0x333333" width="100%" height="100%" />
            <!-- 內容顯示區有兩組內容 -->
            <e:ViewStack id="viewStack" width="100%" height="100%">
                <e:Group name="tab1" width="100%" height="100%">
                    <e:Label text="TestPanel1" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
                <e:Group name="tab2" width="100%" height="100%">
                    <e:Label text="TestPanel2" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
            </e:ViewStack>
        </e:Group>
        <e:layout>
            <e:VerticalLayout gap="0" />
        </e:layout>
    </e:Group>
</e:Skin>