Duilib應用之標簽頁（TabLayout）的使用

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>