项目已开源，开源地址： 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组件作为容器，包含三个主要部分：
- 头像和基本信息区域
- 数据统计区域
- 操作按钮区域
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配置：
头像和基本信息区域：
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组件的主要属性如下：
| 属性名 | 类型 | 描述 | |
|---|---|---|---|
| span | number \ | GridColColumnOption | 栅格子组件占用栅格容器组件的列数 |
| offset | number \ | GridColColumnOption | 栅格子组件相对于原本位置偏移的列数 |
| order | number \ | GridColColumnOption | 元素的序号，用于对栅格子组件做排序 |
在本案例中，我们使用了以下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;
}
@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布局
在下一篇教程中，我们将在此基础上，深入探讨如何优化个人资料卡片的布局，添加响应式支持，以及实现更多高级特性，使其更加适应不同设备和屏幕尺寸。
