跳转至

流式布局

流式布局是SOUI中的一种灵活布局方式，支持水平和垂直两种流式排列方式，当元素排列达到容器边界时会自动换行或换列。

概述

流式布局提供两种排列方式： - 水平流式布局 (hflow)：元素从左到右排列，当达到容器宽度时换行到下一行 - 垂直流式布局 (vflow)：元素从上到下排列，当达到容器高度时换到下一列

通过在容器窗口上设置 layout="hflow" 或 layout="vflow" 来启用流式布局。

布局属性

容器属性

  • layout: 指定布局类型
  • hflow: 水平流式布局
  • vflow: 垂直流式布局

  • flowLayout: 流式布局基类，需要手动指定方向

  • orientation: 指定布局方向（仅flowLayout需要）

  • horizontal: 水平方向，从左到右排列，超宽时换行

  • vertical: 垂直方向，从上到下排列，超高时换列

  • gravity: 指定子窗口的默认对齐方式

  • 水平流式布局可用值：
    • top (默认)
    • center
    • bottom

  • 垂直流式布局可用值：

    • left (默认)
    • center
    • right

  • xInterval: 水平间距

  • yInterval: 垂直间距
  • interval: 间距（水平和垂直相同）

子窗口属性

  • size: 指定窗口大小
  • -1: 包裹内容(wrap_content)

  • -2: 填充父窗口(match_parent)

  • layout_gravity: 覆盖容器的gravity设置

  • extend: 设置外边距,格式:"left,top,right,bottom"

  • 也可单独设置:extend_left,extend_top,extend_right,extend_bottom

代码示例

水平流式布局:

<window layout="hflow" size="300,-1" colorBkgnd="#cccccc" gravity="center" interval="10">
  <text>水平流式布局示例</text>
  <window size="80,80" colorBkgnd="#ff0000"/>
  <window size="80,80" colorBkgnd="#00ff00"/>
  <window size="80,80" colorBkgnd="#0000ff"/>
  <window size="80,80" colorBkgnd="#ffff00"/>
  <window size="80,80" colorBkgnd="#ff00ff"/>
  <window size="80,80" colorBkgnd="#00ffff"/>
</window>

垂直流式布局:

<window layout="vflow" size="-1,300" colorBkgnd="#cccccc" gravity="center" interval="10">
  <text>垂直流式布局示例</text>
  <window size="80,80" colorBkgnd="#ff0000"/>
  <window size="80,80" colorBkgnd="#00ff00"/>
  <window size="80,80" colorBkgnd="#0000ff"/>
  <window size="80,80" colorBkgnd="#ffff00"/>
  <window size="80,80" colorBkgnd="#ff00ff"/>
  <window size="80,80" colorBkgnd="#00ffff"/>
</window>

自定义间距的流式布局:

<window layout="hflow" size="300,-1" colorBkgnd="#cccccc" xInterval="15" yInterval="10">
  <text>自定义间距的流式布局</text>
  <window size="80,80" colorBkgnd="#ff0000"/>
  <window size="80,80" colorBkgnd="#00ff00"/>
  <window size="80,80" colorBkgnd="#0000ff"/>
  <window size="80,80" colorBkgnd="#ffff00"/>
</window>

使用场景

流式布局适用于：

  1. 不确定元素数量的场景
  2. 元素大小相似且需要自动排列的场景
  3. 响应式布局，需要根据容器大小自动调整排列的场景
  4. 图片画廊、标签云等需要灵活排列的场景

最佳实践

  1. 选择合适的流式方向
  2. 水平排列用hflow

  3. 垂直排列用vflow

  4. 合理设置间距

  5. 使用interval设置统一间距

  6. 使用xInterval和yInterval设置不同的水平和垂直间距

  7. 灵活运用gravity

  8. 控制元素在容器中的对齐方式

  9. 可以通过layout_gravity为单个元素设置不同的对齐方式

  10. 注意容器大小

  11. 流式布局需要容器有明确的宽度（水平流式）或高度（垂直流式）
  12. 可以使用match_parent或具体数值