DuiLib 四 . XML布局

外部应该使用一个垂直布局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 个参数顺序分别是 左、上、右、下

相关推荐
搞全栈小苏17 小时前
基于Qt QML和C++的MQTT测试客户端(CMakeLists实现)
xml·c++·qt
fatiaozhang95271 天前
中国移动云电脑一体机-创维LB2004_瑞芯微RK3566_2G+32G_开启ADB ROOT安卓固件-方法3
android·xml·adb·电脑·电视盒子·刷机固件
l1t3 天前
轻量级XML读写库Mini-XML的编译和使用
xml·c语言·解析器
微笑伴你而行3 天前
标注格式转换csv转xml
xml
fatiaozhang95273 天前
中国移动中兴云电脑W132D-RK3528-2+32G-刷机固件包(非原机制作)
android·xml·电脑·电视盒子·刷机固件·机顶盒刷机
Ray Song3 天前
【FastDDS】XML profiles
xml·中间件·自动驾驶·dds·fastdds
l1t3 天前
我改写的二分法XML转CSV文件程序速度追上了张泽鹏先生的
xml·c语言·人工智能·算法·expat
困到晕阙4 天前
[NCTF2019]Fake XML cookbook
xml·xxe
ruleslol4 天前
五分钟XML速成
xml
令狐少侠20115 天前
maven settings.xml文件的各个模块、含义以及它们之间的联系
xml·maven