Duilib学习笔记《03》— 控件使用

高级控件

一些控件的基本显示效果就如同上面两幅图所示。实际上，在Duilib学习笔记《01》—duilib整体框架认识中我们就已经提到过Duilib这个库的组成，其中就提到了控件这部分，如下图所示：

对应到工程代码中，实际上是分为了两部分——Core 和 Control。

Core中包含的是所有控件公用的部分，里面主要是一些基类和绘制的封装。

Control中包含的就是各个不同的控件的行为。

       

---

二. Duilib控件使用

下面就挑选部分控件的使用具体说明一下：

1）Button控件

按钮控件大家应该都不陌生了，在之前的空白窗体例子中左上角的系统操作按钮就用的按钮控件。

<Button name="closeBtn" maxwidth="45" maxheight="17" normalimage="file='sys_dlg_close.png' source='90,0,135,17'" hotimage="file='sys_dlg_close.png' source='45,0,90,17'" pushedimage="file='sys_dlg_close.png' source='0,0,45,17'"/>

Edit控件对应的有各种属性（只读、数字、密码。。。），而对应的仅仅只需要在XML中普通控件的布局属性中设分别设置readonly、numberonly、password即可。

3）Combo控件

<Combo name="font_type" droptype="droplist" width="100" height="22" textpadding="4,1,1,1" normalimage="file='combo.png' source='0,0,100,22' corner='2,2,20,2'" hotimage="file='combo.png' source='0,22,100,44' corner='2,2,22,2'" pushedimage="file='combo.png' source='0,44,100,66' corner='2,2,22,2'"><ListLabelElement text="微软雅黑" selected="true" height="23" /><ListLabelElement text="宋体" height="23" /><ListLabelElement text="黑体" height="23" /><ListLabelElement text="幼圆" height="23" /><ListLabelElement text="楷体" height="23" /></Combo>

XML布局中外侧是<Combo></Combo>，内层通过<ListLabelElement />添加具体选择。

4）List控件

<List name="listview" vscrollbar="true" hscrollbar="true" headerbkimage="file='list_header_bg.png'" itemtextstyle="center"><ListHeader height="24" menu="true"><ListHeaderItem text="姓名" width="100" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1" /><ListHeaderItem text="学号" width="200" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1" /><ListHeaderItem text="成绩" width="200" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1" /></ListHeader></List>

在实际中，我们可能需要向控件中添加数据，而对于List中如何添加数据呢？如下所示：

// List控件中添加数据// 注意：添加List列表内容，必须先Add(pListElement)添加元素，再SetText进行元素值的设置for (int i = 0; i < 10; i++){    CListTextElementUI* pListElement = new CListTextElementUI;    pListElement->SetTag(i);    m_pList->Add(pListElement);    pListElement->SetText(0, _T("WHO1753"));    pListElement->SetText(1, _T("程序设计"));    pListElement->SetText(2, _T("100"));}

---

三. 总结

除了上述这些列举的这些控件例子外，还有其它很多控件没能一一列举。但记住一点，一些复杂的东西都是由一些简单的东西所组成的。对于控件这部分的介绍，总结起来其实主要就是一下几点：

1）布局

控件在XML中布局基本都是<控件 属性名=”属性值”  />的形式书写。

2）属性设置

在前面，控件的属性我们基本都是在XML布局文件找那个就添加设置了。这当然是一个方法。但除此之外，还可以通过控件对应提供的方法来设置。如Edit控件，我们可以直接在XML布局中可以设置只读、数字、密码等属性。同样，我们也可以在Edit所提供的方法中发现提供了SetReadonly、SetNumberOnly、SetPasswordMord等方法。具体使用中根据时间情况的需要在XML中设置或者通过控件方法设置。

3）根据name获取控件

对于很多控件，最终可能不仅仅只是一个单纯的显示。很多时候还要和数据打交道。所以在具体处理时需要根据XMl文件中控件的属性name获取指定的控件进行相关操作。在代码中控件（以Button为例，其它控件获取方法类似）获取方式如下：

CButtonUI* m_pCloseBtn;        m_pCloseBtn = static_cast<CButtonUI*>(m_PaintManager.FindControl(_T("closeBtn")));

4）控件使用

不同的控件具体情况下，操作也不一样。如Edit控件可用于输入文本，数字等等。List控件可以显示不同列、不同行的数据。也就是说具体每个控件的方法不一样，对应的每个控件的方法，Duilib的Control中包含的就是各个不同的控件的行为方法了，使用时如果对于某些方法不熟悉，可以直接查看。

---

最后附上本节对应的代码：代码下载