HarmonyOS开发实战：小分享-SettingsPage设置页——分组列表与退出按钮

前言设置页是用户管理 App 偏好和查看信息的核心页面通常采用分组列表形式。小分享 App 的 SettingsPage 使用嵌套 ForEach 渲染二维数组模拟分组效果。本篇讲解分组列表、嵌套 ForEach、退出按钮等。详细 API 可参考 HarmonyOS ForEach 官方文档。一、SettingsPage 完整代码import router from ohos.router; import { SettingsItem } from ../common/interfaces; Entry Component struct SettingsPage { private settingsItems: ArrayArraySettingsItem [ [ { icon: , label: 账号与安全, page: }, { icon: , label: 隐私设置, page: }, { icon: , label: 通知设置, page: }, { icon: , label: 通用设置, page: } ], [ { icon: , label: 清除缓存, value: 32.4MB, page: }, { icon: , label: 版本更新, value: V1.2.0, page: } ] ]; build() { Column() { Row() { Text(‹).fontSize(24).fontColor(#1A1A1A).onClick(() { router.back() }) Text(设置).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1).textAlign(TextAlign.Center) Blank() } .width(100%).padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White) Scroll() { Column({ space: 16 }) { ForEach(this.settingsItems, (group: ArraySettingsItem, groupIndex: number) { Column({ space: 0 }) { ForEach(group, (item: SettingsItem, index: number) { Row({ space: 12 }) { Text(item.icon).fontSize(20) Text(item.label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) if (item.value) { Text(item.value).fontSize(13).fontColor(#999999) } Text(›).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }).backgroundColor(Color.White) .onClick(() { if (item.page) { router.pushUrl({ url: item.page }) } }) if (index group.length - 1) { Divider().color(#F5F5F5).strokeWidth(0.5) } }, (item: SettingsItem, index: number) item.label) } .width(100%).borderRadius(12) }, (group: ArraySettingsItem, groupIndex: number) group_${groupIndex}) Button(退出登录).fontSize(16).fontColor(#F44336) .backgroundColor(Color.Transparent).width(100%).height(48).borderRadius(12).margin({ top: 20 }) } .width(100%).padding({ left: 16, right: 16, bottom: 20 }) } .layoutWeight(1) } .width(100%).height(100%).backgroundColor(#F5F5F5) } }二、二维数组分组private settingsItems: ArrayArraySettingsItem [ [ { icon: , label: 账号与安全, page: }, { icon: , label: 隐私设置, page: }, { icon: , label: 通知设置, page: }, { icon: , label: 通用设置, page: } ], [ { icon: , label: 清除缓存, value: 32.4MB, page: }, { icon: , label: 版本更新, value: V1.2.0, page: } ] ];三、嵌套 ForEach 渲染ForEach(this.settingsItems, (group: ArraySettingsItem, groupIndex: number) { Column({ space: 0 }) { ForEach(group, (item: SettingsItem, index: number) { // 设置项 if (index group.length - 1) { Divider().color(#F5F5F5).strokeWidth(0.5) } }, (item: SettingsItem, index: number) item.label) } .width(100%).borderRadius(12) }, (group: ArraySettingsItem, groupIndex: number) group_${groupIndex})四、退出按钮Button(退出登录).fontSize(16).fontColor(#F44336) .backgroundColor(Color.Transparent).width(100%).height(48).borderRadius(12).margin({ top: 20 })五、本文核心知识点5.1 设置页核心要点二维数组分组管理设置项嵌套 ForEach 渲染分组列表红色退出按钮5.2 实战开发要点分组之间用 Column space: 16 间隔组内用 Divider 分割可选字段 value 用 if 条件渲染附录设置页的完整实现细节1. 完整的页面布局结构Column (主容器背景 #F5F5F5) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回 │ ├─ Text(设置) 标题 │ └─ Blank() ├─ Scroll (可滚动内容区) - layoutWeight(1) │ └─ Column (space: 16) │ ├─ Column (设置组 1) - 白色卡片 │ │ ├─ Row (账号与安全) › │ │ ├─ Divider │ │ ├─ Row (隐私设置) › │ │ ├─ Divider │ │ ├─ Row (通知设置) › │ │ ├─ Divider │ │ └─ Row (通用设置) › │ ├─ Column (设置组 2) - 白色卡片 │ │ ├─ Row (清除缓存) 32.4MB › │ │ ├─ Divider │ │ └─ Row (版本更新) V1.2.0 › │ └─ Button (退出登录) - 红色 └─ (无底部导航栏)2. 嵌套 ForEach 的完整实现ForEach(this.settingsItems, (group: ArraySettingsItem, groupIndex: number) { Column({ space: 0 }) { ForEach(group, (item: SettingsItem, index: number) { Row({ space: 12 }) { Text(item.icon).fontSize(20) Text(item.label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) if (item.value) { Text(item.value).fontSize(13).fontColor(#999999) } Text(›).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }).backgroundColor(Color.White) .onClick(() { if (item.page) { router.pushUrl({ url: item.page }) } }) if (index group.length - 1) { Divider().color(#F5F5F5).strokeWidth(0.5) } }, (item: SettingsItem, index: number) item.label) } .width(100%).borderRadius(12) }, (group: ArraySettingsItem, groupIndex: number) group_${groupIndex})3. 退出按钮的实现Button(退出登录).fontSize(16).fontColor(#F44336) .backgroundColor(Color.Transparent).width(100%).height(48).borderRadius(12).margin({ top: 20 })4. SettingsItem 数据模型export interface SettingsItem { icon: string; label: string; value?: string; page: string; }5. 完整代码文件索引文件路径说明pages/SettingsPage.ets设置页面common/interfaces.etsSettingsItem 接口6. 本文涉及的所有 APIAPI/组件用途文档链接ForEach嵌套循环ForEachButton退出按钮ButtonDivider分割线DividerScroll可滚动容器Scrollrouter.back()返回RouterBlank()空白填充Blank7. 实现要点总结设置页的核心实现要点二维数组ArrayArraySettingsItem管理分组数据嵌套 ForEach外层遍历组内层遍历设置项条件渲染item.value存在时显示值红色退出按钮#F44336红色透明背景8. 总结本文详细讲解了 SettingsPage 设置页的完整实现涵盖二维数组分组、嵌套 ForEach 渲染、退出按钮等核心功能。相关资源HarmonyOS ForEach 官方文档ForEach ReferenceHarmonyOS Button 组件Button ReferenceHarmonyOS Divider 组件Divider ReferenceHarmonyOS Scroll 组件Scroll ComponentHarmonyOS Router 路由Router APIHarmonyOS Blank 组件Blank ComponentHarmonyOS Row 组件Row Component开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net本文涉及的所有 API 索引API类别用途Column布局容器垂直排列子组件Row布局容器水平排列子组件Text基础组件显示文本ForEach渲染控制循环渲染列表State装饰器组件内状态管理Builder装饰器封装可复用 UI 片段router.pushUrl路由页面跳转router.back路由返回上一页总结本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能并能够独立实现类似的页面功能。14. 页面功能总结功能模块实现方式核心组件分组列表二维数组 Array嵌套 ForEach设置项SettingsItem 接口Row Text Divider值显示条件渲染 if(item.value)Text 组件退出按钮Button 红色#F4433615. 完整的代码结构SettingsPage ├── Header 导航栏 ├── 设置组 1 (Column) │ ├── 账号与安全 (SettingRow) │ ├── Divider │ ├── 隐私设置 (SettingRow) │ ├── Divider │ ├── 通知设置 (SettingRow) │ ├── Divider │ └── 通用设置 (SettingRow) ├── 设置组 2 (Column) │ ├── 清除缓存 (SettingRow value) │ ├── Divider │ └── 版本更新 (SettingRow value) └── 退出登录 (Button)ProfilePage 个人中心MoreFunctionsPage 更多功能页MoreFunctionsPage 更多功能页ProfilePage 个人中心MoreFunctionsPage 更多功能页如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力