第10节 arkTS GridRow

在 ArkTS 中， GridRow 是 Grid 布局系统中的一个重要组成部分，用于定义网格布局中的行。以下是关于 GridRow 的详细介绍：

基本概念

Grid 布局将容器划分为行和列的网格结构， GridRow 则负责确定每行的属性和布局方式。在一个Grid 布局中，可以包含多个 GridRow ，每个 GridRow 又可以包含多个子组件，这些子组件将按照

Grid 布局的规则在行内进行排列。

常用属性

height：用于设置 GridRow 的高度，可以是具体的像素值，如 height: 100 表示该行的高度为100 像素；也可以是相对值，如 height: '50%' 表示该行的高度占整个 Grid 容器高度的50%。
alignment：用于指定子组件在 GridRow 中的垂直对齐方式，取值包括 Alignment.Start 、Alignment.Center 、 Alignment.End 等，分别表示子组件在该行中顶部对齐、居中对齐和底部对齐。
justifyContent：用于定义子组件在 GridRow 中的水平对齐方式，其取值与 Flex 布局中的justifyContent 类似，如 FlexAlign.Start 表示子组件在该行中左对齐，FlexAlign.Center 表示子组件在该行中居中对齐， FlexAlign.End 表示子组件在该行中右对齐等，用于控制子组件在水平方向上的分布方式。

示例代码

以下是一个简单的示例，展示了如何使用 GridRow 在 Grid 布局中创建两行不同布局的子组件：

@Entry
@Component
struct GridRowExample {
build() {
Grid() {
GridRow() {
// 第一行，高度为 50 像素，子组件垂直居中对齐，水平左对齐
height: 50,
alignment: Alignment.Center,
justifyContent: FlexAlign.Start,
Text('Item 1 in Row 1').fontSize(16)
Text('Item 2 in Row 1').fontSize(16)
}
GridRow() {
// 第二行，高度为 '50%'，子组件垂直底部对齐，水平右对齐
height: '50%',
alignment: Alignment.End,
justifyContent: FlexAlign.End,
Text('Item 1 in Row 2').fontSize(16)
Text('Item 2 in Row 2').fontSize(16)
}
}.width('100%').height('100%')
}
}

在这个示例中，创建了一个 Grid 布局，其中包含两个 GridRow 。第一个 GridRow 的高度为 50 像素，子组件在垂直方向居中对齐，水平方向左对齐；第二个 GridRow 的高度为 Grid 容器高度的 50%，子组件在垂直方向底部对齐，水平方向右对齐。每个 GridRow 中又包含了两个 Text 组件，展示了不同的布局效果。

应用场景

表格数据展示：在展示表格数据时， GridRow 可以作为表格的行，用于排列每一行的数据单元格，通过设置合适的对齐方式和高度，可以使表格数据整齐美观地展示出来。
图像画廊布局：构建图像画廊时，可以使用 Grid 布局结合 GridRow ，将多个图像按照一定的行数和列数进行排列，实现整齐的图像展示效果，方便用户浏览和查看。
页面分区布局：将页面划分为不同的区域时， GridRow 可以用于定义每个区域的行布局，通过调整不同行的高度和对齐方式，可以创建出复杂多样的页面布局，如将页面分为头部、内容区和底部，每个区域可以通过不同的 GridRow 进行布局设计。