Duilib中一些界面控件的常用属性解释

在现代软件开发中，使用 XML 定义用户界面的布局和控件的属性是一种常见的做法。通过 XML，开发者可以详细地配置界面元素的外观和行为，以满足复杂的设计需求。本文将通过具体的示例，深入解释在 DuiLib 等 UI 框架中使用 XML 的各种属性。

窗口 (Window)

示例:

<Window size="592,442" sizebox="0,0,0,0" caption="0,0,0,442" showshadow="true" shadowimage="bk_shadow.png" shadowsize="14" shadowcorner="14,14,14,14">
    ...
</Window>

属性解释:

• size: 窗口的宽度和高度，此处为 592x442 像素。
• sizebox: 窗口可调整大小的区域，这里设置为 "0,0,0,0"，表示窗口大小不可调。
• caption: 窗口标题栏的大小和位置，可以用于设置拖动区域大小。
• showshadow: 是否显示窗口阴影。
• shadowimage: 阴影效果使用的图片。
• shadowsize: 阴影的大小。
• shadowcorner: 阴影的圆角大小。

复选框 (CheckBox)

示例:

<CheckBox name="chkAgree" padding="28,30,0,0" width="96" height="20" text="同意QQ音乐的" textcolor="#FF333333" selected="true" valign="top" align="left" textpadding="22,0,0,0" normalimage="file='public/CheckBox/check_no.png'" selectedimage="file='public/CheckBox/check_yes.png'"/>

属性解释:

• name: 控件的名称，用于识别。
• padding: 控件内部的边距。
• width, height: 控件的宽度和高度。
• text: 显示的文本。
• textcolor: 文本颜色。
• selected: 是否默认选中。
• valign, align: 文本的垂直和水平对齐方式。
• textpadding: 文本的内部填充。
• normalimage, selectedimage: 未选中和选中状态下的图片。

滑动条 (Slider)

示例:

<Slider name="slrProgress" padding="28,0,0,0" height="10" width="539" mouse="false" foreimage="form\fg.png" bkimage="form\bg.png" thumbsize="0,0" value="50" bkcolor="#FF1ecc94"/>

属性解释:

• name: 滑动条的名称。
• padding: 边距。
• height, width: 滑动条的高度和宽度。
• mouse: 是否响应鼠标操作。
• foreimage, bkimage: 前景和背景图片。
• thumbsize: 滑块的大小。
• value: 当前值。
• bkcolor: 背景颜色。

文本编辑器控件：<RichEdit>

示例及属性解析:

<RichEdit name="editDir" text="" width="482" height="27" padding="28,0,0,0" textcolor="0xFF000000" inset="5,5,2,2" bkimage="public\edit\edit0.png" autohscroll="false" bordervisible="true" bordersize="1" bordercolor="#FFb6b6b6" wantreturn="false" wantctrlreturn="false" bkcolor="#FF00000" multiline="false" />

• name="editDir": 唯一标识符，用于代码中引用。
• text="": 初始无文本。
• width="482", height="27": 控件的尺寸。
• padding="28,0,0,0": 控件内部的边距。
• textcolor="0xFF000000": 文本颜色为黑色。
• inset="5,5,2,2": 控件内部的额外间距。
• bkimage="public\edit\edit0.png": 背景图像。
• autohscroll="false": 禁用水平滚动。
• bordervisible="true": 边框可见。
• bordersize="1": 边框厚度。
• bordercolor="#FFb6b6b6": 边框颜色为浅灰色。
• wantreturn="false": 回车不换行。
• wantctrlreturn="false": Ctrl+回车不换行。
• bkcolor="#FF00000": 背景颜色（颜色代码应为#FF000000）。
• multiline="false": 不支持多行文本。

 标签控件：<Label>

示例及属性解析:

<Label padding="28,0,0,0" font="5" width="64" textcolor="#FF333333" text="安装位置：" />

• padding="28,0,0,0": 文本内部的边距。
• font="5": 使用ID为5的字体设置。
• width="64": 控件宽度。
• textcolor="#FF333333": 文本颜色为深灰色。
• text="安装位置：": 显示的文本。

空间控件：<Control>

示例及属性解析:

<Control width="23" />

• width="23": 控件占据的宽度为23像素，通常用作布局中的间隔。

按钮控件：<Button>

示例及属性解析:

<Button name="btnClose" width="14" height="13" normalimage="file='close.png'" hotimage="file='close.png'" pushedimage="file='close.png'" />

• name="btnClose": 按钮的名称，用于事件处理。
• width="14", height="13": 按钮的尺寸。
• normalimage, hotimage, pushedimage: 分别设置按钮的常态、悬停和按下状态的图像。

 布局控件：<HorizontalLayout>, <TabLayout>

示例及属性解析:

<HorizontalLayout float="true" inset="0,5,5,0" pos="565,10,587,28" background="#FFfa0225" />
<TabLayout name="wizardTab" selectedid="0">
    <Include source="configpage.xml" />
    ...
</TabLayout>

• float="true": 浮动布局，允许自由定位。
• inset="0,5,5,0": 设置内部间距。
• pos="565,10,587,28": 指定布局的位置和大小。
• background="#FFfa0225": 背景颜色为鲜红色。
• name="wizardTab", selectedid="0": TabLayout的名称和默认选中的Tab ID。

通过以上详细解释，开发者可以更加深入地理解和运用 XML 在复杂用户界面设计中的多样化功能，从而创建出既美观又功能丰富的应用程序界面。