Duilib自帶的例子360SafeDemo中有TabLayout的使用方法，本文參照360SafeDemo範例，梳理TabLayout的基本使用方法，方便理解掌握。
1、定義一組Option作爲標籤頁的標籤
<Option name="Option01" float="false" text="Tab01" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000" selectedtextcolor="#ff96cdcd" group="switch" selected="true" /> <Option name="Option02" float="false" text="Tab02" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000" selectedtextcolor="#ff96cdcd" group="switch" />
需要注意的是，上述Option都在同一個組
2、定義TabLayout作爲標籤頁
<TabLayout name="TabLayoutMain" selectedid="-1" topbordersize="1" bordercolor="#ff000000" padding="2,2,2,2" > <HorizontalLayout> <Label text="This is tab01." /> </HorizontalLayout> <HorizontalLayout> <Label text="This is tab02." /> </HorizontalLayout> </TabLayout>
3、在代碼中處理DUI_MSGTYPE_SELECTCHANGED（selectchanged）消息
如果要使用DUI_ON_MSGTYPE宏處理DUI_MSGTYPE_SELECTCHANGED消息，需要在主窗口類的頭文件中添加DUI_DECLARE_MESSAGE_MAP，然後在CPP文件中添加
DUI_BEGIN_MESSAGE_MAP(CTestTabLayoutWnd,WindowImplBase) DUI_ON_MSGTYPE(DUI_MSGTYPE_SELECTCHANGED, OnOptSelChanged) DUI_END_MESSAGE_MAP()
4、在OnOptSelChanged函數中編寫功能代碼
DUI_MSGTYPE_SELECTCHANGED消息是由某個具體的標籤（Option）發出的，當某個Option被點擊後，DUI_MSGTYPE_SELECTCHANGED消息的發送者就是被點擊的Option。
給出完整的xml內容以及代碼（見附件）
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> <Window size="800,600" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400"> <VerticalLayout name="VerticalLayoutUI1" bkcolor="#ff696969" > <HorizontalLayout height="32" bkcolor="#ffe6e6dc" bkcolor2="#ffaaaaa0"> <Label name="Title" padding="2" text="test" /> <VerticalLayout /> <Button name="minbtn" width="50" text="min" /> <Button name="maxbtn" width="50" text="max" /> <Button name="closebtn" width="50" text="close" /> </HorizontalLayout> <HorizontalLayout name="HorizontalLayoutUI1" width="600" height="30" padding="2,2,2,2" > <Option name="Option01" float="false" text="Tab01" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000" selectedtextcolor="#ff96cdcd" group="switch" selected="true" /> <Option name="Option02" float="false" text="Tab02" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000" selectedtextcolor="#ff96cdcd" group="switch" /> </HorizontalLayout> <TabLayout name="TabLayoutMain" selectedid="-1" topbordersize="1" bordercolor="#ff000000" padding="2,2,2,2" > <HorizontalLayout> <Label text="This is tab01." /> </HorizontalLayout> <HorizontalLayout> <Label text="This is tab02." /> </HorizontalLayout> </TabLayout> </VerticalLayout> </Window>