HarmonyOS学习第12天：解锁表格布局的奥秘

表格布局初相识

不知不觉，我们在 HarmonyOS 的学习旅程中已经走到了第 12 天。在之前的学习里，我们逐步掌握了 HarmonyOS 开发的各种基础与核心技能，比如组件的基本使用、布局的初步搭建等，这些知识就像一块块基石，为我们构建强大应用程序奠定了基础。今天，我们将迎来一个新的重要布局方式 —— 表格布局（TableLayout）。

在许多应用场景中，我们常常需要以表格形式展示数据，比如财务报表展示收入支出数据、课程表呈现课程安排、员工信息表罗列员工的各项信息等。在这些情况下，表格布局就显得尤为重要。它能够让数据以一种整齐、结构化的方式呈现，方便用户快速浏览和对比信息，极大地提升了数据展示的效率与用户体验。接下来，就让我们深入了解表格布局的使用方式。

搭建表格框架

（一）创建基础表格

在 HarmonyOS 中，使用<TableLayout>标签来创建表格布局。其基本语法如下：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent">

</TableLayout>

在上述代码中，xmlns:ohos是命名空间声明，用于指定 HarmonyOS 的资源标识符。ohos:height和ohos:width属性分别设置表格布局的高度和宽度，这里设置为match_parent，表示表格将填充父容器的整个空间。

接下来，我们通过一个简单的示例来展示如何创建一个包含文本组件的表格。假设我们要创建一个简单的 2x2 表格，每个单元格中放置一个文本：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent">

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="1"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="2"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="3"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="4"

ohos:text_size="20fp" />

</TableLayout>

在这个示例中，我们在<TableLayout>中添加了四个<Text>组件。每个<Text>组件设置了高度和宽度为wrap_content，表示根据文本内容自适应大小，同时设置了文本内容和字体大小。运行该代码，即可看到一个简单的表格，其中文本按顺序排列在表格的单元格中。

（二）设置行列属性

在<TableLayout>中，可以通过ohos:row_count和ohos:column_count属性来设置表格的行数和列数。例如，要创建一个 3 行 4 列的表格，可以这样设置：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="3"

ohos:column_count="4">

</TableLayout>

当设置了行数和列数后，放置在<TableLayout>中的组件会按照行列顺序依次填充单元格。如果组件数量小于单元格数量，多余的单元格将为空；如果组件数量大于单元格数量，多余的组件将根据布局规则进行显示。

下面我们通过不同的代码示例来展示设置不同行列数的效果。

示例一：2 行 2 列的表格

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="2"

ohos:column_count="2">

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="A"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="B"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="C"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="D"

ohos:text_size="20fp" />

</TableLayout>

在这个示例中，四个<Text>组件会依次填充 2 行 2 列的四个单元格，形成一个规整的表格。

示例二：1 行 5 列的表格

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="1"

ohos:column_count="5">

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="1"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="2"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="3"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="4"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="5"

ohos:text_size="20fp" />

</TableLayout>

此示例中，五个<Text>组件会排列在同一行的五个单元格中，形成一个单行多列的表格效果。通过这些示例，我们可以清晰地看到ohos:row_count和ohos:column_count属性对表格布局的影响，根据实际需求灵活设置行列数，为后续在表格中放置各种组件奠定基础。

填充表格内容

（一）添加行与列

在<TableLayout>中，通过直接添加组件来形成行和列的结构。每个组件默认占据一个单元格，组件会按照添加的顺序依次填充表格的单元格。例如，我们要创建一个简单的 3x3 的表格，每个单元格放置一个按钮，代码如下：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="3"

ohos:column_count="3">

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮1"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮2"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮3"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮4"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮5"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮6"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮7"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮8"

ohos:text_size="18fp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮9"

ohos:text_size="18fp" />

</TableLayout>

在上述代码中，我们在<TableLayout>标签内依次添加了九个<Button>组件。由于设置了ohos:row_count="3"和ohos:column_count="3"，这些按钮会按照 3 行 3 列的方式排列在表格中。运行代码后，即可看到一个整齐的 3x3 按钮表格。

如果需要在表格中添加不同类型的组件，比如文本、图片、输入框等，也可以按照同样的方式进行添加。例如，创建一个包含文本和图片的表格：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="2"

ohos:column_count="2">

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="姓名"

