2.5【HarmonyOS鸿蒙开发】表格布局TableLayout

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

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：

然后在里面添加4个Text子控件：

效果图：

2.2 设置多行多列

设置行数和列数：

只需要在TableLayout标签中设置好行数和列数，其他的内容不用改，效果图：

2.4 设置对齐方式

在XML中设置对齐方式，以”align_contents“为例：

    ...

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：https://www.chengxuka.com