[HarmonyOS NEXT 实战案例十七] 设置选项列表网格布局（上）
项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
1. 概述
设置页面是几乎所有应用程序中不可或缺的一部分，它提供了用户配置和管理应用程序的入口。在本教程中，我们将学习如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个简洁、美观的设置选项列表网格布局。
本教程将涵盖以下内容：
- 设置选项数据结构设计
- 整体布局实现
- 设置选项项的实现
- GridRow和GridCol组件配置详解
- 布局效果分析
2. 设置选项数据结构设计
首先，我们需要定义设置选项的数据结构。每个设置选项通常包含标题和图标：
interface SettingsType {
title: string; // 设置项标题
icon: Resource; // 设置项图标
}
这个简单的接口定义了设置选项的基本结构，包含两个属性：
title：字符串类型，表示设置项的名称icon：Resource类型，表示设置项的图标资源
3. 数据准备
接下来，我们准备设置选项的数据：
private settings: SettingsType[] = [
{ title: '账号与安全', icon: $r('app.media.01') },
{ title: '通知设置', icon: $r('app.media.02') },
{ title: '隐私设置', icon: $r('app.media.03') },
{ title: '通用设置', icon: $r('app.media.04') },
{ title: '帮助与反馈', icon: $r('app.media.05') },
{ title: '关于我们', icon: $r('app.media.01') }
]
在这个示例中，我们创建了6个设置选项，每个选项都有一个标题和对应的图标资源。这些选项涵盖了应用程序中常见的设置类别，如账号安全、通知、隐私、通用设置等。
4. 整体布局实现
现在，我们开始实现设置选项列表的整体布局：
build() {
Column() {
Text('设置')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 16 })
.width('100%')
.textAlign(TextAlign.Start)
GridRow({ columns: 1 }) {
// 设置选项列表
}
}
.width('100%')
.padding(16)
}
整体布局使用一个Column组件作为容器，包含两个主要部分：
- 标题文本：显示"设置"，使用较大的字体和粗体样式，使其在视觉上更加突出
- GridRow组件：用于布局设置选项列表，设置为单列布局
整个Column容器设置了100%的宽度和16的内边距，确保内容在屏幕上有适当的边距。
5. 设置选项项的实现
接下来，我们实现设置选项项的布局和样式：
GridRow({ columns: 1 }) {
ForEach(this.settings, (setting: SettingsType) => {
GridCol({ span: 1 }) {
Row() {
Image(setting.icon)
.width(24)
.height(24)
.margin({ right: 16 })
Text(setting.title)
.fontSize(16)
Blank()
Image($r("app.media.arrowright"))
.width(16)
.height(16)
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(8)
.margin({ bottom: 8 })
}
})
}
在这个实现中：
- 使用ForEach循环遍历settings数组，为每个设置选项创建一个GridCol
- 每个GridCol的span设置为1，表示占据整个列宽
- 在每个GridCol中，使用Row组件创建水平布局，包含以下元素：
- 左侧图标：设置宽高为24，右边距为16
- 设置项标题：使用16的字体大小
- Blank组件：用于占据中间的空白空间，将箭头图标推到最右侧
- 右侧箭头图标：表示可点击进入下一级，宽高为16
- 为Row添加样式：
- 内边距为16，提供足够的内容间距
- 白色背景色，使设置项在视觉上更加突出
- 8的圆角，使设置项看起来更加现代化
- 底部边距为8，分隔相邻的设置项
6. GridRow和GridCol组件配置详解
在这个设置选项列表布局中，我们使用了GridRow和GridCol组件的基本配置：
GridRow({ columns: 1 }) {
// GridCol组件
}
6.1 GridRow配置
columns: 1：设置网格为单列布局，这意味着每个设置选项将占据整个行宽
这种单列布局非常适合设置列表，因为设置选项通常需要足够的空间来显示标题和图标，并且用户习惯于垂直滚动浏览设置选项。
6.2 GridCol配置
GridCol({ span: 1 }) {
// 设置选项内容
}
span: 1：设置列跨度为1，表示每个设置选项占据整个列宽
由于GridRow的columns设置为1，每个GridCol的span也设置为1，这意味着每个设置选项将占据整个行宽，形成一个垂直堆叠的列表。
7. 布局效果分析
这种设置选项列表的网格布局具有以下特点：
-
清晰的层次结构：标题和设置选项列表形成明确的视觉层次，使用户能够快速理解页面结构
-
一致的视觉样式：每个设置选项使用相同的布局和样式，创建一致的视觉体验
-
良好的可扩展性：通过简单地向settings数组添加新项，可以轻松扩展设置选项列表
-
直观的交互提示：右侧的箭头图标为用户提供了明确的视觉提示，表明点击设置项可以进入下一级
-
适当的间距和分隔：设置项之间的边距和每个设置项的内边距确保了内容不会过于拥挤，提高了可读性
8. 完整代码
以下是设置选项列表网格布局的完整代码：
// 设置选项列表网格布局
interface SettingsType {
title: string;
icon: Resource;
}
@Component
export struct SettingsGrid {
private settings: SettingsType[] = [
{ title: '账号与安全', icon: $r('app.media.01') },
{ title: '通知设置', icon: $r('app.media.02') },
{ title: '隐私设置', icon: $r('app.media.03') },
{ title: '通用设置', icon: $r('app.media.04') },
{ title: '帮助与反馈', icon: $r('app.media.05') },
{ title: '关于我们', icon: $r('app.media.01') }
]
build() {
Column() {
Text('设置')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 16 })
.width('100%')
.textAlign(TextAlign.Start)
GridRow({ columns: 1 }) {
ForEach(this.settings, (setting: SettingsType) => {
GridCol({ span: 1 }) {
Row() {
Image(setting.icon)
.width(24)
.height(24)
.margin({ right: 16 })
Text(setting.title)
.fontSize(16)
Blank()
Image($r("app.media.arrowright"))
.width(16)
.height(16)
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(8)
.margin({ bottom: 8 })
}
})
}
}
.width('100%')
.padding(16)
}
}
9. 设置选项列表的布局技巧
9.1 使用Blank组件实现两端对齐
在设置选项的Row布局中，我们使用了Blank组件来实现标题和箭头图标的两端对齐：
Row() {
Image(setting.icon)
// ...
Text(setting.title)
// ...
Blank()
Image($r("app.media.arrowright"))
// ...
}
Blank组件会自动占据Row中的剩余空间，将箭头图标推到最右侧，这是实现两端对齐布局的简单有效的方法。
9.2 使用margin分隔列表项
为了在视觉上分隔设置选项，我们为每个Row添加了底部边距：
.margin({ bottom: 8 })
这种方法比使用分隔线更加现代化，创造了一种卡片式的视觉效果，同时也提高了可读性。
9.3 使用borderRadius美化列表项
为设置选项添加圆角可以使界面看起来更加现代化和精致：
.borderRadius(8)
适当的圆角可以软化界面的视觉效果，使其看起来不那么生硬，提升整体美感。
10. 总结
在本教程中，我们学习了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现设置选项列表的网格布局。虽然这是一个相对简单的布局，但它展示了网格布局系统的灵活性，即使是单列布局也能从中受益。
主要内容包括：
- 设置选项数据结构的设计
- 整体布局的实现
- 设置选项项的布局和样式
- GridRow和GridCol组件的配置
- 布局效果分析
通过这个示例，我们可以看到GridRow和GridCol组件不仅适用于复杂的多列网格布局，也适用于简单的列表布局。在下一篇教程中，我们将探讨如何优化和扩展这个设置选项列表，添加更多高级特性，如分组、搜索、响应式布局等。
