[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组件作为容器，包含两个主要部分：

1. 标题文本：显示"设置"，使用较大的字体和粗体样式，使其在视觉上更加突出
2. 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 })
        }
    })
}

在这个实现中：

1. 使用ForEach循环遍历settings数组，为每个设置选项创建一个GridCol
2. 每个GridCol的span设置为1，表示占据整个列宽
3. 在每个GridCol中，使用Row组件创建水平布局，包含以下元素：
   • 左侧图标：设置宽高为24，右边距为16
   • 设置项标题：使用16的字体大小
   • Blank组件：用于占据中间的空白空间，将箭头图标推到最右侧
   • 右侧箭头图标：表示可点击进入下一级，宽高为16
4. 为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. 布局效果分析

这种设置选项列表的网格布局具有以下特点：

1. 清晰的层次结构：标题和设置选项列表形成明确的视觉层次，使用户能够快速理解页面结构

2. 一致的视觉样式：每个设置选项使用相同的布局和样式，创建一致的视觉体验

3. 良好的可扩展性：通过简单地向settings数组添加新项，可以轻松扩展设置选项列表

4. 直观的交互提示：右侧的箭头图标为用户提供了明确的视觉提示，表明点击设置项可以进入下一级

5. 适当的间距和分隔：设置项之间的边距和每个设置项的内边距确保了内容不会过于拥挤，提高了可读性

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组件不仅适用于复杂的多列网格布局，也适用于简单的列表布局。在下一篇教程中，我们将探讨如何优化和扩展这个设置选项列表，添加更多高级特性，如分组、搜索、响应式布局等。