云信DUILIB 常用控件 小实例
2024-05-23 19:19:53
云信duilib在原duilib基础上扩展而来，包含了常用的控件。
下面是自己学习过程中，经常用到的一些小知识点。
1 Label标签
1.1 一般用法
<Label name= "path_label" valign="center" height="auto" width="auto" margin="10,0,5,0" text="存储地址" normaltextcolor="white" font="1"/>比如：MFC 中常用的文件对话框
使用duilib可以这么写
<Label name= "path_label" valign="center" height="auto" width="auto" margin="10,0,5,0" text="存储地址" normaltextcolor="white" font="1" /><RichEdit name="record_path" width="450" height="28" margin= "10,0,0,0" bkcolor="bk_url_edit" bordersize="1" bordercolor="bk_border_url_edit" valign="center" align="vcenter" font="1" multiline="false" padding="5,0,0,0" normaltextcolor="bk_url_edit_text" disabledtextcolor="bk_url_edit_text" prompttext="路径" promptcolor="bk_url_edit_text" borderround="2,2"/><Button name="set_file_path" height="28" width="auto" margin= "20,0,1,0" bordersize="1" valign="center" normaltextcolor="change_file_path_color" font="1" text="打开路径"/> 1.2
使得标签位于盒子中间显示
可以这么写
<Box bkcolor="bk_wnd_darkcolor1" height="60"><Label font="1" halign="center" valign="center" normaltextcolor="white" text="标签" /></Box>1.3
使用textid 好处是在不修改XML的情况下，可以方便修改文字
<Label name="no_search_result_tip" visible="false" halign="center"margin="0,20,0,0" textid="STRID_MAINWINDOW_NO_SEARCH_RESULT" font="2"
/>而这个textid是保存在bin\\lang\\zh_CN目录下的gdstrings.ini文件中的。
此文件中定义了id所对应的文本
1.4 Label标签的width默认是auto，根据文字确定宽度
将其居中对齐，可用如下方式
//将其设置为 stretch 可拉伸方式，这样其宽度由父容器决定，然后再将其 文字对齐方式设置为center 居中对齐
<Label width="stretch" align="center" text="课程题目" font="9" />
或者，使用如下方式：
<Label text="本节知识点" halign="center" font="7" />//标签宽度是文字宽度，因此align不起作用，这时候设置halign的含义是指它在父容器内的排序方式，此时是居中2 分割线
分割线也是经常用到的。
2.1 横向分割线
<Control bkcolor="splitline_level2" height="1" />
or
<Control class="splitline_hor_level1" width="stretch"/> 2.2 纵向分割线
<Control class="splitline_ver_level1" height="stretch"/>分割线的颜色是在global.xml中定义的
<!--分割线色值--><!--第一级分割线，较深--><TextColor name="splitline_level1" value="#ffd2d4d6"/><!--第二级分割线，较浅--><TextColor name="splitline_level2" value="#ffebedf0"/><TextColor name="splitline_level8" value="#ff222435"/> <!--分割线--><Class name="splitline_hor_level1" value="bkcolor="splitl
ine_level1" height="1""/><Class name="splitline_hor_level2" value="bkcolor="splitl
ine_level2" height="1""/><Class name="splitline_ver_level1" value="bkcolor="splitl
ine_level1" width="1""/><Class name="splitline_hor_level3" value="bkcolor="splitl
ine_level8" height="1""/> 2.3 子控件间隔
布局中的 childmargin="20" 表示 子控件间的额外距离。这个有时候也是分割线效果，只不过分割线颜色为背景色，这是因为它本质上是子控件的间隙。
比如VListBox设置childmargin 可以让列表项之间有空隙，进而起到分割线作用
<VListBox class="list" bkcolor="lightcolor3" name="course_list" vscrollunit="100" childmargin="20" padding="30,20,20,0">3图像
3.1 盒子里有一个图片，圆形居中，图片中间部分显示label名字
<Box height="150" bkcolor="bk_wnd_logincolor"><Control bkimage="circle-1.png" width="100" height="100" valign="center" halign="center" borderround="100,100" /><Label text="使用者" halign="center" valign="center" />
</Box>3.2 图片按钮
<Button name="btn_header1" width="66" height="66" margin="1,1,1,1"borderround="66,66" cursortype="hand" bkimage="1.png" />不过，这种图片按钮，规整成圆形后，边界很粗糙，所以可以加边界遮罩，即除边界外全透明的同等图片来缓和处理。
上图所示，是加遮罩后的效果。
<Box width="auto" height="auto" valign="center" ><Button name="btn_header" width="66" height="66" margin="1,1,1,1" borderround="66,66" cursortype="hand" /><Control bkimage="head_mask.png" mouse="false"/>//68*68的边界遮罩
</Box>
3.3 小图标 配合按钮、EDIT等控件使用
<!--搜索栏--><HBox height="36" bkcolor="bk_main_wnd_search"><Control name="search_icon" width="auto" height="auto" valign="center" margin="10,0,0,0" alpha="192" bkimage="file='../public/icon/icon_search.png'"/><RichEdit class="simple prompt" name="search_edit" height="auto" margin="8,0,10,0" valign="center" font="2" normaltextcolor="white" prompttextid="STRID_MIANWINDOW_SEARCH_EDIT_PROMPT"/><Button name="clear_input" visible="false" valign="center" margin="0,0,10,0"normalimage="..\public\button\btn_del_search_normal.png" hotimage="..\public\button\btn_del_search_hover.png" pushedimage="..\public\button\btn_del_search_normal.png"/></HBox>4 Option选项卡与Tab 展示页 结合使用
点击某一选项卡后，展示这一选项卡对应的页面，点击另一个选项卡后，则展示另一个选项卡对应的页面。由此构成了多页面展示效果。
实现逻辑如下：
逻辑如下:<HBox width="auto" height="auto" halign="center" margin="0,11,0,0" childmargin="10"><Option group="demo_opt" selected="true"><Event type="select" receiver="demo_tab" applyattribute="selectedid="0""/></Option><Option group="demo_opt" ><Event type="select" receiver="demo_tab" applyattribute="selectedid="1""/></Option><Option group="demo_opt" ><Event type="select" receiver="demo_tab" applyattribute="selectedid="2""/></Option></HBox><TabBox name="demo_tab" height="auto"><VBox height="auto" name="tab_0"></VBox><VBox height="auto" name="tab_1"></VBox><VBox height="auto" name="tab_2"></VBox></TabBox>实例1： 使用option控件
<!-- Option选项卡 --><VBox halign="center" childmargin="10"><Option bordersize="5" height="60" width="stretch" valign="center" halign="center" group="headPage_opt" name="myCourse" selected="true" selectednormalcolor="bk_wnd_darkcolor5" selectedhotcolor="bk_wnd_darkcolor1" selectedpushedcolor="bk_wnd_darkcolor1" text="我的课程" normaltextcolor="white"><Event type="select" receiver="page_tab" applyattribute="selectedid="0""/></Option><Option width="stretch" selectednormalcolor="bk_wnd_darkcolor5" selectedhotcolor="bk_wnd_darkcolor1" selectedpushedcolor="bk_wnd_darkcolor1" height="60" valign="center" halign="center" group="headPage_opt" name="myDevice" text="设备调试" normaltextcolor="white"><Event type="select" receiver="page_tab" applyattribute="selectedid="1""/></Option><Option width="stretch" selectednormalcolor="bk_wnd_darkcolor5" selectedhotcolor="bk_wnd_darkcolor1" selectedpushedcolor="bk_wnd_darkcolor1" height="60" valign="center" halign="center" group="headPage_opt" name="mySet" text="设置" normaltextcolor="white"><Event type="select" receiver="page_tab" applyattribute="selectedid="2""/></Option> </VBox> <TabBox name="page_tab" ><VBox><Label text="页面1"/></VBox><VBox><Label text="页面2"/></VBox><VBox><Label text="页面3"/></VBox></TabBox>实例2：使用OptionBox布局，这样功能更强大。
<VBox halign="center"><OptionBox height="60" cursortype="hand" group="headPage_opt" name="myCourse" selected="true"><Event type="select" receiver=".\select_tab" applyattribute="selectedid="0""/><Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="1""/><Event type="select" receiver="page_tab" applyattribute="selectedid="0""/><TabBox mouse="false" mousechild="false" name="select_tab" ><HBox><Control normalimage="file='bk_tab_selected.png' corner='5,5,5,5'"/> </HBox><HBox><Control normalimage="file='bk_tab_unselected.png' corner='5,5,5,5'"/> </HBox></TabBox><Label text="页面1" halign="center" valign="center" normaltextcolor="bk_wnd_darkcolor1" font="2" mouse="false"/></OptionBox><OptionBox height="60" cursortype="hand" group="headPage_opt" name="myDevice"><Event type="select" receiver=".\select_tab" applyattribute="selectedid="1""/><Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="0""/><Event type="select" receiver="page_tab" applyattribute="selectedid="1""/><TabBox mouse="false" mousechild="false" name="select_tab"><HBox><Control normalimage="file='bk_tab_selected.png' corner='5,5,5,5'"/> </HBox><HBox><Control normalimage="file='bk_tab_unselected.png' corner='5,5,5,5'"/> </HBox></TabBox><Label text="页面2" halign="center" valign="center" normaltextcolor="bk_wnd_darkcolor1" font="2" mouse="false"/></OptionBox><OptionBox height="60" cursortype="hand" group="headPage_opt" name="mySet"><Event type="select" receiver=".\select_tab" applyattribute="selectedid="1""/><Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="0""/><Event type="select" receiver="page_tab" applyattribute="selectedid="2""/><TabBox mouse="false" mousechild="false" name="select_tab"><HBox><Control normalimage="file='bk_tab_selected.png' corner='5,5,5,5'"/> </HBox><HBox><Control normalimage="file='bk_tab_unselected.png' corner='5,5,5,5'"/> </HBox></TabBox><Label text="页面3" halign="center" valign="center" normaltextcolor="bk_wnd_darkcolor1" font="2" mouse="false"/> </OptionBox></VBox><TabBox name="page_tab" ><VBox><Label text="页面1"/></VBox><VBox><Label text="页面2"/></VBox><VBox><Label text="页面3"/></VBox></TabBox>效果如下：
4 最大化按钮
默认情况下，在界面上添加后，你会发现，虽然最大化了窗口，但是再次点击时并没有起作用，因为这需要自己添加代码，在响应单击事件时确定最大化，和从最大化返回。
实现由两种方式，第一种如下：
XML中语句
<!-- 左侧标题栏 最小及关闭按钮 --><HBox height="auto" margin="200,5,5,5" valign="top"><Control mouse="false"/><Button class="btn_wnd_min" margin="2,0,2,0" name="minbtn"/><Button class="btn_wnd_max" name="btn_max_restore" margin="2,0,2,0"/> //最大化<Button class="btn_wnd_close" name="closebtn"/></HBox><!-- 标题栏分割线 --><Control bkcolor="splitline_level2" height="1" margin="200,40,0,0"/>相应窗口的代码，比如CMyForm窗口
1）定义按钮
ui::Button *btn_max_restore_;2）响应OnClicked( ui::EventArgs* arg )消息
如果最大化，点击的时候则返回原状态，如果是原状态，点击后则最大化。
else if(name == L"btn_max_restore"){DWORD style = GetWindowLong(m_hWnd, GWL_STYLE);if (style & WS_MAXIMIZE)::ShowWindow(m_hWnd, SW_RESTORE);else::ShowWindow(m_hWnd, SW_MAXIMIZE);}3）定义函数，用于设置此按钮的类别，比如设置为最大化类、设置为restore类，每种类云信duilib提供了对应的界面展现形式。
void OnWndSizeMax(bool max);void OnWndSizeMax(bool max)
{if (btn_max_restore_)btn_max_restore_->SetClass(max ? L"btn_wnd_restore" : L"btn_wnd_max");
}
而什么时候改变状态呢，是在消息处理中，判断是否窗口改变大小消息
HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{if (uMsg == WM_SIZE){if (wParam == SIZE_RESTORED)OnWndSizeMax(false);else if (wParam == SIZE_MAXIMIZED)OnWndSizeMax(true);}return __super::HandleMessage(uMsg, wParam, lParam);
}
这样设置后，最大化及还原功能就正常了。
第二种如下：
<HBox width="auto" height="auto" valign="top"><Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0"/> //最小化<Box width="21" margin="4,6,0,0"><Button class="btn_wnd_max" name="maxbtn"/> //最大化<Button class="btn_wnd_restore" name="restorebtn" visible="false"/> //还原 默认不可见</Box><Button class="btn_wnd_close" name="closebtn" margin="4,6,0,0"/> //关闭</HBox>窗口中新增一改变窗口大小时响应的函数
void OnWndSizeMax(bool max);void CMyForm::OnWndSizeMax(bool max)
{if (!m_pRoot)return;FindControl(L"maxbtn")->SetVisible(!max);FindControl(L"restorebtn")->SetVisible(max);
}窗口大小改变时，响应此函数
LRESULT CMyForm::HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{if (uMsg == WM_SIZE){if (wParam == SIZE_RESTORED)OnWndSizeMax(false);else if (wParam == SIZE_MAXIMIZED)OnWndSizeMax(true);}这个相对来说，简单些，设置的不多。
暂时，这些，未完待续。。。
有同样使用这个不开源的网易云信的，可以加Q群331506725
云信DUILIB 常用控件 小实例相关推荐
- Webix 常用控件使用实例
原文及更多教程请查看: http://fire.lvzmen.cn/index.php?app=article&ac=show&id=3 1.文本框 示例默认条件:不能为空,不大于64 ...
- ASP.NET AJAX---TimerHiddenField控件小实例 (实现倒计时)
①Default.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- ASP.NET AJAX---UpdateProgress控件小实例 (实现进度条设置显示图片时间)
①.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default ...
- C#常用控件的属性以及方法（转载）
-----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...
- 安卓常用控件--列表视图
安卓常用控件--列表视图 (一)列表视图概述 1.继承关系图 2.列表视图API文档 3. 列表视图四要素 4.四种适配器 (二)数组适配器 1.数组适配器API文档 2.数组适配器继承关系 3.数组 ...
- Qt常用控件介绍（一）
Qt常用控件介绍 Qt Creator 的使用技巧 Qt Creator的常用快捷键 按钮 QPushButton QToolButton QRadioButton QCheckBox QComman ...
- Windows phone8 基础篇（三） 常用控件开发
广告: 为了方便我们大家一起学习和讨论,我开设了一个群300143953.专门关于windows phone开发学习的群.因为群刚建,所以没人.欢迎大家.另外如果出现啥错误性的问题,希望大家能够 指 ...
- winform常用控件介绍
winform常用控件介绍 1.窗体 1 2.Label 控件 3 3.TextBox 控件 4 4.RichTextBox控件 5 5.NumericUpDown 控件 7 6.Button 控件 ...
- openlayers添加按钮_OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言 地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers ...
最新文章
- Sciences：Knight组发表尸体降解过程中的微生物组
- 果园机器人的课文_小学三年级下《果园机器人》课文
- Centos7.0安装tensorflow
- NIPS 2017 | 线上分享第一期：似自然梯度的优化算法KFAC与强化学习算法ACKTR
- 八边形点坐标数的lisp_图形学入门第五课：齐次坐标
- Linux学习（四）- 文件查找和压缩
- leetcode - 53. 最大子序和 152. 乘积最大子序列 - 两个算法之间的联系和区别
- 入门微信小程序[第六篇]微信小程序 -- 大樱桃的安排
- python分布式多进程框架 Ray
- 转http://www.anyliz.com/blog/article/Software/favorites-software-official-download-url.htm
- 计算机课程设计设计方案怎么写,(学生)计算机绘图课程设计方案.doc
- strpos使用不当引发漏洞
- char数组存储中英文字符
- 0811 iOS开发完整学习路线
- BSP-充电名词解释
- openCV calcHist函数的使用
- Linux 下进程相关的常用命令汇总
- u-boot.lds文件诠释
- TWS耳机行业现状：苹果想通吃，微软欲入局
- 观看中国软件市场,免费的WPS说明了什么?