DuiLib 四 . XML布局

Jon_00012024-08-12 18:51

外部应该使用一个垂直布局VerticalLayout
而标题栏里面是从左到右的一个水平布局 HorizontalLayout
可以通过 height 属性指定 HorizontalLayout 的高度。

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<Window size="640,480" caption="0,0,0,35">
  <VerticalLayout>
    <!--标题栏-->
    <HorizontalLayout height="35" bkcolor="#FFD6DBE9">
      <Control bkimage="logo.png" height="32" width="32" />
      <Label text="duilib tutorial" />
    </HorizontalLayout>
    <!--窗口内容区域-->
    <HorizontalLayout bkcolor="#FF4D6082">
      
    </HorizontalLayout>
  </VerticalLayout>
</Window>

用 bkcolor 属性指定了标题栏的背景色,

2、内外边距
标题栏高度是 35，而 logo 的高度是 32，我们让 logo 图像的上方和左侧分别向下和向右移动 7~9 像素，这样 logo就可以居中显示了。通过 padding 属性可以指定容器的外边距，这里要注意，不像 Web 前端一样使用的是 margin，刚切换过来的朋友可能容易出错，所以要尤其注意。我们通过指定 padding="8,8,0,0" 的方式，指定了 logo文件左边和上边分别有 4 个像素的边距，代码如下：

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<Window size="640,480" caption="0,0,0,35">
  <VerticalLayout>
    <!--标题栏-->
    <HorizontalLayout height="35" bkcolor="#FFD6DBE9">
      <Control bkimage="logo.png" height="32" width="32" padding="4,4,0,0"/>
      <Label text="duilib tutorial" />
    </HorizontalLayout>
    <!--窗口内容区域-->
    <HorizontalLayout bkcolor="#FF4D6082">
      
    </HorizontalLayout>
  </VerticalLayout>
</Window>

padding 的 4 个参数顺序分别是左、上、右、下