关于harmonyos:25HarmonyOS鸿蒙开发表格布局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：

<?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>

效果图：

2.2 设置多行多列

设置行数和列数：

<TableLayout    ...    ohos:row_count="2"    ohos:column_count="2">

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

2.4 设置对齐形式

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

<TableLayout    ...    ohos:alignment_type="align_contents">    ...</TableLayout>