duilib开发（五）：界面布局

最新推荐文章于 2024-08-08 07:38:00 发布

光头小杨

最新推荐文章于 2024-08-08 07:38:00 发布

阅读量1.5k

点赞数 1

分类专栏： duilib 文章标签： duilib

本文链接：https://blog.csdn.net/yp18792574062/article/details/109630587

版权

duilib 专栏收录该内容

15 篇文章 23 订阅

订阅专栏

代码仓库：https://github.com/yangpan4485/duilib/tree/develop/MyDemo

一、duilib 的几种界面布局

duilib 有着 6 大布局，分别是 Container、VerticalLayout、HorizaontalLayout、TileLayout、TabLayout、ChildLayout，在之前我们使用了 VerticalLayout 和 HorizaontalLayout 两种布局，这篇文章也只会介绍这两种布局，不会介绍其它的布局方式

从字面意思来看，VerticalLayout 是纵向布局，HorizaontalLayout 是横向布局，他们都是继承 Container 布局的，接下来我们通过几个例子来观察一下界面布局

1、新建窗口，使用 HorizaontalLayout横向布局，并且在窗口上新建几个 Button，为了更加直观，这里给每一个 Button 都加上北京颜色

<?xml version="1.0" encoding="UTF-8"?>
<Window size="960,540" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
  <HorizontalLayout bkcolor="#FFDFFDF0" width="300" height="318">  <!-- 整个窗口使用 HorizontalLayout 布局 -->
    <Button name="btnHello" text="Hello World1" bkcolor="#FFAFFFAF"/>
    <Button name="btnHello1" text="Hello World2" bkcolor="#AFDFFDF0"/>
    <Button name="btnHello2" text="Hello World3" bkcolor="#77DFFDF0"/>
    <Button name="btnHello3" text="Hello World4" bkcolor="#FFD55DF0"/>
  </HorizontalLayout>
</Window>

运行结果如下所示

2、更改布局方式为 VerticalLayout 为纵向布局，运行结果

3、通过对比，就可以很好理解这两种布局方式了，接下来我们将整个客户区使用 VerticalLayout 布局，然后前两个 Button 使用 VerticalLayout 布局，后面两个 Button 使用 HorizaontalLayout 布局，运行结果

可以看到，这样会把整个布局平均分割成两个部分，一部分使用 VerticalLayout 布局，一部分使用 HorizaontalLayout 布局

4、接下来我们把自定义的标题栏加上，前面我们已经了解了 VerticalLayout 布局和 HorizaontalLayout 两种布局的区别，那么毫无疑问的是，标题栏应该使用的是 HorizaontalLayout 布局，加上标题栏，我们看一看效果

发现我们的标题栏非常的大，因为我们这里没有指定 height 属性，接下来指定 height 的大小再试一试

这个时候标题栏正常了，我们再加上按钮试一下，xml文件内容如下

<?xml version="1.0" encoding="UTF-8"?>
<Window size="960,540" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
  <VerticalLayout bkcolor="#FFDFFDF0" width="300" height="318">  <!-- 整个窗口使用 VerticalLayout 布局 -->
    <HorizontalLayout height="32" bkcolor="#FFE6E6DC">
      <Button name="minbtn"   tooltip="最小化" float="true" pos="0,0,22,24"  width="23" normalimage=" file='sysbtn/btn_mini_normal.png' " hotimage=" file='sysbtn/btn_mini_highlight.png' " pushedimage=" file='sysbtn/btn_mini_down.png' "/>
      <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,0,44,24" width="23" normalimage=" file='sysbtn/btn_max_normal.png' " hotimage=" file='sysbtn/btn_max_highlight.png' " pushedimage=" file='sysbtn/btn_max_down.png' " />
      <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,0,44,24" width="23" normalimage=" file='sysbtn/btn_restore_normal.png' " hotimage=" file='sysbtn/btn_restore_highlight.png' " pushedimage=" file='sysbtn/btn_restore_down.png' " />
      <Button name="closebtn" tooltip="关闭"   float="true" pos="44,0,74,24" width="50" normalimage=" file='sysbtn/btn_close_normal.png' " hotimage=" file='sysbtn/btn_close_highlight.png' " pushedimage=" file='sysbtn/btn_close_down.png' "/>
    </HorizontalLayout>
    <VerticalLayout>
      <Button name="btnHello" text="Hello World1" bkcolor="#FFAFFFAF"/>
      <Button name="btnHello1" text="Hello World2" bkcolor="#AFDFFDF0"/>
    </VerticalLayout>
    <HorizontalLayout>
      <Button name="btnHello2" text="Hello World3" bkcolor="#77DFFDF0"/>
      <Button name="btnHello3" text="Hello World4" bkcolor="#FFD55DF0"/>
    </HorizontalLayout>
  </VerticalLayout>
</Window>

运行一下，结果如下所示

