HT UI 表格布局手册

索引

概述
表单例子
布局例子

概述

表格布局器(TableLayout) 是所有布局器中相对比较复杂的布局器，功能也很强大；它将自身区域按照行列划分为一个一个的单元格(类似于表格)，每个子组件最少占据一个单元格，宽度或高度可以跨多个单元格；使用表格布局器时需要规划好布局器有几行几列，通常需要先设置列的宽度：

// 规划为三个列
var tableLayout = new ht.ui.TableLayout();
// 第一列宽度 100，权重值 0.1
tableLayout.setColumnPreferredWidth(0, 100);
tableLayout.setColumnWeight(0, 0.1);
// 第二列宽度 50, 权重值 0.2
tableLayout.setColumnPreferredWidth(1, 100);
tableLayout.setColumnWeight(1, 0.2);
// 第三列宽度 200，权重值 0.1
tableLayout.setColumnPreferredWidth(2, 200);
tableLayout.setColumnWeight(2, 0.1);

设置 columnPreferredWidth 不是必须的，如果没有设置，columnPreferredWidth 会根据当前列中所有子组件进行计算；但是在某些情况下(比如第一列中所有子组件都跨列了)是无法自动计算的，因此建议开发者提前规划并设置 columnPreferredWidth，这样做的另一个好处是可以明确的告诉其他开发者此布局器的列结构

columnWeight 表示权重值，默认为 0.1；以上面的代码为例，三个列的宽度之和是 100 + 100 + 200 = 400，当布局器总宽度为 800 时，多余的 400 按照权重值进行划分：

第一列的最终宽度为 100 + 400 * 0.1 / (0.1 + 0.2 + 0.1) = 200
第二列的最终宽度为 100 + 400 * 0.2 / (0.1 + 0.2 + 0.1) = 300
第三列的最终宽度为 200 + 400 * 0.1 / (0.1 + 0.2 + 0.1) = 300

当容器宽度小于列宽度之和时，布局器会显示滚动条以允许用户拖拽滚动条显示全部子组件

如果希望某列的宽度固定，将此列 columnWeight 设为 0 即可

接下来为布局器添加行：

// 第一行，包含三个按钮，每个按钮占据一个单元格
var tableRow0 = new ht.ui.TableRow();
tableRow0.addView(button0);
tableRow0.addView(button1);
// 第二个参数可控制宽度、高度、对齐等属性，请参考 TableLayout 的 API 文档
tableRow0.addView(button2, {
    align: 'center', // 按钮在单元格中水平居中对齐
    width: 'wrap_content', // 使用首选宽度作为最终显示宽度
    height: 'match_parent' // 高度填满单元格
});
// tableLayout 的 addView 函数只支持一个参数，即 `TableRow` 对象
tableLayout.addView(tableRow0);

// 第二行，包含两个按钮
var tableRow1 = new ht.ui.TableRow();
tableRow1.addView(button0);
// 第二个按钮占据两个单元格
tableRow1.addView(button1, {
    colspan: 2
});
tableLayout.addView(tableRow1);

一个 TableRow 实例管理着布局器中的一行子组件，它是一个容器，并不是 ht.ui.View 的子类(也就是说不是组件)，而是类似于拓扑组件的 DataModel

TableRow 的高度一般通过 TableRow#setPreferredHeight(value) 设置，如果没有设置，则取本行所有子组件的首选高度的最大值；和 columnPreferredHeight 一样，如果某行中的所有子组件都跨行了，这种情况下是无法自动计算的，需要通过 API 手动设置 preferredHeight

和列类似，TableRow 提供 weight 属性控制权重值(默认为 0.1)，如果希望行高固定，而不参与分配布局器中多余的高度，请将行权重设为 0：

tableRow.setWeight(0);

表单例子

表格布局器常用来做表单：

这个例子中规划了两个列，文字说明占据左侧的列，文本框组件占据右侧里的列；最后一行中嵌套了一个 HBoxLayout 跨两列，里面两个按钮水平居中对齐：

// 跨两列
tableRow2.addView(hBox, {
    colspan: 2
});

布局例子

这个例子中将布局器规划为两行两列，第一行中只有一个菜单组件并且跨两列；第二行中第一列是拓扑组件，第二个是属性页组件：

        tableRow0 = new ht.ui.TableRow();
        tableRow0.setPreferredHeight(26);
        tableRow0.setWeight(0);
        tableRow0.addView(menu, {
            colspan: 2
        });
        tableLayout.addView(tableRow0);

        tableRow1 = new ht.ui.TableRow();
        tableRow1.addView(new ht.ui.HTView(graphView));
        tableRow1.addView(propertyView);
        tableLayout.addView(tableRow1);

欢迎交流 service@hightopo.com