温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Duilib应用之标签页(TabLayout)的使用

发布时间:2020-08-01 17:04:21 来源:网络 阅读:18397 作者:watertoeast 栏目:开发技术

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>


附件:http://down.51cto.com/data/2366250
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI