HarmonyOS应用开发实战萌宠日记 - 成长记录卡片网格布局前言在萌宠日记的宠物档案页中成长记录卡片以网格布局展示宠物在幼年、6个月、1岁、2岁四个阶段的照片和标签。每个阶段使用等宽列均匀分布配合圆形占位图和文字标签形成清晰的成长轨迹。本文将从萌宠日记的成长记录卡片实现出发深入解析网格布局的 layoutWeight 等分机制、占位图设计、卡片结构以及数据驱动的渲染方式。一、成长记录卡片整体设计1.1 卡片结构┌─────────────────────────────────────┐ │ 成长记录 │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ │ │ │ │ │ │ ││ │ │ │ │ │ │ │ │ ││ │ └──────┘ └──────┘ └──────┘ └──────┘│ │ 幼年 6个月 1岁 2岁 │ └─────────────────────────────────────┘1.2 完整代码// PetProfilePage.ets — 成长记录卡片 Column({ space: 12 }) { // 标题 Text(成长记录) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) .width(100%) // 网格布局 Row({ space: 8 }) { ForEach([幼年, 6个月, 1岁, 2岁], (label: string) { Column({ space: 4 }) { // 占位图 Column() { Text() .fontSize(24) } .width(64) .height(64) .backgroundColor(#FFF3E0) .borderRadius(12) .justifyContent(FlexAlign.Center) // 标签 Text(label) .fontSize(11) .fontColor(#666666) } .layoutWeight(1) // 等宽列 .alignItems(HorizontalAlign.Center) }) } .width(100%) } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })提示layoutWeight(1)是 ArkUI 中实现等宽列的核心属性。4 个 Column 都设置了layoutWeight(1)它们会平分 Row 的剩余宽度实现均匀的网格布局。二、网格布局机制2.1 layoutWeight 等分Row({ space: 8 }) { Column().layoutWeight(1) // 25% 宽度 Column().layoutWeight(1) // 25% 宽度 Column().layoutWeight(1) // 25% 宽度 Column().layoutWeight(1) // 25% 宽度 }宽度计算方式父容器宽度 360 - 16 - 16 328vp减去卡片左右 padding 间距总和 8vp × 3 24vp3 个间隔 剩余宽度 328 - 24 304vp 每列宽度 304 / 4 76vp2.2 等分 vs 固定宽度布局方式代码优点缺点layoutWeightlayoutWeight(1)自适应屏幕宽度需要父容器有明确宽度固定宽度width(70)精确控制不同屏幕表现不一致百分比width(25%)按比例分配需手动计算三、占位图设计3.1 占位图容器Column() { Text() .fontSize(24) // Emoji 占位 } .width(64) .height(64) .backgroundColor(#FFF3E0) .borderRadius(12) .justifyContent(FlexAlign.Center)3.2 占位图参数参数值说明容器尺寸64×64vp适中大小背景色#FFF3E0浅橙与主色调呼应圆角12vp圆角矩形Emoji 大小24fp清晰可辨内容居中FlexAlign.Center垂直居中3.3 真实图片替换// 后续可替换为真实图片 Column() { Image($r(app.media.growth_photo)) .width(64) .height(64) .borderRadius(12) .objectFit(ImageFit.Cover) }四、标签文字设计4.1 标签样式Text(label) .fontSize(11) // 小字号 .fontColor(#666666) // 灰色4.2 标签与占位图的间距Column({ space: 4 }) { // 占位图 // 标签文字间距 4vp }五、卡片标题与结构5.1 标题Text(成长记录) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) .width(100%)5.2 卡片容器Column({ space: 12 }) { // 标题 // 网格内容 } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) // 统一内边距 16vp .shadow({ radius: 4, color: #10000000, offsetY: 2 })六、数据驱动渲染6.1 静态数据// 使用静态数组渲染 ForEach([幼年, 6个月, 1岁, 2岁], (label: string) { // 网格项 })6.2 动态数据// 使用动态数据渲染 interface GrowthStage { label: string photo: Resource date: string } State growthStages: GrowthStage[] [ { label: 幼年, photo: $r(app.media.puppy), date: 2022-02-14 }, { label: 6个月, photo: $r(app.media.six_months), date: 2022-08-14 }, { label: 1岁, photo: $r(app.media.one_year), date: 2023-02-14 }, { label: 2岁, photo: $r(app.media.two_years), date: 2024-02-14 } ] ForEach(this.growthStages, (stage: GrowthStage) { Column({ space: 4 }) { Image(stage.photo) .width(64).height(64).borderRadius(12) Text(stage.label).fontSize(11) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) })七、网格布局的应用场景7.1 萌宠日记中的网格布局页面网格内容列数布局方式宠物档案成长阶段4 列layoutWeight相册照片墙3 列Grid 组件快捷操作功能图标5 列layoutWeight活动统计活动类型3 列layoutWeight7.2 网格布局选择布局需求推荐方案理由少量固定列≤ 5Row layoutWeight简单、灵活大量动态数据Grid 组件支持滚动、虚拟化不规则网格Flex Wrap自动换行八、交互扩展8.1 点击查看详情Column({ space: 4 }) { // 占位图 // 标签 } .layoutWeight(1) .alignItems(HorizontalAlign.Center) .onClick(() { console.log(View growth stage:, label) // 跳转到该阶段的详细记录 if (this.onNavigateToStage) { this.onNavigateToStage(label) } })8.2 添加新阶段// 添加新的成长阶段 addGrowthStage(stage: GrowthStage): void { this.growthStages.push(stage) // State 驱动 UI 更新 }九、响应式适配9.1 不同屏幕适配屏幕宽度每列宽度占位图尺寸标签字号 360vp约 66vp56×5610fp360-414vp约 76vp64×6411fp414-600vp约 86vp72×7212fp 600vp约 106vp80×8013fp9.2 响应式布局实现getGrowthItemSize(): number { const width this.getScreenWidth() if (width 600) return 80 if (width 414) return 72 if (width 360) return 64 return 56 }十、最佳实践10.1 网格布局设计原则有序列表 — 网格布局的 5 个原则等宽优先使用 layoutWeight 实现等宽列自适应屏幕宽度间距统一列间距使用 Row 的 space 参数保持一致性内容居中网格项内容居中对齐视觉平衡占位图统一所有占位图使用相同尺寸和样式标签辅助图片下方配合文字标签明确含义10.2 萌宠日记成长记录卡片总结设计要素值说明列数4 列幼年、6个月、1岁、2岁布局方式Row layoutWeight(1)等宽分布列间距8vpRow 的 space 参数占位图尺寸64×64vp圆角 12vp标签字号11fp灰色卡片内边距16vp统一卡片圆角16vp统一风格总结本文从萌宠日记的成长记录卡片实现出发深入解析了网格布局的完整方法卡片结构标题 4 列网格 标签layoutWeight 等分4 个 Column 均分 Row 宽度占位图设计64×64 圆角容器 Emoji 占位标签文字11fp 小字号标签数据驱动ForEach 动态渲染网格项网格布局应用萌宠日记中多种网格布局场景交互扩展点击查看详情、添加新阶段响应式适配不同屏幕尺寸自适应网格布局是信息展示的重要方式Row layoutWeight 的组合适合固定列数的场景Grid 组件则适合大量动态数据的网格展示。下一篇我们将深入编辑按钮与交互反馈解析档案页中编辑按钮的设计与交互。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowlayoutWeight 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-layout-constraintsGrid 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachImage 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image卡片设计指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards响应式布局https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout布局基础https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout
HarmonyOS应用开发实战：萌宠日记 - 成长记录卡片网格布局
HarmonyOS应用开发实战萌宠日记 - 成长记录卡片网格布局前言在萌宠日记的宠物档案页中成长记录卡片以网格布局展示宠物在幼年、6个月、1岁、2岁四个阶段的照片和标签。每个阶段使用等宽列均匀分布配合圆形占位图和文字标签形成清晰的成长轨迹。本文将从萌宠日记的成长记录卡片实现出发深入解析网格布局的 layoutWeight 等分机制、占位图设计、卡片结构以及数据驱动的渲染方式。一、成长记录卡片整体设计1.1 卡片结构┌─────────────────────────────────────┐ │ 成长记录 │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ │ │ │ │ │ │ ││ │ │ │ │ │ │ │ │ ││ │ └──────┘ └──────┘ └──────┘ └──────┘│ │ 幼年 6个月 1岁 2岁 │ └─────────────────────────────────────┘1.2 完整代码// PetProfilePage.ets — 成长记录卡片 Column({ space: 12 }) { // 标题 Text(成长记录) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) .width(100%) // 网格布局 Row({ space: 8 }) { ForEach([幼年, 6个月, 1岁, 2岁], (label: string) { Column({ space: 4 }) { // 占位图 Column() { Text() .fontSize(24) } .width(64) .height(64) .backgroundColor(#FFF3E0) .borderRadius(12) .justifyContent(FlexAlign.Center) // 标签 Text(label) .fontSize(11) .fontColor(#666666) } .layoutWeight(1) // 等宽列 .alignItems(HorizontalAlign.Center) }) } .width(100%) } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })提示layoutWeight(1)是 ArkUI 中实现等宽列的核心属性。4 个 Column 都设置了layoutWeight(1)它们会平分 Row 的剩余宽度实现均匀的网格布局。二、网格布局机制2.1 layoutWeight 等分Row({ space: 8 }) { Column().layoutWeight(1) // 25% 宽度 Column().layoutWeight(1) // 25% 宽度 Column().layoutWeight(1) // 25% 宽度 Column().layoutWeight(1) // 25% 宽度 }宽度计算方式父容器宽度 360 - 16 - 16 328vp减去卡片左右 padding 间距总和 8vp × 3 24vp3 个间隔 剩余宽度 328 - 24 304vp 每列宽度 304 / 4 76vp2.2 等分 vs 固定宽度布局方式代码优点缺点layoutWeightlayoutWeight(1)自适应屏幕宽度需要父容器有明确宽度固定宽度width(70)精确控制不同屏幕表现不一致百分比width(25%)按比例分配需手动计算三、占位图设计3.1 占位图容器Column() { Text() .fontSize(24) // Emoji 占位 } .width(64) .height(64) .backgroundColor(#FFF3E0) .borderRadius(12) .justifyContent(FlexAlign.Center)3.2 占位图参数参数值说明容器尺寸64×64vp适中大小背景色#FFF3E0浅橙与主色调呼应圆角12vp圆角矩形Emoji 大小24fp清晰可辨内容居中FlexAlign.Center垂直居中3.3 真实图片替换// 后续可替换为真实图片 Column() { Image($r(app.media.growth_photo)) .width(64) .height(64) .borderRadius(12) .objectFit(ImageFit.Cover) }四、标签文字设计4.1 标签样式Text(label) .fontSize(11) // 小字号 .fontColor(#666666) // 灰色4.2 标签与占位图的间距Column({ space: 4 }) { // 占位图 // 标签文字间距 4vp }五、卡片标题与结构5.1 标题Text(成长记录) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) .width(100%)5.2 卡片容器Column({ space: 12 }) { // 标题 // 网格内容 } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .padding(16) // 统一内边距 16vp .shadow({ radius: 4, color: #10000000, offsetY: 2 })六、数据驱动渲染6.1 静态数据// 使用静态数组渲染 ForEach([幼年, 6个月, 1岁, 2岁], (label: string) { // 网格项 })6.2 动态数据// 使用动态数据渲染 interface GrowthStage { label: string photo: Resource date: string } State growthStages: GrowthStage[] [ { label: 幼年, photo: $r(app.media.puppy), date: 2022-02-14 }, { label: 6个月, photo: $r(app.media.six_months), date: 2022-08-14 }, { label: 1岁, photo: $r(app.media.one_year), date: 2023-02-14 }, { label: 2岁, photo: $r(app.media.two_years), date: 2024-02-14 } ] ForEach(this.growthStages, (stage: GrowthStage) { Column({ space: 4 }) { Image(stage.photo) .width(64).height(64).borderRadius(12) Text(stage.label).fontSize(11) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) })七、网格布局的应用场景7.1 萌宠日记中的网格布局页面网格内容列数布局方式宠物档案成长阶段4 列layoutWeight相册照片墙3 列Grid 组件快捷操作功能图标5 列layoutWeight活动统计活动类型3 列layoutWeight7.2 网格布局选择布局需求推荐方案理由少量固定列≤ 5Row layoutWeight简单、灵活大量动态数据Grid 组件支持滚动、虚拟化不规则网格Flex Wrap自动换行八、交互扩展8.1 点击查看详情Column({ space: 4 }) { // 占位图 // 标签 } .layoutWeight(1) .alignItems(HorizontalAlign.Center) .onClick(() { console.log(View growth stage:, label) // 跳转到该阶段的详细记录 if (this.onNavigateToStage) { this.onNavigateToStage(label) } })8.2 添加新阶段// 添加新的成长阶段 addGrowthStage(stage: GrowthStage): void { this.growthStages.push(stage) // State 驱动 UI 更新 }九、响应式适配9.1 不同屏幕适配屏幕宽度每列宽度占位图尺寸标签字号 360vp约 66vp56×5610fp360-414vp约 76vp64×6411fp414-600vp约 86vp72×7212fp 600vp约 106vp80×8013fp9.2 响应式布局实现getGrowthItemSize(): number { const width this.getScreenWidth() if (width 600) return 80 if (width 414) return 72 if (width 360) return 64 return 56 }十、最佳实践10.1 网格布局设计原则有序列表 — 网格布局的 5 个原则等宽优先使用 layoutWeight 实现等宽列自适应屏幕宽度间距统一列间距使用 Row 的 space 参数保持一致性内容居中网格项内容居中对齐视觉平衡占位图统一所有占位图使用相同尺寸和样式标签辅助图片下方配合文字标签明确含义10.2 萌宠日记成长记录卡片总结设计要素值说明列数4 列幼年、6个月、1岁、2岁布局方式Row layoutWeight(1)等宽分布列间距8vpRow 的 space 参数占位图尺寸64×64vp圆角 12vp标签字号11fp灰色卡片内边距16vp统一卡片圆角16vp统一风格总结本文从萌宠日记的成长记录卡片实现出发深入解析了网格布局的完整方法卡片结构标题 4 列网格 标签layoutWeight 等分4 个 Column 均分 Row 宽度占位图设计64×64 圆角容器 Emoji 占位标签文字11fp 小字号标签数据驱动ForEach 动态渲染网格项网格布局应用萌宠日记中多种网格布局场景交互扩展点击查看详情、添加新阶段响应式适配不同屏幕尺寸自适应网格布局是信息展示的重要方式Row layoutWeight 的组合适合固定列数的场景Grid 组件则适合大量动态数据的网格展示。下一篇我们将深入编辑按钮与交互反馈解析档案页中编辑按钮的设计与交互。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowlayoutWeight 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-layout-constraintsGrid 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachImage 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image卡片设计指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards响应式布局https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout布局基础https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout
