[HarmonyOS NEXT 实战案例十六] 个人资料卡片网格布局（上）

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

1. 概述

本教程将详细讲解如何使用HarmonyOS NEXT中的GridRow和GridCol组件实现个人资料卡片网格布局。个人资料卡片是应用中常见的UI组件，用于展示用户的基本信息、统计数据和操作按钮。通过网格布局，我们可以创建结构清晰、布局灵活的个人资料卡片，提升用户体验。

本教程将涵盖以下内容：

• 个人资料数据结构设计
• 整体布局实现
• 头像和基本信息区域
• 数据统计区域
• 操作按钮区域
• GridRow和GridCol组件配置详解
• 布局效果分析

2. 数据结构设计

在实现个人资料卡片之前，我们需要设计合适的数据结构来存储和管理用户的统计数据。在本案例中，我们定义了一个StatusType接口来描述统计数据的结构：

interface StatusType{
    label: string;  // 统计项标签
    value: string;  // 统计项数值
}

这个接口包含两个字段：

• label：表示统计项的名称，如"关注"、"粉丝"等
• value：表示统计项的数值，如"128"、"1.2K"等

3. 数据准备

有了数据结构后，我们准备了一些模拟数据用于展示：

private stats:StatusType[] = [
    { label: '关注', value: '128' },
    { label: '粉丝', value: '1.2K' },
    { label: '获赞', value: '3.4K' },
    { label: '收藏', value: '256' }
]

这些数据将用于在个人资料卡片中展示用户的统计信息。

4. 布局实现

4.1 整体布局结构

个人资料卡片的整体布局使用Column组件作为容器，包含三个主要部分：

1. 头像和基本信息区域
2. 数据统计区域
3. 操作按钮区域

Column() {
    // 头像和基本信息区域
    // ...
    
    // 数据统计区域
    // ...
    
    // 操作按钮区域
    // ...
}
.width('100%')
.padding(16)
.backgroundColor('#F5F5F5')

整个Column容器设置了100%的宽度，16的内边距，以及浅灰色的背景色，使卡片看起来更加美观。

4.2 头像和基本信息区域

头像和基本信息区域使用GridRow和GridCol组件进行布局：

// 头像和基本信息
GridRow({ columns: 1 }) {
    GridCol({ span: 1 }) {
        Row() {
            Image($r('app.media.phone'))
                .width(80)
                .height(80)
                .borderRadius(40)
                .margin({ right: 16 })

            Column() {
                Text('张三')
                    .fontSize(20)
                    .fontWeight(FontWeight.Bold)

                Text('HarmonyOS开发者')
                    .fontSize(14)
                    .fontColor('#9E9E9E')
                    .margin({ top: 4 })

                Text('北京 · 海淀')
                    .fontSize(12)
                    .fontColor('#9E9E9E')
                    .margin({ top: 4 })
            }
            .alignItems(HorizontalAlign.Start)
        }
        .padding(16)
    }
}

在这个区域中：

• 使用GridRow组件设置列数为1，表示整行只有一个网格单元
• 在GridCol中使用Row组件横向排列头像和文本信息
• 头像使用Image组件，设置宽高为80，圆角为40（使其成为圆形），右边距为16
• 文本信息使用Column组件纵向排列，包括用户名、职业和位置信息
• 文本信息的对齐方式设置为左对齐（HorizontalAlign.Start）

4.3 数据统计区域

数据统计区域使用GridRow和GridCol组件实现四等分的网格布局：

// 数据统计
GridRow({ columns: 4 }) {
    ForEach(this.stats, (stat:StatusType) => {
        GridCol({ span: 1 }) {
            Column() {
                Text(stat.value)
                    .fontSize(18)
                    .fontWeight(FontWeight.Bold)

                Text(stat.label)
                    .fontSize(12)
                    .fontColor('#9E9E9E')
                    .margin({ top: 4 })
            }
            .padding(8)
            .backgroundColor('#FFFFFF')
            .borderRadius(8)
        }
    })
}
.margin({ top: 16 })

在这个区域中：

• 使用GridRow组件设置列数为4，表示一行分为4个等宽的网格单元
• 使用ForEach循环遍历stats数组，为每个统计项创建一个GridCol
• 每个GridCol的span设置为1，表示占用1个网格单元
• 在每个GridCol中使用Column组件纵向排列数值和标签
• 数值使用较大的字体和粗体显示，标签使用较小的字体和灰色显示
• 每个统计项设置了内边距、白色背景和圆角，使其看起来像一个独立的卡片
• 整个数据统计区域设置了上边距为16，与头像和基本信息区域保持一定的间距

4.4 操作按钮区域

操作按钮区域使用GridRow和GridCol组件实现两等分的网格布局：

// 操作按钮
GridRow({ columns: 2, gutter: 16 }) {
    GridCol({ span: 1 }) {
        Button('编辑资料')
            .width('100%')
            .fontSize(16)
    }

    GridCol({ span: 1 }) {
        Button('设置')
            .width('100%')
            .fontSize(16)
            .type(ButtonType.Normal)
    }
}
.margin({ top: 24 })

在这个区域中：

• 使用GridRow组件设置列数为2，表示一行分为2个等宽的网格单元
• 设置gutter为16，表示两个网格单元之间的间距为16
• 每个GridCol的span设置为1，表示占用1个网格单元
• 在每个GridCol中放置一个Button组件，分别为"编辑资料"和"设置"
• 按钮的宽度设置为100%，使其填满整个网格单元
• "编辑资料"按钮使用默认的按钮样式（主色调），"设置"按钮使用Normal类型（次要样式）
• 整个操作按钮区域设置了上边距为24，与数据统计区域保持一定的间距

5. GridRow和GridCol组件详解

在本案例中，我们使用了GridRow和GridCol组件实现网格布局。下面详细解析其配置：

5.1 GridRow组件

GridRow组件是HarmonyOS NEXT中实现网格布局的容器组件，它将子组件按照网格进行排列。GridRow组件的主要属性如下：

属性名	类型	描述
columns	number | GridRowColumnOptions	设置布局列数
gutter	Length | GutterOption	设置列间距
breakpoints	{ value: Array, reference: BreakpointsReference }	设置断点响应参考值
direction	GridRowDirection	设置布局方向

在本案例中，我们使用了以下GridRow配置：

1. 头像和基本信息区域：GridRow({ columns: 1 })

   • 设置列数为1，表示整行只有一个网格单元

2. 数据统计区域：GridRow({ columns: 4 })

   • 设置列数为4，表示一行分为4个等宽的网格单元

3. 操作按钮区域：GridRow({ columns: 2, gutter: 16 })

   • 设置列数为2，表示一行分为2个等宽的网格单元
   • 设置gutter为16，表示两个网格单元之间的间距为16

5.2 GridCol组件

GridCol组件是GridRow的子组件，用于定义网格中的单元格。GridCol组件的主要属性如下：

属性名	类型	描述
span	number | GridColColumnOption	栅格子组件占用栅格容器组件的列数
offset	number | GridColColumnOption	栅格子组件相对于原本位置偏移的列数
order	number | GridColColumnOption	元素的序号，用于对栅格子组件做排序

在本案例中，我们使用了以下GridCol配置：

1. 头像和基本信息区域：GridCol({ span: 1 })

   • 设置span为1，表示占用1个网格单元

2. 数据统计区域：GridCol({ span: 1 })

   • 设置span为1，表示占用1个网格单元

3. 操作按钮区域：GridCol({ span: 1 })

   • 设置span为1，表示占用1个网格单元

6. 布局效果分析

通过使用GridRow和GridCol组件，我们实现了一个结构清晰、布局灵活的个人资料卡片：

1. 头像和基本信息区域：使用单列布局，将头像和文本信息横向排列，文本信息内部纵向排列，形成了清晰的视觉层次。

2. 数据统计区域：使用四列布局，将四个统计项均匀分布在一行中，每个统计项都是一个独立的卡片，数值在上，标签在下，形成了统一的视觉风格。

3. 操作按钮区域：使用两列布局，将两个按钮均匀分布在一行中，按钮之间有适当的间距，形成了良好的交互体验。

4. 整体布局：三个区域之间有适当的间距，背景色和内边距的设置使整个卡片看起来更加美观。

这种布局方式具有以下优势：

• 结构清晰：通过网格布局，各个区域的边界和层次关系非常清晰。
• 布局灵活：可以通过调整GridRow的columns属性和GridCol的span属性，轻松调整布局结构。
• 响应式支持：虽然本案例没有实现响应式布局，但GridRow和GridCol组件本身支持响应式配置，可以根据需要进行扩展。

7. 完整代码

// 个人资料卡片网格布局
interface StatusType{
    label: string;
    value: string;
}
@Component
export struct ProfileGrid {
    private stats:StatusType[] = [
        { label: '关注', value: '128' },
        { label: '粉丝', value: '1.2K' },
        { label: '获赞', value: '3.4K' },
        { label: '收藏', value: '256' }
    ]

    build() {
        Column() {
            // 头像和基本信息
            GridRow({ columns: 1 }) {
                GridCol({ span: 1 }) {
                    Row() {
                        Image($r('app.media.phone'))
                            .width(80)
                            .height(80)
                            .borderRadius(40)
                            .margin({ right: 16 })

                        Column() {
                            Text('张三')
                                .fontSize(20)
                                .fontWeight(FontWeight.Bold)

                            Text('HarmonyOS开发者')
                                .fontSize(14)
                                .fontColor('#9E9E9E')
                                .margin({ top: 4 })

                            Text('北京 · 海淀')
                                .fontSize(12)
                                .fontColor('#9E9E9E')
                                .margin({ top: 4 })
                        }
                        .alignItems(HorizontalAlign.Start)
                    }
                    .padding(16)
                }
            }

            // 数据统计
            GridRow({ columns: 4 }) {
                ForEach(this.stats, (stat:StatusType) => {
                    GridCol({ span: 1 }) {
                        Column() {
                            Text(stat.value)
                                .fontSize(18)
                                .fontWeight(FontWeight.Bold)

                            Text(stat.label)
                                .fontSize(12)
                                .fontColor('#9E9E9E')
                                .margin({ top: 4 })
                        }
                        .padding(8)
                        .backgroundColor('#FFFFFF')
                        .borderRadius(8)
                    }
                })
            }
            .margin({ top: 16 })

            // 操作按钮
            GridRow({ columns: 2, gutter: 16 }) {
                GridCol({ span: 1 }) {
                    Button('编辑资料')
                        .width('100%')
                        .fontSize(16)
                }

                GridCol({ span: 1 }) {
                    Button('设置')
                        .width('100%')
                        .fontSize(16)
                        .type(ButtonType.Normal)
                }
            }
            .margin({ top: 24 })
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F5F5')
    }
}

8. 总结

本教程详细讲解了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现个人资料卡片的网格布局。通过合理的数据结构设计和布局规划，我们创建了一个结构清晰、布局灵活的个人资料卡片，包括头像和基本信息区域、数据统计区域和操作按钮区域。

通过本教程，你应该已经掌握了：

• 如何设计个人资料卡片的数据结构
• 如何使用GridRow和GridCol组件实现网格布局
• 如何配置GridRow的columns和gutter属性
• 如何配置GridCol的span属性
• 如何结合其他组件（如Row、Column、Text、Image、Button等）创建复杂的UI布局

在下一篇教程中，我们将在此基础上，深入探讨如何优化个人资料卡片的布局，添加响应式支持，以及实现更多高级特性，使其更加适应不同设备和屏幕尺寸。