ohos:text_size="20fp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="年龄"

ohos:text_size="20fp" />

<Image

ohos:height="100vp"

ohos:width="100vp"

ohos:src_element="$media:icon" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="25"

ohos:text_size="20fp" />

</TableLayout>

在这个示例中，第一行的两个单元格分别放置了 “姓名” 和 “年龄” 文本，第二行的第一个单元格放置了一张图片（通过ohos:src_element指定图片资源），第二个单元格放置了年龄信息的文本。这样就创建了一个简单的数据展示表格，通过这种方式，可以根据实际需求灵活组合各种组件，构建出丰富多样的表格布局。

（二）组件布局技巧

在表格布局中，还可以通过一些属性来控制组件在单元格内的布局，使表格更加美观和符合需求。常见的属性有ohos:layout_alignment、ohos:padding、ohos:margin等。

ohos:layout_alignment属性用于设置组件在单元格内的对齐方式，它有多个取值，如left（左对齐）、right（右对齐）、center（居中对齐）、top（顶部对齐）、bottom（底部对齐）等。例如，将按钮在单元格内居中对齐：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="2"

ohos:column_count="2">

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮1"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮2"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮3"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮4"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

</TableLayout>

在上述代码中，每个按钮都设置了ohos:layout_alignment="center"，这样按钮在各自所在的单元格内会水平和垂直方向都居中显示，使表格看起来更加整齐美观。

ohos:padding属性用于设置组件内部的内边距，即组件内容与组件边框之间的距离。通过设置ohos:padding，可以调整组件内文本或图片与组件边缘的间距，使组件内容显示更加舒适。例如：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="1"

ohos:column_count="2">

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="文本1"

ohos:text_size="20fp"

ohos:padding="10vp" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="文本2"

ohos:text_size="20fp"

ohos:padding="15vp" />

</TableLayout>

在这个例子中，第一个文本组件设置了ohos:padding="10vp"，表示其内容与边框四周的距离为 10vp；第二个文本组件设置了ohos:padding="15vp"，内边距更大，这样可以直观地看到内边距对组件内容显示的影响，通过合理设置内边距，可以优化组件在单元格内的展示效果。

ohos:margin属性用于设置组件的外边距，即组件与其他组件之间的距离。它可以控制组件在表格中的相对位置，使表格布局更加灵活。例如：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="2"

ohos:column_count="2">

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮A"

ohos:text_size="18fp"

ohos:margin="5vp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮B"

ohos:text_size="18fp"

ohos:margin="10vp 5vp 10vp 5vp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮C"

ohos:text_size="18fp"

ohos:margin="5vp 10vp" />

<Button

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="按钮D"

ohos:text_size="18fp" />

</TableLayout>

在这段代码中，第一个按钮设置了ohos:margin="5vp"，表示其与四周其他组件的距离均为 5vp；第二个按钮设置了ohos:margin="10vp 5vp 10vp 5vp"，分别表示上、右、下、左的外边距，即上和下外边距为 10vp，左和右外边距为 5vp；第三个按钮设置了ohos:margin="5vp 10vp"，表示上外边距为 5vp，左右外边距为 10vp（下外边距默认为 0）；第四个按钮未设置外边距。通过这些不同的外边距设置，可以看到按钮在表格中的位置发生了明显变化，合理运用外边距属性能够精确控制组件在表格中的布局，满足各种复杂的布局需求。

表格布局实战

（一）数据展示案例

下面我们通过一个实际的学生成绩表案例，更深入地展示表格布局在展示复杂数据时的强大功能。假设我们要展示一个包含学生姓名、语文成绩、数学成绩和英语成绩的表格。

首先，在布局文件中创建表格结构：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="5"

ohos:column_count="4">

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="姓名"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="语文"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="数学"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="英语"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="张三"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="85"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="90"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="88"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="李四"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="78"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="85"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="92"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="王五"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="90"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="88"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="95"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

</TableLayout>

在上述代码中，我们首先设置了表格的行数为 5，列数为 4 。前四行的文本组件构成了表头，通过设置ohos:background_element="#F0F0F0"来改变表头的背景颜色，使其与数据行区分开来，同时设置ohos:layout_alignment="center"使表头文本居中显示。从第五行开始，每四行文本组件为一组，构成一个学生的数据行，展示学生的姓名和各科成绩。通过这样的方式，我们创建了一个简单而清晰的学生成绩表。运行代码后，即可看到一个整齐排列的成绩表格，用户可以方便地查看每个学生的成绩信息。

