duilib控件与属性说明

转自 https://blog.csdn.net/thanklife/article/details/80091826

不知不觉中使用Duilib已经两周有余了,在使用过程中遇到了很多问题,最终自己也有了一丢丢的认识见解,特记录并分享。

控件

控件及继承关系图

【Window】窗口

【Control】除Window外其他所有组件都继承自Control

布局:

【Container】

【VerticalLayout】垂直布局:其内元素按照竖直方式排列

【HorizontalLayout】水平布局:其内元素按照水平方式排列

【TileLayout】平铺布局:例如360工具箱。属性columns[列数,如(4)]与itemsize[子项固定大小,如(128,128)]不能同时使用。

【TabLayout】标签页,配合Option使用。

【ChildLayout】

功能控件:

【ActiveX】

【WebBrowser】浏览器

【Label】标签

【Button】按钮

【Text】文本

【Progress】--【Slider】进度条--进度条按钮

【Edit】输入框,支持showhtml。

【RichEdit】输入框,不支持showhtml。支持多行,直接打回车即可。

【Option】标签

【ScrollBar】滚动条

【GifAnimGif】动画

【Combo】下拉框

【List--ListHeader】--【ListHeaderItem】--【ListLabelElement】--【ListTextElement】--【ListContainerElement】列表

【TreeView】--【TreeNode】树

属性

详细属性查看官方Duilib文件夹内的"属性列表.xml"。

【name】控件名字,同一窗口内必须唯一。建议命名格式"控件类型名称",例如:"btnClose";"optionMain"。

【bkcolor】背景颜色。如:0xFFFFFFFF。一般的颜色RGB表示都是六位,这里的八位中的前两位为FF,后面六位与普通RGB颜色编码相同。RGB颜色参考

【bkcolor2】背景渐变色2,和bkcolor配合使用,如(0xFFFFFF00)。

【bkcolor3】背景渐变色3,和bkcolor、bkcolor2配合使用,如(0xFFFF00FF)"。

