Duilib学习笔记《02》—界面布局

最新推荐文章于 2023-06-21 15:40:57 发布

7-sevens

最新推荐文章于 2023-06-21 15:40:57 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：界面库 Duilib学习笔记文章标签： duilib 界面库布局

本文链接：https://blog.youkuaiyun.com/developer1024/article/details/51526330

本文是关于Duilib的学习笔记，主要探讨了如何使用界面描述XML文件创建简单空白窗体界面，并详细讲解了标题栏的创建过程，同时提到了UI设计工具UIDesigner的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面描述XML文件

Duilib主要是通过XML来进行界面的布局配置，程序通过读取并解析XML文件来创建对应的窗体。DuiLib的页面布局分为三类：窗体（Window）、容器（Contain）和控件（Control）。顾名思义窗体就是要创建的窗口，容器则相当于是窗体内的一个子窗体，可以在容器内添加容器或者控件，当然定义的位置也都是相对与容器内的左上顶点；控件就是一些常用的Button、Edit、Label等窗体上的基本元素。

容器经常使用的有VerticalLayout（垂直布局容器）、HorizontalLayout（水平布局容器）、TabLayout（页标签布局容器）、RichEdit（富文本框）、Combo（下拉文本框）、List（列表）

控件经常使用的有Label（标签）、Button（按钮）、Option（选择框）、Edit（文本框）、ScrollBar（滚动条）等等。

首先根节点必须是Window，这个表示窗体，然后在跟节点内可以添加内容。各节点可以添加属性，属性包含名字、位置、大小、背景色、前景色、背景图片、显示文本、鼠标悬浮提示等等。（注：在duilib中有一份"属性列表.xml"的文件，详细罗列了每个空间对应的属性，方便使用时查阅）

简单空白窗体界面

此处以创建一个简单的空白的灰色背景窗体为例。对应的XML布局文件对应的也就很简单。如下：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" roundcorner="4,4"> 
    <VerticalLayout bkcolor="#AAA0AAA0"> 
    </VerticalLayout>
</Window>

根据字面意思可以很容易看出XML文件所表示的窗体属性，窗体大小（size）为640X480，窗口圆角大小（roundcorner）为(3,3)等等。

接下来，创建DuilibDemo程序来读取解析该XML文件创建对应的窗体（注：对应的具体实现代码暂不作具体解释，在笔记最后会给出配对的代码方便下载查阅。本节主要是针对XML窗体布局部分，具体代码如何显示后续会具体单独详解），效果如下：