外部应该使用一个垂直布局VerticalLayout
而标题栏里面是从左到右的一个水平布局 HorizontalLayout
可以通过 height 属性指定 HorizontalLayout 的高度。
<?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 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 个参数顺序分别是 左、上、右、下