【bkimage】背景图片,如(bk.bmp或file=‘aaa.jpg‘ res=‘‘ restype=‘0‘ dest=‘0,0,0,0‘ source=‘0,0,0,0‘ corner=‘0,0,0,0‘ mask=‘#FF0000‘ fade=‘255‘ hole=‘false‘ xtiled=‘false‘ ytiled=‘false‘)。

【width】控件预设的宽度,如(100)。

【height】控件预设的高度,如(30)。

【text】显示文本,如(测试文本)。

【tooltip】鼠标悬浮提示,如(请在这里输入你的密码)。

【enabled】是否可以响应用户操作,如(true)。

【mouse】本控件是否可以响应鼠标操作,如(true)。

【mousechild】本控件的子控件是否可以响应用户操作,如(true)。

【visible】是否可见,如(true)。

【menu】是否需要右键菜单。

【float】【pos】是否采用绝对定位以及位置(左上右下)。如float="true" pos="10,10,10,10"。只有float为true时,pos才有效,只有float为true,无pos时内容不显示。更多用法见补充的布局技巧

【padding】外边距,如(2,2,2,2)。边距不属于此控件。

【inset】容器的内边距,如(2,2,2,2)。边距属于此控件。

【bordercolor】边框颜色,如(0xFF000000)。

【focusbordercolor】获得焦点时边框的颜色,如(0xFFFF0000)。

【align】文字对齐方式。在option中可以取left、right、center、top、button,如(center)。

【textpadding】文字显示的边距,如(2,2,2,2)。

【endellipsis】句末显示不全是否使用...代替,如(true)"/>

【showhtml】是否使用类html富文本绘制,如(false)。

【vscrollbar】是否使用竖向滚动条,如(true)。只有内容超出容器后才会显示滚动条。
自己需要先定义vscrollbar滚动条


  1. <Default name="VScrollBar" value="" />

【hscrollbar】是否使用横向滚动条,如(true)。只有内容超出容器后才会显示滚动条。


  1. <Default name="HScrollBar" value="" />

【bkimage】【normalimage】【hotimage】【focusedimage】【pushedimage】【selectedimage】【disabledimage】
【textcolor】【hottextcolor】【focusedtextcolor】【pushedtextcolor】【selectedtextcolor】【disabledtextcolor】
普通状态--鼠标悬浮状态--获得焦点时状态--鼠标按下状态--选中状态--禁用状态
【foreimage】option,process,slider具有的前景图片。

实例

时间控件

<DateTime name="DateTimeDemo1" bkcolor="#FFE2E5EA"/>

按钮

 <Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file=‘SysBtn\CloseNormal.bmp‘ " hotimage=" file=‘SysBtn\CloseFocus.bmp‘ " pushedimage=" file=‘SysBtn\CloseFocus.bmp‘ "/>

进度条


  1. <Progress name="ProgressDemo1" text="Progress" width="100" height="20" foreimage="Progress/progress_fore.png" min="0" max="100" value="50" hor="true" align="center"/>
  2. <Slider name="SliderDemo1" width="100" height="18" thumbsize="12,20" bkimage="file=‘Slider/slider_fore.bmp‘ mask=‘0xffff00ff‘" thumbimage="file=‘Slider/SliderBar.png‘ mask=‘0xffffffff‘"/>

下拉框


  1. <Combo name="ComboDemo1" width="100" height="30" normalimage="file=‘ComboBox/Combo_nor.bmp‘" hotimage="file=‘ComboBox/Combo_over.bmp‘ " pushedimage="file=‘ComboBox/Combo_over.bmp‘ ">
  2. <ListLabelElement text="zdy" selected="true"/>
  3. <ListLabelElement text="zzz"/>
  4. </Combo>

编辑框

<Edit text="姜糖不语" font="2"  textcolor="#FF00a0e9" bordersize="2" bordercolor="#FF000000" focusbordercolor="#FFFF0000"/>

图片

<Container width="30" height="30" bkimage="file=‘SysBtn\setting_o.png‘  dest=‘10,5,30,25‘"/>

横线

<Control height="1" bkcolor="#FF000000"/>

导航栏与标签页


  1. //需要配合逻辑代码实现
  2. <Option name="OptionDemo1" text="1" bkcolor="#FFC5D4F2" group="tabDemo" selected="true"/>
  3. <Option name="OptionDemo2" text="1" bkcolor="#FFFFDC78" group="tabDemo"/>
  4. <Option name="OptionDemo3" text="1" bkcolor="#FFBECEA1" group="tabDemo"/>
  5. <TabLayout name="tabTest" bkcolor="#FFB2D1E3">
  6. <HorizontalLayout>
  7. <Label text="Option1" bkcolor="#FFC5D4F2" align="center" />
  8. </HorizontalLayout>
  9. <HorizontalLayout>
  10. <Text text="Option2" bkcolor="#FFFFDC78" align="center" />
  11. </HorizontalLayout>
  12. <HorizontalLayout>
  13. <Button text="Option3" bkcolor="#FFBECEA1" align="center" />
  14. </HorizontalLayout>
  15. </TabLayout>

注意那个按钮的实现。


  1. <Default name="TreeNode" value="width="9999""/>
  2. <TreeView vscrollbar="true" >
  3. <TreeNode height="24" folderattr="normalimage="file=‘SysBtn/list_icon_e.png‘ dest=‘6,6,18,18‘" selectedimage="file=‘SysBtn/list_icon_f.png‘ dest=‘6,6,18,18‘"" >
  4. <Text text="错误项" textcolor="#FFFF0000" font="3" float="true" pos="20,0,9999,9999" />
  5. <TreeNode text="xxx" >
  6. <Button text="修复" textcolor="#FF1ddb6e" width="50"/>
  7. </TreeNode>
  8. </TreeNode>
  9. </TreeView>

控件响应消息类型

原链接

消息 说明 Sender
click 鼠标点击 CButtonUI
dropdown 下拉显示 CComboUI
headerclick 点击列标题 CListHeaderItemUI
itemactivate   CListElementUI、CListContainerElementUI
itemclick 单击选项 CListLabelElementUI、CListContainerElementUI
itemselect 选择选项 CComboUI、CListUI
killfocus 失去焦点 CControlUI
link   CTextUI、CListTextElementUI
menu   CButtonUI、CControlUI
return 回车 CEditWnd、CRichEditUI
scroll 滚动 CScrollBarUI
selectchanged 变更选项 COptionUI
setfocus 获得焦点 CControlUI
showactivex   CActiveXUI
textchanged 文本被改变 CEditWnd
tabselect 标签页被选中 CTabLayoutUI
timer   CControlUI
valuechanged 值发生变化 CSliderUI
windowinit 窗体初始化

部分方法实现


  1. SetText();
  2. SetColor();

控件创建

增加控件:pNode->Add(pText);
TreeNode增加TreeNode:pNode->AddAt(pNodeLeaf, 0);

标签页

相关xml:


  1. <!--导航栏-->
  2. <HorizontalLayout height="113" bkcolor="#FF267FFC" bkcolor2="#FF0782FB">
  3. <HorizontalLayout width="920">
  4. <Option name="AdSafe1" text="净网首页" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file=‘Option\Option1m.png‘ dest=‘36,36,76,76‘" hotimage="file=‘Option\Option1w.png‘ dest=‘36,36,76,76‘" pushedimage="file=‘Option\Option1w.png‘ dest=‘36,36,76,76‘" selectedimage="file=‘Option\Option1w.png‘ dest=‘36,36,76,76‘" group="AdSafeOption" selected="true"/>
  5. <Option name="AdSafe2" text="深度优化" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file=‘Option\Option2m.png‘ dest=‘36,36,76,76‘" hotimage="file=‘Option\Option2w.png‘ dest=‘36,36,76,76‘" pushedimage="file=‘Option\Option2w.png‘ dest=‘36,36,76,76‘" selectedimage="file=‘Option\Option2w.png‘ dest=‘36,36,76,76‘" group="AdSafeOption" />
  6. <Option name="AdSafe3" text="弹窗抓取" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file=‘Option\Option3m.png‘ dest=‘36,36,76,76‘" hotimage="file=‘Option\Option3w.png‘ dest=‘36,36,76,76‘" pushedimage="file=‘Option\Option3w.png‘ dest=‘36,36,76,76‘" selectedimage="file=‘Option\Option3w.png‘ dest=‘36,36,76,76‘" group="AdSafeOption" />
  7. <Option name="AdSafe4" text="拦截记录" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file=‘Option\Option4m.png‘ dest=‘36,36,76,76‘" hotimage="file=‘Option\Option4w.png‘ dest=‘36,36,76,76‘" pushedimage="file=‘Option\Option4w.png‘ dest=‘36,36,76,76‘" selectedimage="file=‘Option\Option4w.png‘ dest=‘36,36,76,76‘" group="AdSafeOption" />
  8. <Option name="AdSafe5" text="移动净网版" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file=‘Option\Option5m.png‘ dest=‘32,36,62,76‘" hotimage="file=‘Option\Option5w.png‘ dest=‘32,36,62,76‘" pushedimage="file=‘Option\Option5w.png‘ dest=‘32,36,62,76‘" selectedimage="file=‘Option\Option5w.png‘ dest=‘32,36,62,76‘" group="AdSafeOption" />
  9. </HorizontalLayout>
  10. <HorizontalLayout />
  11. </HorizontalLayout>
  12. <!--窗体-->
  13. <TabLayout name="AdSafeContent" bkcolor="#FFFFFFFF">
  14. <!-- <ChildLayout xmlfile="PageOne.xml" />
  15. <ChildLayout xmlfile="PageTwo.xml" />
  16. <ChildLayout xmlfile="PageThree.xml" />
  17. <ChildLayout xmlfile="PageFour.xml" />
  18. <ChildLayout xmlfile="PageFive.xml" /> -->
  19. <Include source="PageOne.xml" />
  20. <Include source="PageTwo.xml" />
  21. <Include source="PageThree.xml" />
  22. <Include source="PageFour.xml" />
  23. <Include source="PageFive.xml" />
  24. </TabLayout>

相关代码片段:


  1. if (msg.sType == _T("selectchanged"))
  2. {
  3. CDuiString strName = msg.pSender->GetName();
  4. CTabLayoutUI* pControl = static_cast<CTabLayoutUI*>(m_PaintManager.FindControl(_T("AdSafeContent")));
  5. if (strName == _T("AdSafe1"))
  6. {
  7. pControl->SelectItem(0);
  8. }
  9. if (strName == _T("AdSafe2"))
  10. {
  11. pControl->SelectItem(1);
  12. }
  13. if (strName == _T("AdSafe3"))
  14. {
  15. pControl->SelectItem(2);
  16. }
  17. if (strName == _T("AdSafe4"))
  18. {
  19. pControl->SelectItem(3);
  20. }
  21. if (strName == _T("AdSafe5"))
  22. {
  23. pControl->SelectItem(4);
  24. }
  25. }

Combo

相关xml:


  1. <Combo name="comboUpdateFrequency" width="60" height="30" normalimage="file=‘ComboBox/Combo_nor.bmp‘ corner=‘5,2,30,2‘" hotimage="file=‘ComboBox/Combo_over.bmp‘ corner=‘5,2,30,2‘" pushedimage="file=‘ComboBox/Combo_over.bmp‘ corner=‘5,2,30,2‘" >
  2. <ListLabelElement name="listDay" text=" 每天" selected="true"/>
  3. <ListLabelElement name="listWeek" text=" 每周" />
  4. <ListLabelElement name="listMonth" text=" 每月" />
  5. </Combo>

相关代码片段:


  1. void SetUpdateFrequency(int iUpdateFrequency)
  2. {
  3. CComboUI* pComboUpdateFrequency = static_cast<CComboUI*>(m_PaintManager.FindControl(_T("comboUpdateFrequency")));
  4. pComboUpdateFrequency->SetInternVisible(true);
  5. if (iUpdateFrequency == 0)
  6. {
  7. pComboUpdateFrequency->SelectItem(0);
  8. }
  9. else if (iUpdateFrequency == 1)
  10. {
  11. pComboUpdateFrequency->SelectItem(1);
  12. }
  13. else if (iUpdateFrequency == 2)
  14. {
  15. pComboUpdateFrequency->SelectItem(2);
  16. }
  17. }

补充

阴影实现

在WinMain入口函数内添加


  1. CWndShadow::Initialize(hInstance);

在窗口类内定义一个成员变量

CWndShadow m_WndShadow;

在初始化窗口InitWindow函数内部进行实现


  1. m_WndShadow.Create(m_hWnd);
  2. m_WndShadow.SetSize(3);
  3. m_WndShadow.SetDarkness(200);
  4. //m_WndShadow.SetColor(0x0AFF00);
  5. m_WndShadow.SetPosition(0, 0);

关于【ChildLayout】

作用就是从一个xml文件中加载布局来嵌入到ChildLayout布局所在的地方,使用这个布局一般只需要指定xmlfile属性来设置xml文件位置就可以了。他的意义在于可以把繁杂的大量xml代码分隔开。比如他和TabLayout布局结合,让TabLayout布局包含5个ChildLayout布局,而每个ChildLayout布局分别从5个xml文件加载自己的布局文件,这样就可以分块化的编写布局代码。

实际上有个比他更好用的标签,就是Include标签,Include不属于布局,但他的作用在布局方面非常类似ChildLayout,指定他的Source属性到某个xml文件就可以了。相对ChildLayout,Include的优点是可以自动识别自定义控件,而ChildLayout不可以!

布局技巧

1.一般是垂直布局,水平布局嵌套使用。

2.使用【inset】属性和【padding】。【inset】的边框依旧属于控件内部,而【padding】的边框不属于控件。

3.使用float。
float="0.5,0.5,0.5,0.5" pos="-10,-10,10,10"。在上一层控件的正中间。距离中间点左上右下都是10的矩形。

float="0.1,0.3,0.2,0.4" pos="0,0,0,0"。占据上一层控件的水平0.1-0.2,垂直0.3-0.4的区域。

关于在逻辑代码中SetPos无效的问题。

1.设置控件的Pos的时候控件必须已经Add到了某个Contain中,否则SetPos无效

2.如果一定想在之前设置的话,那么请使用SetAttribute ,转

Combo不显示值的问题

需要pCombo->SetInternVisible(true); 具体实例见上面的combo实例

RECT类型示例


  1. RECT rc;
  2. rc.left = 20;
  3. rc.top = 0;
  4. rc.right = 9999;
  5. rc.bottom = 9999;
  6. CTextUI* pText = new CTextUI;
  7. pText->SetFloat(true);
  8. pText->SetPos(rc);

TreeNode的bug

如果直接在TreeNode设置文字,那么textcolor属性无效,需要使用

itemattr="textcolor="#FFFF0000" font="3""

但是此属性在鼠标悬浮后失效(如果是黑色的无影响),目前为深入研究解决方案。所以推荐采用TreeNode嵌套Text实现。

不显示边框阴影

经过个人使用发现:window必须roundcorner属性才能实现阴影。


  1. <Window size="920,600" mininfo="920,600" roundcorner="5,5" caption="0,0,0,30" sizebox="4,4,4,4" >
  2. </Window>

关于ini文件的读写以及一个坑

相对路径设置如下将跟cpp文件在同一目录


  1. #define inisrc TEXT(".//config.ini")

使用方式


  1. int iCloseStatus = GetPrivateProfileInt(TEXT("CloseStatus"), TEXT("status"), 1, inisrc);
  2. int iUpdateFrequency = GetPrivateProfileInt(TEXT("Update"), TEXT("frequency"), 1, inisrc);
  3. WritePrivateProfileString(TEXT("CloseStatus"), TEXT("status"), _T("0"), inisrc);
  4. WritePrivateProfileString(TEXT("Update"), TEXT("frequency"), _T("0"), inisrc);

相关文件【config.ini】内容


  1. [CloseStatus]
  2. status=0
  3. [Update]
  4. frequency=0

实现效果图

Demo源码

作者:静候那一米阳光
链接:https://www.jianshu.com/p/4474f7a9b8b6
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/ymd12103410/p/11177606.html

时间: 2024-11-05 13:40:44

duilib控件与属性说明的相关文章

C#控件事件属性大全

C#控件及常用设计整 1.窗体... 1 2.Label 控件... 3 3.TextBox 控件... 4 4.RichTextBox控件... 5 5.NumericUpDown 控件... 7 6.Button 控件... 7 7.GroupBox 控件... 7 8.RadioButton控件... 8 9.CheckBox 控件... 8 10.ListBox 控件... 9 11.ComboBox 控件... 10 12.CheckedListBox 控件... 10 13.Pict

网络操作不能直接写在主线程中 以及 为什么不能在子线程中更新UI控件的属性

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //注意: 所有网络操作不能直接写在主线程中 因为所有的网络操作都是耗时的,如果加载到主线程中,会导致与用户的交互出现问题 ,所以要加载到子线程中 // [self loadImage]; [self performSelectorInBackground:@selector(loadImage) withObject:nil]; } //加

UI控件tag属性和魔法数字的处理

说明:tag属性有很大的用处,它就好像每个UI控件的id,当多个按钮指向同一个监听方法时,可以给方法带参数UIButton,然后根据不同的tag值 来判断执行哪个按钮的监听事件: - (IBAction)up:(UIButton *)sender // 该方法有四个btn指向,tag值是下边的,即可根据不同tag值执行相应的代码 { //upMoveTag的tag是10 //bottomMoveTag:11 //leftMoveTag:12 //rightMoveTag:13 CGRect re

Android中常用控件及属性

在之前的博客为大家带来了很多关于Android和jsp的介绍,本篇将为大家带来,关于Andriod中常用控件及属性的使用方法,目的方便大家遗忘时,及时复习参考.好了废话不多讲,现在开始我们本篇内容的介绍. 1.控制应用显示的方向: setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖直显示效果. setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LA

在C#中使用属性控件添加属性窗口

转自原文 在C#中使用属性控件添加属性窗口 第一步,创建在应用程序中将要展现的字段属性为public公有属性.其中,所有的属性必须有get和set的方法(如果不设置get方法,则要显示的属性不会显示在属性控件中).为了设置相关的属性,必须设置下面的一些关于属性控件的属性值,如下表所示: 属性值 含义 CategoryAttribute 该属性对在Property控件中的属性按字母顺序进行归类 DescriptionAttribute 其值为对每个属性的具体文字描述,将会显示在property控件

Silverlight中Image控件Stretch属性的四种值比较

通过设置Image控件Stretch属性的值可以控制图片的显示形式: 包含的值:None.Fill.Uniform.UniformToFill 1 <Grid x:Name="LayoutRoot" Background="White" Height="489" Width="603"> 2 <Image Height="150" HorizontalAlignment="Lef

android软件开发之TextView控件常用属性

TextView控件 text属性,设置显示的文本 textColor:设置文本颜色 textSize:设置文本字体大小 autoLink:设置文本为电话,URL连接等的时候是否显示为可点击的链接 cursorVisible:设定光标为显示或者隐藏,默认为显示 drawableTop:在文本上方输出一个drawable,如图片 drawableLeft.drawableBottom.drawableRight如上 drawablePadding:设置图片的外边距 singleLine:设置单行显

Kodak图像扫描控件的属性、事件、方法

Kodak图像扫描控件的属性.事件.方法 1. Kodak图像扫描控件的属性 (1)DestImageControl属性 字符型.该属性连接图像扫描控件到一个图像编辑控件,允许在扫描完毕后查看图像. (2)FileType属性 数值型.返回或设置图像扫描后建立的图像类型,属性值如表4-43所示. 表4-43                          FileType属性值 属性值 说明 1-Kodak Image Document (TIFF) TIFF文件 2-Fax Viewer D

转 python通过win32api轻松获取控件的属性值

python通过win32api轻松获取控件的属性值 2014-08-29 15:26:56|  分类: 自动化测试 |  标签:win32  |举报|字号 订阅 下载LOFTER我的照片书  | 1.如何利用句柄操作windows窗体 首先,获得窗体的句柄  win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd)  GetDlgItem(hwnd,loginID) 最后,利用控件句柄进行操作 python可以通过w