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

作者：韩茹

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

鸿蒙巴士专栏作家

TableLayout使用表格的方式划分子组件。

一、支持的XML属性

TableLayout的共有XML属性继承自：Component

TableLayout的自有XML属性见下表：

表1 TableLayout的自有XML属性

二、使用表格布局

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>
复制代码

更多内容：

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

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：www.chengxuka.com