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 个参数顺序分别是 左、上、右、下

相关推荐
l1t3 天前
利用美团龙猫用libxml2编写XML转CSV文件C程序
xml·c语言·libxml2·解析器
Luna-player6 天前
某个工程 pom.xml
xml
l1t7 天前
对expat库XML_Parse函数调用优化的测试
xml·c语言·解析器·expat
l1t7 天前
利用美团龙猫添加xlsx的sheet.xml读取sharedStrings.xml中共享字符串输出到csv功能
xml·c语言·数据结构·人工智能·算法·解析器
叶 落7 天前
[Maven 基础课程]pom.xml
xml·pom.xml 常见配置项·maven 的 pom.xml
北城以北88887 天前
Java高级编程--XML
xml·java·开发语言·intellij-idea
l1t7 天前
DeepSeek辅助编写的利用quick_xml把xml转为csv的rust程序
xml·开发语言·人工智能·rust·解析器·quick-xml
l1t7 天前
how to build tbox xml into the demo
xml·linux·c语言·parser·tbox
搞全栈小苏7 天前
基于Qt QML和C++的MQTT测试客户端(CMakeLists实现)
xml·c++·qt
fatiaozhang95278 天前
中国移动云电脑一体机-创维LB2004_瑞芯微RK3566_2G+32G_开启ADB ROOT安卓固件-方法3
android·xml·adb·电脑·电视盒子·刷机固件