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" /\> \+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" /\> \+id:name_zhang" ohos:height="wrap_content" ohos:width="wrap_content" ohos:text="张三" ohos:text_size="18fp" ohos:layout_alignment="center" /\> \+id:math_zhang" ohos:height="wrap_content" ohos:width="wrap_content" ohos:text="90" ohos:text_size="18fp" ohos:layout_alignment="center" /\> \+id:name_li" ohos:height="wrap_content" ohos:width="wrap_content" ohos:text="李四" ohos:text_size="18fp" ohos:layout_alignment="center" /\> \+id:math_li" ohos:height="wrap_content" ohos:width="wrap_content" ohos:text="85" ohos:text_size="18fp" ohos:layout_alignment="center" /\> \+id:name_wang" ohos:height="wrap_content" ohos:width="wrap_content" ohos:text="王五" ohos:text_size="18fp" ohos:layout_alignment="center" /\> \+id:math_wang" ohos:height="wrap_content" ohos:width="wrap_content" ohos:text="88" ohos:text_size="18fp" ohos:layout_alignment="center" /\> \然后,在对应的 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 的布局知识,如更加灵活的弹性布局、适用于复杂界面的相对布局等,它们将为我们的应用开发带来更多的可能性,让我们一起期待并继续深入学习吧!

相关推荐
LK_071 小时前
【Open3D】Ch.3:顶点法向量估计 | Python
开发语言·笔记·python
饮浊酒1 小时前
Python学习-----小游戏之人生重开模拟器(普通版)
python·学习·游戏程序
li星野1 小时前
打工人日报#20251011
笔记·程序人生·fpga开发·学习方法
摇滚侠1 小时前
Spring Boot 3零基础教程,yml配置文件,笔记13
spring boot·redis·笔记
QT 小鲜肉1 小时前
【个人成长笔记】在Ubuntu中的Linux系统安装 anaconda 及其相关终端命令行
linux·笔记·深度学习·学习·ubuntu·学习方法
QT 小鲜肉1 小时前
【个人成长笔记】在Ubuntu中的Linux系统安装实验室WIFI驱动安装(Driver for Linux RTL8188GU)
linux·笔记·学习·ubuntu·学习方法
急急黄豆1 小时前
MADDPG学习笔记
笔记·学习
BullSmall1 小时前
《道德经》第十七章
学习
Chloeis Syntax2 小时前
栈和队列笔记2025-10-12
java·数据结构·笔记·
颜颜yan_2 小时前
HarmonyOS 6 ArkUI框架实战:文本展开折叠组件开发详解
华为·harmonyos·arkui