网格布局¶

Warning

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

You can read it through google translate.

网格布局(GridLayout)是SOUI中的第三种布局方式,它可以将控件排列在一个网格中,支持行列合并等高级特性。

概述¶

网格布局通过在容器窗口上设置 layout="gridLayout" 来启用,它具有以下特点:

支持行列固定的网格布局
支持行列权重分配
支持单元格合并
支持子窗口自适应和填充

布局属性¶

容器属性¶

layout="gridLayout": 指定使用网格布局
columnCount: 指定列数
rowCount: 指定行数
xInterval: 列间距
yInterval: 行间距
xGravity: 水平方向对齐方式
- left
- center
- right
- fill
yGravity: 垂直方向对齐方式
- top
- center
- bottom
- fill

子窗口属性¶

columnSpan: 跨列数
rowSpan: 跨行数
columnWeight: 列权重
rowWeight: 行权重
layout_xGravity: 单元格内水平对齐
layout_yGravity: 单元格内垂直对齐

代码示例¶

计算器布局示例:¶

<window layout="gridLayout" 
        columnCount="4" 
        rowCount="6" 
        xInterval="5" 
        yInterval="5" 
        xGravity="fill" 
        yGravity="fill">
  <!-- 显示区域跨4列 -->
  <edit size="0,0" 
        columnSpan="4"
        rowWeight="2"/>

  <!-- 普通按钮 -->        
  <button size="0,0" 
          text="清除"
          columnWeight="1" 
          rowWeight="1"/>

  <!-- 跨2列的0按钮 -->
  <button size="0,0"
          text="0" 
          columnSpan="2"
          columnWeight="2" 
          rowWeight="1"/>

  <!-- 跨2行的=按钮 -->
  <button size="0,0"
          text="=" 
          rowSpan="2"
          columnWeight="1"
          rowWeight="2"/>
</window>

表单布局示例:¶

<window layout="gridLayout" 
        columnCount="2"
        xInterval="5" 
        yInterval="5"
        xGravity="right">
  <text size="-1,-1">所在地:</text>
  <edit size="200,50" layout_xGravity="fill">广东 广州</edit>

  <text size="-1,-1">邮箱:</text>
  <edit size="200,-1" layout_xGravity="fill">xx@qq.com</edit>

  <text size="-1,-1">兴趣:</text>
  <edit size="200,-1" layout_xGravity="fill">看电影</edit>
</window>

使用场景¶

网格布局适用于:

需要规则网格排列的界面
计算器
键盘
日历
需要对齐的表单布局
登录界面
设置界面
数据录入界面
需要行列合并的复杂布局
报表
仪表盘
复杂表单

最佳实践¶

网格结构规划
预先规划行列数
合理安排跨行跨列
注意对齐要求
大小控制
固定尺寸用具体数值
自适应尺寸用-1
填充尺寸用weight
间距与对齐
使用xInterval/yInterval统一间距
使用gravity控制整体对齐
使用layout_gravity微调单个控件
权重使用
columnWeight和rowWeight搭配使用
权重值合理分配
注意权重和跨格的关系