2021 Duilib最新入門教程（六）Duilib界面設計

目錄

• 前言
• 控件
• 容器
• 總結

前言

  在前面有提到：用Duilib寫一個界面軟件，只需要用一個xml文件描述界面長什么樣，然后在代碼中寫上操作界面之后怎么處理就可以了。
  “描述界面長什么樣”其實就是描述：1、這個界面上有哪些控件？2、這些控件是怎么布局的？這一篇先介紹Duilib自帶的標准控件有哪些？然后再介紹這些控件是怎么布局的？
  

控件

  控件指最基本的單元模塊，比如：按鈕、文本、編輯框等等。
Duilib控件之間的繼承關系如下：

  
舉個例子
  界面上顯示一個按鈕 按鈕名字為"btn" 按鈕文本為"按鈕"

界面XML文件：<Button name="btn" text="按鈕" />
<表示開始
Button表示這個控件是一個按鈕
name是一種屬性，表示這個控件的名字，"btn"是這個屬性的值
text也是一種屬性，表示這個控件的文本，"按鈕"是這個屬性的值
/>表示結束

  
  所以界面要顯示一個控件，只需要在XML文件上寫：<控件類型 屬性類型="屬性值" ... />
  具體有哪些控件類型，控件對應的屬性類型和屬性值，都可以在屬性列表.xml查看
  

容器

  容器指可以容納多個控件的模塊，並且容器決定這些控件是怎么布局的。
Duilib容器之間的繼承關系如下：

  
舉個例子
  界面的右上角一般有三個從左到右水平排放的按鈕：最小、最大、關閉
對應的界面文件XML文件：

<HorizontalLayout>
      <Button name="min" text="最小" />
      <Button name="max" text="最大" />
      <Button name="close" text="關閉" />
</HorizontalLayout>

  

總結

  Duilib想要設計界面長什么樣，只需要在xml文件上指定使用什么控件和容器就可以了。
  
Duilib技術交流群：799142530
源碼地址：https://github.com/KongKong20/DuilibTutor