摘要关于页面是应用的「名片」展示应用信息和功能入口。本文深入讲解如何在 HarmonyOS ArkTS 中构建一个功能完整的 App 关于页面涵盖 InfoRow 信息展示组件、3 列 Grid 网格布局30 个功能项、响应式设计等核心技术。一、项目概述「关于」页面通常是用户了解应用的窗口展示版本号、开发者信息、功能列表等内容。在本项目中我们将构建一个美观且功能丰富的关于页面包含两大核心区域InfoRow 信息区展示应用图标、名称、版本号、开发者、版权等信息Feature Grid 功能区使用 Grid 组件构建 3 列网格展示 30 个功能入口项页面布局结构┌──────────────────────────────┐ │ 应用 Logo 名称 │ ← 应用头部 │ 版本号 v1.0.0 │ ├──────────────────────────────┤ │ 开发者HarmonyOS Team │ ← InfoRow 信息行 │ 更新时间2025-01-15 │ │ 联系我们supportexample │ │ 隐私政策 │ │ 用户协议 │ ├──────────────────────────────┤ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ 功能1 │ │ 功能2 │ │ 功能3 │ │ ← 3 列网格 │ ├─────┤ ├─────┤ ├─────┤ │ (30 个功能项) │ │ 功能4 │ │ 功能5 │ │ 功能6 │ │ │ └─────┘ └─────┘ └─────┘ │ │ ... │ ├──────────────────────────────┤ │ 版权所有 © 2025 │ ← 底部版权 └──────────────────────────────┘二、项目架构entry/src/main/ets/ ├── pages/ │ └── AboutPage.ets // 关于主页面 ├── components/ │ ├── AppHeader.ets // 应用头部组件 │ ├── InfoRow.ets // 信息行组件 │ ├── FeatureGrid.ets // 功能网格组件 │ └── FeatureItem.ets // 单个功能项组件 ├── model/ │ ├── InfoItem.ets // 信息项数据模型 │ └── FeatureItemData.ets // 功能项数据模型 └── common/ └── Constants.ets // 常量与样式定义三、核心技术分析3.1 InfoRow 组件设计InfoRow是自定义的复合组件用于展示键值对信息行// components/InfoRow.ets Component export struct InfoRow { private label: string private value: string private icon?: ResourceStr private showArrow: boolean true private onClick?: () void build() { Row() { // 图标可选 if (this.icon ! undefined) { Image(this.icon) .width(20) .height(20) .margin({ right: 12 }) } // 标签 Text(this.label) .fontSize(15) .fontColor(#333333) .layoutWeight(1) // 值 Text(this.value) .fontSize(14) .fontColor(#999999) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) .margin({ right: 8 }) // 箭头可选 if (this.showArrow) { Image($r(app.media.arrow_right)) .width(16) .height(16) .fillColor(#CCCCCC) } } .width(100%) .height(52) .padding({ left: 16, right: 16 }) .backgroundColor(Color.White) .borderRadius(0) .onClick(() { if (this.onClick) { this.onClick() } }) } }InfoRow 特性属性类型默认值说明labelstring‘’左侧标签文本valuestring‘’右侧值文本iconResourceStrundefined左侧图标showArrowbooleantrue是否显示右侧箭头onClickcallbackundefined点击回调使用方式InfoRow({ label: 开发者, value: HarmonyOS Team, icon: $r(app.media.icon_developer), showArrow: false }) InfoRow({ label: 隐私政策, value: , showArrow: true, onClick: () this.openPrivacyPolicy() })3.2 信息数据模型// model/InfoItem.ets export interface InfoItem { label: string value: string icon?: ResourceStr showArrow: boolean action?: () void } // 获取信息列表 export function getInfoItems(): InfoItem[] { return [ { label: 开发者, value: HarmonyOS 开发团队, showArrow: false }, { label: 应用版本, value: v1.0.0 (Build 2025.01), showArrow: false }, { label: 更新时间, value: 2025年1月15日, showArrow: false }, { label: 运行环境, value: HarmonyOS NEXT, showArrow: false }, { label: 联系我们, value: supportharmonyos.com, showArrow: true }, { label: 隐私政策, value: , showArrow: true }, { label: 用户协议, value: , showArrow: true }, { label: 开源许可, value: , showArrow: true }, { label: 评分反馈, value: , showArrow: true }, { label: 分享应用, value: , showArrow: true } ] }3.3 Grid 网格布局实现Grid 是 ArkTS 提供的网格布局容器支持指定列数、行数、间距等属性// components/FeatureGrid.ets Component export struct FeatureGrid { Prop items: FeatureItemModel[] [] private onItemClick?: (index: number) void build() { Grid() { ForEach(this.items, (item: FeatureItemModel, index: number) { GridItem() { FeatureItem({ item: item, onClick: () { if (this.onItemClick) { this.onItemClick(index) } } }) } }) } .columnsTemplate(1fr 1fr 1fr) // 3 列等宽 .rowsTemplate(1fr 1fr 1fr) // 3 行实际会自动扩展 .columnsGap(12) // 列间距 .rowsGap(12) // 行间距 .padding(16) .width(100%) .backgroundColor(Color.White) .borderRadius(12) .margin({ top: 16, left: 16, right: 16 }) } }Grid 关键属性详解属性语法说明示例效果columnsTemplate1fr 1fr 1fr3 列等比例宽度三等分columnsTemplate100px 1fr 2fr固定弹性混合第一列 100pxcolumnsGapnumber列间距12vp 间距rowsGapnumber行间距12vp 间距rowsTemplateauto auto auto自适应行高内容决定高度3.4 FeatureItem 功能项组件每个网格项包含图标、标题和描述// components/FeatureItem.ets Component export struct FeatureItem { Prop item: FeatureItemModel private onClick?: () void build() { Column({ space: 6 }) { // 图标容器 Stack() { Circle({ width: 48, height: 48 }) .fill(this.item.color) .opacity(0.1) Image(this.item.icon) .width(24) .height(24) .fillColor(this.item.color) } .width(48) .height(48) // 标题 Text(this.item.title) .fontSize(13) .fontColor(#333333) .fontWeight(FontWeight.Medium) .lineHeight(18) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) // 描述 Text(this.item.description) .fontSize(11) .fontColor(#999999) .lineHeight(15) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width(100%) .padding(8) .alignItems(HorizontalAlign.Center) .borderRadius(8) .onClick(() { if (this.onClick) { this.onClick() } }) } }3.5 功能项数据模型 —— 30 个功能// model/FeatureItemData.ets export interface FeatureItemModel { id: number title: string description: string icon: ResourceStr color: Color } export function generateFeatures(): FeatureItemModel[] { const features: FeatureItemModel[] [] const configs [ { title: 笔记, desc: 快速记录, color: Color.Blue }, { title: 日历, desc: 日程管理, color: Color.Red }, { title: 相册, desc: 照片浏览, color: Color.Pink }, { title: 音乐, desc: 在线播放, color: Color.Purple }, { title: 视频, desc: 高清播放, color: Color.Orange }, { title: 地图, desc: 导航出行, color: Color.Green }, { title: 天气, desc: 实时预报, color: Color.Cyan }, { title: 闹钟, desc: 定时提醒, color: Color.Brown }, { title: 计算器, desc: 数学运算, color: Color.Grey }, { title: 相机, desc: 拍照摄像, color: Color.Blue }, { title: 通讯录, desc: 联系人, color: Color.Red }, { title: 短信, desc: 消息收发, color: Color.Green }, { title: 设置, desc: 系统配置, color: Color.Grey }, { title: 文件, desc: 文件管理, color: Color.Orange }, { title: 浏览器, desc: 网页浏览, color: Color.Blue }, { title: 邮件, desc: 邮件收发, color: Color.Purple }, { title: 时钟, desc: 世界时间, color: Color.Cyan }, { title: 录音, desc: 语音录制, color: Color.Red }, { title: 钱包, desc: 电子支付, color: Color.Orange }, { title: 健康, desc: 运动记录, color: Color.Green }, { title: 教育, desc: 在线学习, color: Color.Blue }, { title: 游戏, desc: 休闲娱乐, color: Color.Pink }, { title: 阅读, desc: 电子书, color: Color.Brown }, { title: 电台, desc: 音频直播, color: Color.Purple }, { title: 购物, desc: 在线商城, color: Color.Red }, { title: 外卖, desc: 餐饮外卖, color: Color.Orange }, { title: 运动, desc: 健身记录, color: Color.Green }, { title: 翻译, desc: 多语言, color: Color.Blue }, { title: 词典, desc: 单词查询, color: Color.Cyan }, { title: 工具箱, desc: 实用工具, color: Color.Grey } ] configs.forEach((cfg, index) { features.push({ id: index 1, title: cfg.title, description: cfg.desc, icon: $r(app.media.icon_${index 1}), color: cfg.color }) }) return features }3.6 主页面整合// pages/AboutPage.ets import { InfoRow } from ../components/InfoRow import { FeatureGrid } from ../components/FeatureGrid import { FeatureItemModel, generateFeatures } from ../model/FeatureItemData import { InfoItem, getInfoItems } from ../model/InfoItem Entry Component struct AboutPage { State infoItems: InfoItem[] getInfoItems() State featureItems: FeatureItemModel[] generateFeatures() build() { Scroll() { Column() { // 应用头部 Stack() { // 渐变背景 Rect() .width(100%) .height(200) .fillLinearGradient({ direction: GradientDirection.Bottom, colors: [ { color: #667eea, offset: 0 }, { color: #764ba2, offset: 1 } ] }) } .width(100%) .height(200) // 应用图标和名称 Column({ space: 8 }) { Image($r(app.media.app_logo)) .width(80) .height(80) .borderRadius(20) .margin({ top: -40 }) Text(HarmonyOS 应用中心) .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) Text(v1.0.0 · 探索无限可能) .fontSize(13) .fontColor(#888888) } .width(100%) .alignItems(HorizontalAlign.Center) .margin({ bottom: 24 }) // 信息区域 Column({ space: 0 }) { Text(应用信息) .fontSize(16) .fontWeight(FontWeight.Medium) .width(100%) .padding({ left: 16, bottom: 8 }) Column({ space: 0 }) { ForEach(this.infoItems, (item: InfoItem) { InfoRow({ label: item.label, value: item.value, icon: item.icon, showArrow: item.showArrow, onClick: item.action }) // 分割线最后一项不显示 if (item ! this.infoItems[this.infoItems.length - 1]) { Divider() .height(1) .color(#F0F0F0) .width(92%) .margin({ left: 16 }) } }) } .backgroundColor(Color.White) .borderRadius(12) .width(92%) .margin({ left: 4%, right: 4% }) } .width(100%) // 功能网格区域 Column({ space: 8 }) { Text(全部功能) .fontSize(16) .fontWeight(FontWeight.Medium) .width(100%) .padding({ left: 16, top: 24, bottom: 4 }) Text(共 ${this.featureItems.length} 项功能) .fontSize(12) .fontColor(#AAAAAA) .width(100%) .padding({ left: 16 }) // 3 列网格 Grid() { ForEach(this.featureItems, (item: FeatureItemModel, index: number) { GridItem() { FeatureItem({ item: item, onClick: () { console.info(点击了功能${item.title}) } }) } }, (item: FeatureItemModel) item.id.toString()) } .columnsTemplate(1fr 1fr 1fr) .columnsGap(8) .rowsGap(8) .width(94%) .margin({ left: 3%, right: 3% }) .backgroundColor(Color.White) .borderRadius(12) .padding(12) } .width(100%) // 底部版权 Text(版权所有 © 2025 HarmonyOS 开发团队) .fontSize(12) .fontColor(#BBBBBB) .width(100%) .textAlign(TextAlign.Center) .margin({ top: 32, bottom: 48 }) } .width(100%) .backgroundColor(#F5F6FA) } .width(100%) .height(100%) .backgroundColor(#F5F6FA) } }四、HarmonyOS 特性深度解析4.1 Grid 布局详解Grid是 ArkTS 中最强大的布局容器之一适用于展示网格状数据。columnsTemplate 语法1fr 1fr 1fr → 三列等宽 repeat(3, 1fr) → 同上使用 repeat 函数 100px 1fr 2fr → 第一列固定 100px后两列弹性分配 auto auto → 两列自适应多列适配// 响应式列数 StorageProp(currentBreakpoint) currentBreakpoint: string sm getColumnsTemplate(): string { switch (this.currentBreakpoint) { case sm: return 1fr 1fr // 小屏 2 列 case md: return 1fr 1fr 1fr // 中屏 3 列 case lg: return 1fr 1fr 1fr 1fr // 大屏 4 列 default: return 1fr 1fr 1fr } }4.2 Stack 层叠与渐变背景使用Stack结合fillLinearGradient实现渐变背景Stack() { Rect() .width(100%) .height(200) .fillLinearGradient({ direction: GradientDirection.Bottom, colors: [ { color: #667eea, offset: 0 }, { color: #764ba2, offset: 1 } ] }) }渐变方向支持方向效果GradientDirection.Left从左到右GradientDirection.Right从右到左GradientDirection.Top从上到下GradientDirection.Bottom从下到上GradientDirection.LeftTop从左上到右下GradientDirection.RightBottom从右上到左下4.3 Scroll 与 Column 组合关于页面内容通常超出屏幕高度需要使用Scroll包裹Scroll() { Column() { // 头部 // 信息行 // 功能网格 // 版权信息 } .width(100%) }Scroll 最佳实践内部 Column 不要设置固定高度使用.scrollBar(BarState.Off)隐藏滚动条以获得更干净的视觉使用.edgeEffect(EdgeEffect.Spring)提供弹性滚动效果4.4 资源引用ArkTS 使用$r()函数引用资源文件Image($r(app.media.app_logo)) // 图片资源 Image($r(app.media.icon_1)) // 带编号的资源 Text($r(app.string.app_name)) // 字符串资源 Color($r(app.color.primary)) // 颜色资源资源命名规范使用小写字母和下划线按模块分组如icon_note,icon_calendar避免使用中文命名五、UI/UX 设计要点5.1 视觉层次设计渐变头部200px ← 强烈的视觉冲击 应用图标80x80 ← 品牌识别 应用名称22px Bold ← 主要信息 信息行区域 ← 功能性信息 分割线 ← 视觉分隔 功能网格3列 ← 主要内容区 图标 标题 描述 ← 信息密度适中 底部版权 ← 次要信息5.2 色彩搭配渐变头部紫色到蓝色渐变#667eea→#764ba2传递科技感功能图标每种功能使用不同颜色蓝、红、绿、橙等背景色浅灰#F5F6FA让白色卡片区域更突出文字层级主标题#1a1a1a副文本#333辅助#999次要#BBB5.3 交互反馈点击涟漪为 InfoRow 和 FeatureItem 添加点击涟漪效果长按提示长按功能项显示功能描述动画过渡页面切换时提供滑动过渡动画六、最佳实践总结6.1 组件复用将InfoRow和FeatureItem抽取为独立组件可以在应用的设置页面、功能列表等场景中复用// 在设置页面复用 InfoRow InfoRow({ label: 语言, value: 简体中文, showArrow: true, onClick: () this.changeLanguage() })6.2 数据与界面分离功能项数据从模型中生成而非硬编码在 UI 中✅ 数据在FeatureItemData.ets中集中管理✅ 增删功能只需修改数据无需改动 UI 代码✅ 支持从服务器动态加载功能列表6.3 性能优化Grid 惰性渲染Grid组件支持虚拟化大量数据时只渲染可见项图片预加载使用Image组件的async属性控制加载策略避免过度绘制减少不必要的层叠和透明度叠加6.4 无障碍访问为图标添加accessibilityText描述使用语义化的标签文本确保所有功能都可点击操作七、扩展与演进7.1 功能搜索State searchKeyword: string get filteredFeatures(): FeatureItemModel[] { if (this.searchKeyword.length 0) return this.featureItems return this.featureItems.filter(item item.title.includes(this.searchKeyword) || item.description.includes(this.searchKeyword) ) }7.2 分类分组将 30 个功能分为「工具」「娱乐」「社交」「系统」等类别使用List的粘性分组头ListItemGroup({ header: this.createGroupHeader(工具) }) { ForEach(toolFeatures, ...) }7.3 在线配置从远程服务器获取功能列表支持动态更新async loadRemoteFeatures(): Promisevoid { try { const response await fetch(https://api.example.com/features) const data await response.json() this.featureItems data.map((item: any) ({ id: item.id, title: item.name, description: item.desc, icon: $r(item.iconRes), color: item.color })) } catch (e) { console.error(加载远程功能列表失败, e) } }7.4 暗黑模式适配使用Styles和Extend定义主题样式Styles function cardStyle() { .backgroundColor(Color.White) .borderRadius(12) } // 暗黑模式 Styles function cardStyleDark() { .backgroundColor(#1C1C1E) .borderRadius(12) }八、结语关于页面虽然只是一个展示型页面但它融合了 HarmonyOS ArkTS 多个核心技术点Grid 布局3 列网格展示 30 个功能项InfoRow 组件可复用的信息行展示Scroll 滚动处理超长内容页面Stack 层叠构建渐变头部组件化架构FeatureItem、InfoRow 等组件独立复用数据分离数据模型与 UI 展示解耦这些技术组合在一起构建了一个功能完备、代码清晰、易于维护的关于页面。无论是作为应用的「名片」还是作为功能导览的入口这样的设计都能给用户留下良好的第一印象。