配置网格布局

要配置网格布局,请添加一个网格布局对象及其子对象,然后更改网格布局的属性。
您可以定义网格布局的列和行。如果仅定义列,
FactoryTalk Optix Studio
会自动定义行。如果仅定义行,
FactoryTalk Optix Studio
会自动定义列。
按以下单位指定宽度:
像素
绝对单位(像素)。例如,
100
框架
根据剩余空间计算的比例单位。例如,
2fr
的宽度是
1fr
的两倍
小贴士: 如果使用框架,则意味着未被固定宽度的列占用的空间将按框架总数进行拆分。例如:“100;2fr;1fr”表示第一列占用 100 个像素,第二列占用剩余空间的 2/3,第三列占用剩余空间的 1/3。如果拉伸网格布局,则第一列的宽度保持为 100 个像素,而第二列和第三列会增大或缩小以保持比例。
自动
动态单位。使用
auto
关键字根据列的内容确定列宽。
示例:网格布局列的宽度
网格布局列的宽度说明
标注
单位
说明
1
像素
100
固定宽度为 100 个像素
2
框架
2fr
剩余空间的 2/3
3
框架
1fr
剩余空间的 1/3
  1. 配置网格布局
  2. 项目视图
    中,右键单击要包含网格布局对象的节点,然后选择
    新建
    容器
    网格布局
  3. (可选)将光标悬停在网格布局上,选择
    Edit
    ,然后输入对象的自定义名称。
  4. 在网格布局下添加或移动子图形对象。
    有关如何移动图形对象的更多信息,请参见移动节点
    例如,在网格布局下添加按钮以创建按钮网格。请参见按钮
  5. 项目视图
    中,选择网格布局并配置网格列:
    1. 属性
      中,将光标悬停在
      值上,然后选择
      Edit
    2. 在编辑器中,选择
      Add
      以添加网格列。
    3. 通过输入值或创建动态链接来指定各列的宽度。
    示例:包含三列的网格布局
  6. 配置网格行:
    1. 属性
      中,将光标悬停在
      值上,然后选择
      Edit
    2. 在编辑器中,选择
      Add
      以添加网格行。
    3. 通过输入值或创建动态链接来指定各行的宽度。
    示例:包含三列和两行的网格布局
  7. 属性
    中,设置如何显示子图形对象:
    • 水平间隙
      。网格布局的子对象之间的水平间距。
      具有水平间隙的网格布局
    • 垂直间隙
      。网格布局的各行换行子对象之间的垂直间距。
      具有垂直间隙的网格布局
    • 条目水平对齐
      。水平对齐网格单元格中的子对象。
      子对象水平居中的网格布局
    • 条目垂直对齐
      。垂直对齐网格单元格中的子对象。
      子对象垂直居中的网格布局
提供反馈
对本文档有问题或反馈吗? 请在这里提交您的反馈