共计 3239 个字符，预计需要花费 9 分钟才能阅读完成。
作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家
TableLayout 应用表格的形式划分子组件。
一、反对的 XML 属性
TableLayout 的共有 XML 属性继承自：Component
| 属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
|---|---|---|---|---|
| id | 控件 identity，用以辨认不同控件对象，每个控件惟一 | integer 类型 | 仅可用于配置控件的 id。 | ohos:id=”$+id:component_id” |
| theme | 款式 | 援用 | 仅可援用 pattern 资源。 | ohos:theme=”$pattern:button_pattern” |
| width | 宽度，必填项 | float 类型，match_parent，match_content | ohos:width=”20″ ohos:width=”10vp” ohos:width=”$float:size_value” |
|
| height | 高度，必填项 | float 类型，match_parent，match_content | ohos:height=”20″ ohos:height=”20vp” ohos:height=”$float:size_value” |
|
| min_width | 最小宽度 | float 类型 | ohos:min_width=”20″ ohos:min_width=”20vp” ohos:min_width=”$float:size_value” |
|
| min_height | 最小高度 | float 类型 | ohos:min_height=”20″ ohos:min_height=”20vp” ohos:min_height=”$float:size_value” |
|
| alpha | 透明度 | float 类型 | 取值范畴在 0~1。 | ohos:alpha=”0.86″ ohos:alpha=”$float:value” |
| enabled | 是否启用 | boolean 类型 | ohos:enabled=”true” ohos:enabled=”$boolean:true” |
|
| visibility | 可见性 | visible，invisible，hide | ohos:visibility=”visible” | |
| padding | 内间距 | float 类型 | ||
| margin | 外边距 | float 类型 |
TableLayout 的自有 XML 属性见下表：
表 1 TableLayout 的自有 XML 属性
| 属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
|---|---|---|---|---|
| alignment_type | 对齐形式 | align_edges | 示意 TableLayout 内的组件按边界对齐。 | ohos:alignment_type=”align_edges” |
| align_contents | 示意 TableLayout 内的组件按边距对齐。 | ohos:alignment_type=”align_contents” | ||
| column_count | 列数 | integer 类型 | 能够间接设置整型数值，也能够援用 integer 资源。 | ohos:column_count=”3″ ohos:column_count=”$integer:count” |
| row_count | 行数 | integer 类型 | 能够间接设置整型数值，也能够援用 integer 资源。 | ohos:row_count=”2″ ohos:row_count=”$integer:count” |
| orientation | 排列方向 | horizontal | 示意程度方向布局。 | ohos:orientation=”horizontal” |
| vertical | 示意垂直方向布局。 | ohos:orientation=”vertical” |
二、应用表格布局
2.1 默认一列多行
TableLayout 默认一列多行。
咱们先批改一下布局文件，我的项目 /entry/src/main/resources/base/layout/ 下的 ability_main_layout 文件。
删除原来的代码，创立 TableLayout：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#87CEEB"
ohos:layout_alignment="horizontal_center"
ohos:padding="8vp">
</TableLayout>而后在外面增加 4 个 Text 子控件：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#87CEEB"
ohos:layout_alignment="horizontal_center"
ohos:padding="8vp">
<Text
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00BFFF"
ohos:margin="8vp"
ohos:text="1"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00BFFF"
ohos:margin="8vp"
ohos:text="2"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00BFFF"
ohos:margin="8vp"
ohos:text="3"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00BFFF"
ohos:margin="8vp"
ohos:text="4"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
</TableLayout>效果图：
<img src=”https://img.chengxuka.com/WX20210603-111727@2x.png/mark” alt=”WX20210603-111727@2x” style=”zoom:50%;” />
2.2 设置多行多列
设置行数和列数：
<TableLayout
...
ohos:row_count="2"
ohos:column_count="2">只须要在 TableLayout 标签中设置好行数和列数，其余的内容不必改，效果图：
<img src=”https://img.chengxuka.com/WX20210603-111957@2x.png/mark” alt=”WX20210603-111957@2x” style=”zoom:50%;” />
2.4 设置对齐形式
在 XML 中设置对齐形式，以”align_contents“为例：
<TableLayout
...
ohos:alignment_type="align_contents">
...
</TableLayout>更多内容：
1、社区：鸿蒙巴士 https://www.harmonybus.net/
2、公众号：HarmonyBus
3、技术交换 QQ 群：714518656
4、视频课：https://www.chengxuka.com
