82. [HarmonyOS NEXT 实战案例十六] 个人资料卡片网格布局（上）
文章目录
项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
![82. [HarmonyOS NEXT 实战案例十六] 个人资料卡片网格布局（上）](https://i-blog.csdnimg.cn/img_convert/cd445de3cc749a851c3fb53cefa37f48.png)
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组件作为容器，包含三个主要部分：
- 头像和基本信息区域
- 数据统计区域
- 操作按钮区域
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组件的主要属性如下：
在本案例中，我们使用了以下GridRow配置：
-
头像和基本信息区域：
GridRow({ columns: 1 })- 设置列数为1，表示整行只有一个网格单元
-
数据统计区域：
GridRow({ columns: 4 })- 设置列数为4，表示一行分为4个等宽的网格单元
-
操作按钮区域：
GridRow({ columns: 2, gutter: 16 })- 设置列数为2，表示一行分为2个等宽的网格单元
- 设置gutter为16，表示两个网格单元之间的间距为16
5.2 GridCol组件
GridCol组件是GridRow的子组件，用于定义网格中的单元格。GridCol组件的主要属性如下：
在本案例中，我们使用了以下GridCol配置：
-
头像和基本信息区域：
GridCol({ span: 1 })- 设置span为1，表示占用1个网格单元
-
数据统计区域：
GridCol({ span: 1 })- 设置span为1，表示占用1个网格单元
-
操作按钮区域：
GridCol({ span: 1 })- 设置span为1，表示占用1个网格单元
6. 布局效果分析
通过使用GridRow和GridCol组件，我们实现了一个结构清晰、布局灵活的个人资料卡片：
-
头像和基本信息区域：使用单列布局，将头像和文本信息横向排列，文本信息内部纵向排列，形成了清晰的视觉层次。
-
数据统计区域：使用四列布局，将四个统计项均匀分布在一行中，每个统计项都是一个独立的卡片，数值在上，标签在下，形成了统一的视觉风格。
-
操作按钮区域：使用两列布局，将两个按钮均匀分布在一行中，按钮之间有适当的间距，形成了良好的交互体验。
-
整体布局：三个区域之间有适当的间距，背景色和内边距的设置使整个卡片看起来更加美观。
这种布局方式具有以下优势：
- 结构清晰：通过网格布局，各个区域的边界和层次关系非常清晰。
- 布局灵活：可以通过调整GridRow的columns属性和GridCol的span属性，轻松调整布局结构。
- 响应式支持：虽然本案例没有实现响应式布局，但GridRow和GridCol组件本身支持响应式配置，可以根据需要进行扩展。
7. 完整代码
// 个人资料卡片网格布局interface StatusType{ label: string; value: string;}@Componentexport 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布局
在下一篇教程中，我们将在此基础上，深入探讨如何优化个人资料卡片的布局，添加响应式支持，以及实现更多高级特性，使其更加适应不同设备和屏幕尺寸。