这里的关闭按钮变的比较大，因为这里 width 给的比较大，因此可以得出一个结论是，当指定了 width 和 height 的时候，前面 pos 设置的值就不起作用了，但是这里还有个问题就是按钮的位置不对，按钮应该在右边，所以这里我们加上占位符

<HorizontalLayout /> 一般是指定height属性，也就是说占的位置是从上往下算的。因为水平方向的位置都会占据。

<VerticalLayout /> 一般是指定width属性，也就是说占的位置是从左往右算的。因为垂直方向的位置都会占据。

这里也就是说，我们要把标题栏分成两个部分，前半部分是占位符，后面是我们能的按钮，我们将 xml 代码改成下面的内容试一下

<?xml version="1.0" encoding="UTF-8"?>
<Window size="960,540" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
  <VerticalLayout bkcolor="#FFDFFDF0" width="300" height="318">  <!-- 整个窗口使用 VerticalLayout 布局 -->
    <HorizontalLayout height="32" bkcolor="#FFE6E6DC">
      <HorizontalLayout />
      <HorizontalLayout>
        <Button name="minbtn"   tooltip="最小化" float="true" pos="0,0,22,24"  width="23" normalimage=" file='sysbtn/btn_mini_normal.png' " hotimage=" file='sysbtn/btn_mini_highlight.png' " pushedimage=" file='sysbtn/btn_mini_down.png' "/>
        <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,0,44,24" width="23" normalimage=" file='sysbtn/btn_max_normal.png' " hotimage=" file='sysbtn/btn_max_highlight.png' " pushedimage=" file='sysbtn/btn_max_down.png' " />
        <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,0,44,24" width="23" normalimage=" file='sysbtn/btn_restore_normal.png' " hotimage=" file='sysbtn/btn_restore_highlight.png' " pushedimage=" file='sysbtn/btn_restore_down.png' " />
        <Button name="closebtn" tooltip="关闭"   float="true" pos="44,0,74,24" width="28" normalimage=" file='sysbtn/btn_close_normal.png' " hotimage=" file='sysbtn/btn_close_highlight.png' " pushedimage=" file='sysbtn/btn_close_down.png' "/>
      </HorizontalLayout>
    </HorizontalLayout>
    <VerticalLayout>
      <Button name="btnHello" text="Hello World1" bkcolor="#FFAFFFAF"/>
      <Button name="btnHello1" text="Hello World2" bkcolor="#AFDFFDF0"/>
    </VerticalLayout>
    <HorizontalLayout>
      <Button name="btnHello2" text="Hello World3" bkcolor="#77DFFDF0"/>
      <Button name="btnHello3" text="Hello World4" bkcolor="#FFD55DF0"/>
    </HorizontalLayout>
  </VerticalLayout>
</Window>

运行结果如下所示

我们发现还是没有在最右边，这个时候指定右半部分的宽度试一下，这里图标就恢复正常了，具体内容如下

<?xml version="1.0" encoding="UTF-8"?>
<Window size="960,540" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
  <VerticalLayout bkcolor="#FFDFFDF0" width="300" height="318">  <!-- 整个窗口使用 VerticalLayout 布局 -->
    <HorizontalLayout height="32" bkcolor="#FFE6E6DC">
      <HorizontalLayout />
      <HorizontalLayout width="74">
        <Button name="minbtn"   tooltip="最小化" float="true" pos="0,0,22,24"  width="23" normalimage=" file='sysbtn/btn_mini_normal.png' " hotimage=" file='sysbtn/btn_mini_highlight.png' " pushedimage=" file='sysbtn/btn_mini_down.png' "/>
        <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,0,44,24" width="23" normalimage=" file='sysbtn/btn_max_normal.png' " hotimage=" file='sysbtn/btn_max_highlight.png' " pushedimage=" file='sysbtn/btn_max_down.png' " />
        <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,0,44,24" width="23" normalimage=" file='sysbtn/btn_restore_normal.png' " hotimage=" file='sysbtn/btn_restore_highlight.png' " pushedimage=" file='sysbtn/btn_restore_down.png' " />
        <Button name="closebtn" tooltip="关闭"   float="true" pos="44,0,74,24" width="28" normalimage=" file='sysbtn/btn_close_normal.png' " hotimage=" file='sysbtn/btn_close_highlight.png' " pushedimage=" file='sysbtn/btn_close_down.png' "/>
      </HorizontalLayout>
    </HorizontalLayout>
    <VerticalLayout>
      <Button name="btnHello" text="Hello World1" bkcolor="#FFAFFFAF"/>
      <Button name="btnHello1" text="Hello World2" bkcolor="#AFDFFDF0"/>
    </VerticalLayout>
    <HorizontalLayout>
      <Button name="btnHello2" text="Hello World3" bkcolor="#77DFFDF0"/>
      <Button name="btnHello3" text="Hello World4" bkcolor="#FFD55DF0"/>
    </HorizontalLayout>
  </VerticalLayout>
</Window>