线性布局¶

线性布局是SOUI中继锚点布局之后支持的第二种布局方式,于SOUI 2.5.1.1版本开始引入。它可以让子控件在垂直或水平方向上线性排列。

概述¶

线性布局提供两种排列方式: - 垂直方向 (vbox) - 水平方向 (hbox)

通过在容器窗口上设置 layout="vbox" 或 layout="hbox" 来启用线性布局。

布局属性¶

容器属性¶

layout: 指定布局类型
vbox: 垂直方向布局
hbox: 水平方向布局
gravity: 指定子窗口的默认排列方式
vbox 可用值:
- left (默认)
- center
- right
hbox 可用值:
- top (默认)
- center
- bottom

子窗口属性¶

size: 指定窗口大小
-1: 包裹内容(wrap_content)
-2: 填充父窗口(match_parent)
layout_gravity: 覆盖容器的gravity设置
weight: 按比例分配剩余空间
extend: 设置外边距,格式:"left,top,right,bottom"
也可单独设置:extend_left,extend_top,extend_right,extend_bottom

代码示例¶

基础垂直布局:¶

<window layout="vbox" size="-1,-1" colorBkgnd="#cccccc" gravity="center">
  <text>基础垂直布局</text>
  <window size="100,30" colorBkgnd="#ff0000"/>
  <window size="200,30" extend="10,5,10,5" colorBkgnd="#ff0000"/>
  <window size="120,30" layout_gravity="right" colorBkgnd="#ff0000"/>
</window>

带weight的垂直布局:¶

<window layout="vbox" colorBkgnd="#cccccc">
  <text extend_bottom="10">带weight的垂直布局</text>
  <window size="100,30" colorBkgnd="#ff0000"/>
  <window size="200,30" extend="10,5,10,5" colorBkgnd="#ff0000" weight="1"/>
  <window size="120,30" layout_gravity="right" colorBkgnd="#ff0000" weight="1"/>
  <button size="100,30" extend_top="10">button test</button>
</window>

水平布局:¶

<window layout="vbox" colorBkgnd="#cccccc">
  <text extend_bottom="10" layout_gravity="center">水平布局示例</text>
  <window size="-1,-1" layout="hbox" colorBkgnd="#888888">
    <button size="100,30">button1</button>
    <button size="100,30" extend_left="10">button2</button>
    <button size="100,30" extend_left="10">button3</button>
    <button size="100,30" extend_left="10">button4</button>
  </window>
</window>

使用场景¶

线性布局适用于:

需要按行或列排列控件的场景
控件之间需要等间距排列的场景
需要按比例分配空间的场景
需要居中/居左/居右对齐的场景

最佳实践¶

选择合适的方向
垂直排列用vbox
水平排列用hbox
可以嵌套使用
合理使用size
-1用于内容自适应
-2用于填充父容器
具体数值用于固定大小
灵活运用gravity
容器级别用gravity
单个控件用layout_gravity
善用weight和extend
weight实现按比例分配
extend设置间距,美化布局