mirror of
https://gitee.com/zlgopen/awtk.git
synced 2024-11-30 11:08:34 +08:00
123 lines
2.6 KiB
Markdown
123 lines
2.6 KiB
Markdown
# 缺省的控件自身布局器 (self\_layouter\_default) 介绍
|
||
|
||
## 概述
|
||
|
||
缺省布局中有 5 个参数：
|
||
|
||
* x x 坐标
|
||
* y y 坐标
|
||
* w 控件宽度
|
||
* h 控件高度
|
||
* floating 是否为浮动布局。 如果设置为 true，该控件不受父控件的 children\_layouter 的影响。
|
||
|
||
## 二、像素方式
|
||
|
||
直接指定控件的 x/y/w/h 的像素值，这是缺省的方式，也是最缺乏灵活性的方式。
|
||
|
||
示例：
|
||
|
||
* 在 XML 界面描述文件中：
|
||
|
||
```
|
||
<button x="10" y="5" w="80" h="30" text="ok"/>
|
||
```
|
||
* 在代码中：
|
||
|
||
```
|
||
widget_move_resize(btn, 10, 5, 80, 30);
|
||
```
|
||
|
||
## 三、百分比
|
||
|
||
* x/w 的值如果包含"%"，则自动换算成相对其父控件宽度的百分比。
|
||
* y/h 的值如果包含"%"，则自动换算成相对其父控件高度的百分比。
|
||
|
||
示例：
|
||
|
||
* 在 XML 界面描述文件中：
|
||
|
||
```
|
||
<button x="10%" y="10" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
* 在代码中（看起来要麻烦一点）：
|
||
|
||
```
|
||
widget_set_self_layout_params(btn, "10%", "10", "50%", "30");
|
||
widget_layout(btn);
|
||
```
|
||
> 在代码中设置控件的布局参数，方法类似，后面就不再举例子了。
|
||
|
||
## 四、水平居中
|
||
|
||
让控件在水平方向上居中，只需要将 x 的值设置成"c"或者"center"即可。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="center" y="10" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
## 五、垂直居中
|
||
|
||
让控件在垂直方向上居中，只需要将 y 的值设置成"m"或者"middle"即可。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="center" y="middle" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
## 六、位于右边
|
||
|
||
让控件位于父控件的右侧，只需要将 x 的值设置成"r"或者"right"即可。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="right" y="10" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
如果还想离右侧有一定距离，可以在 right 后指定距离的像素。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="right:20" y="10" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
## 七、位于底部
|
||
|
||
让控件位于父控件的底部，只需要将 y 的值设置成"b"或者"bottom"即可。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="10" y="bottom" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
如果还想离底部有一定距离，可以在 bottom 后指定距离的像素。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="10" y="bottom:20" w="50%" h="30" text="ok"/>
|
||
```
|
||
|
||
## 八、宽度和高度为负数
|
||
|
||
无论是像素模式还是百分比模式，宽度和高度均可为负数。
|
||
|
||
* 宽度为负数。其值为父控件的宽度+该负值。
|
||
* 高度为负数。其值为父控件的高度+该负值。
|
||
|
||
## 九、浮动布局
|
||
|
||
如果 floating 设置为 true，该控件不受父控件的 children\_layouter 的影响。
|
||
|
||
示例：
|
||
|
||
```
|
||
<button x="10" y="20" w="50" h="30" floating="true" "text="ok"/>
|
||
```
|