Skip to content

线性布局

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

线性布局是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>

使用场景

线性布局适用于:

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

最佳实践

  1. 选择合适的方向
  2. 垂直排列用vbox
  3. 水平排列用hbox

  4. 可以嵌套使用

  5. 合理使用size

  6. -1用于内容自适应
  7. -2用于填充父容器

  8. 具体数值用于固定大小

  9. 灵活运用gravity

  10. 容器级别用gravity

  11. 单个控件用layout_gravity

  12. 善用weight和extend

  13. weight实现按比例分配
  14. extend设置间距,美化布局