（二）交互功能实现

在实际应用中，表格不仅仅是展示数据，还常常需要与用户进行交互。例如，为表格组件添加点击事件，当用户点击某个单元格时，获取该单元格的数据并进行相应处理。下面我们通过代码示例来展示如何实现这一功能。

假设我们在上述学生成绩表的基础上，为每个单元格添加点击事件，当点击单元格时，弹出一个提示框显示该单元格的数据。首先，在布局文件中为每个需要添加点击事件的组件（这里是每个<Text>组件）设置ohos:id属性，以便在代码中获取并设置点击事件：

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:row_count="5"

ohos:column_count="4">

<Text

ohos:id="$+id:header_name"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="姓名"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:header_chinese"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="语文"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:header_math"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="数学"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:header_english"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="英语"

ohos:text_size="20fp"

ohos:background_element="#F0F0F0"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:name_zhang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="张三"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:chinese_zhang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="85"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:math_zhang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="90"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:english_zhang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="88"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:name_li"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="李四"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:chinese_li"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="78"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:math_li"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="85"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:english_li"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="92"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:name_wang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="王五"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:chinese_wang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="90"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:math_wang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="88"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

<Text

ohos:id="$+id:english_wang"

ohos:height="wrap_content"

ohos:width="wrap_content"

ohos:text="95"

ohos:text_size="18fp"

ohos:layout_alignment="center" />

</TableLayout>

然后，在对应的 Java 代码中获取这些组件并设置点击事件：

import ohos.aafwk.ability.AbilitySlice;

import ohos.aafwk.content.Intent;

import ohos.agp.components.Component;

import ohos.agp.components.Text;

import ohos.agp.window.dialog.ToastDialog;

public class MainAbilitySlice extends AbilitySlice {

@Override

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

// 获取表头组件并设置点击事件

Text headerName = (Text) findComponentById(ResourceTable.Id_header_name);

headerName.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

new ToastDialog(getContext()).setText("点击了表头：姓名").show();

}

});

Text headerChinese = (Text) findComponentById(ResourceTable.Id_header_chinese);

headerChinese.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

new ToastDialog(getContext()).setText("点击了表头：语文").show();

}

});

// 以此类推，为其他表头组件设置点击事件

// 获取数据行组件并设置点击事件

Text nameZhang = (Text) findComponentById(ResourceTable.Id_name_zhang);

nameZhang.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

new ToastDialog(getContext()).setText("点击了单元格：张三").show();

}

});

Text chineseZhang = (Text) findComponentById(ResourceTable.Id_chinese_zhang);

chineseZhang.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

new ToastDialog(getContext()).setText("点击了单元格：85").show();

}

});

// 以此类推，为其他数据行组件设置点击事件

}

@Override

public void onActive() {

super.onActive();

}

@Override

public void onForeground(Intent intent) {

super.onForeground(intent);

}

在上述代码中，我们通过findComponentById方法获取每个<Text>组件，并使用setClickedListener方法为其设置点击事件。在点击事件的回调函数中，创建一个ToastDialog对象，将点击的单元格数据作为提示信息显示出来。这样，当用户点击表格中的任意单元格时，都能获取到该单元格的数据并通过提示框展示，实现了表格与用户之间的交互功能。通过这种方式，可以根据实际需求对点击单元格的数据进行更复杂的处理，如跳转到详细信息页面、进行数据编辑等。

总结与展望

通过今天的学习，我们全面了解了 HarmonyOS 中表格布局（TableLayout）的使用方式。从创建基础表格框架，到设置行列属性，再到填充各种组件以及实现交互功能，表格布局为我们在 HarmonyOS 应用开发中展示数据提供了一种高效、直观的方式。它能够使复杂的数据以整齐、有序的表格形式呈现，大大提升了用户获取信息的效率。

希望大家能够将今天所学的表格布局知识运用到实际项目中，通过不断练习和实践，熟练掌握其使用技巧。在后续的学习中，我们还将探索更多 HarmonyOS 的布局知识，如更加灵活的弹性布局、适用于复杂界面的相对布局等，它们将为我们的应用开发带来更多的可能性，让我们一起期待并继续深入学习吧！