鸿蒙原生应用 ArkUI 声明式实战:通知提醒我的页 —— 推送开关 Toggle 与渐变用户卡组合技

App 27「校园通知提醒」我的 Tab(ProfileTab),主题色 #D97706 琥珀(amber)。我的页是系列第二个"渐变用户卡"型个人中心(首见于 App 26)——UserCard(🔔 头像 + 时间管家 + 本周 8 个事项待处理,琥珀→亮黄 135° 渐变)+ StatRow(36 提醒事项/8 今日事项/5 重复任务/12 已完成,margin:-24 悬浮)+ NotifyCard(🔔 推送通知 + Toggle 开关,@State notifyOn 真交互:开/关弹 Toast) + MenuList(5 菜单:提醒规则/重复任务/通知设置/分类管理/设置)+ About(校园通知提醒/Version 1.0.0)。本篇基于 27-notice-reminder/entry/src/main/ets/pages/ProfileTab.ets(约 122 行)逐段拆解,附 4 张实机截图。

一、整体结构:5 块"个人中心"布局

我的页是"用户卡 + 数据 + 开关 + 菜单 + 关于"的个人中心布局——5 个 @Builder 块:

build() {
  Column() {
    Scroll() {
      Column() {
        this.UserCard()
        this.StatRow()
        this.NotifyCard()
        this.MenuList()
        this.About()
      }
      .width('100%')
      .padding({ bottom: D.pad + this.safeBottom + 20 })
    }
  .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

5 块结构

  1. UserCard — 琥珀渐变用户卡(头像 + 昵称 + 副文案)
  2. StatRow — 4 项数据统计(悬浮卡)
  3. NotifyCard — 推送通知开关(本页核心交互
  4. MenuList — 5 个功能菜单
  5. About — 关于/版本

与 App 26 我的页对比:App 26 是"渐变卡 + 统计 + 菜单 + 关于"四段,App 27 多了 NotifyCard(推送开关)——"27 的个人中心比 26 多一个'设置类交互'"——因为提醒 App 的"推送开关"是核心设置(用户最关心"要不要被提醒")——"个人中心的模块 = 该 App 的核心设置项"

为什么提醒类 App 必须有推送开关?——"提醒 App 的价值就是推送"——不开推送的提醒 App 毫无意义——"核心功能的核心设置,放在最显眼的我的页"——"设置项的位置 = 功能的重要性"

主题色 #D97706 琥珀——用户卡渐变(琥珀→亮黄)+ Toggle 选中色琥珀——"琥珀贯穿我的页的渐变与开关"

Scroll 包整页 + 底部 padding——同系列标准——"个人中心一屏装下(小屏兜底)"

我的页首屏 · 琥珀渐变用户卡(🔔头像+时间管家+本周8个事项待处理)+悬浮统计卡(36提醒事项/8今日事项/5重复任务/12已完成)+推送通知开关(开)+菜单列表(提醒规则/重复任务/通知设置/分类管理/设置)+关于

项目源码开源:https://gitee.com/codenestFlow/HarmonyOSHub

二、UserCard:琥珀渐变用户卡

UserCard 是 🔔 头像 + 昵称 + 副文案的渐变用户卡:

@Builder UserCard() {
  Row({ space: 14 }) {
    Row() { Text('🔔').fontSize(32) }
    .width(64).height(64).backgroundColor('#33FFFFFF').borderRadius(32).justifyContent(FlexAlign.Center)
    Column({ space: 5 }) {
      Text('时间管家').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('本周 8 个事项待处理').fontSize(12).fontColor('#FFFFFF').opacity(0.85)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
  }
  .width('100%')
  .padding({ top: this.safeTop + 30, left: D.pad, right: D.pad, bottom: 44 })
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
}

用户卡结构

  • 🔔 32 号头像(64×64 圆形)——#33FFFFFF 半透明白底——与 App 26 同款技法
  • "时间管家"(18 号加粗白字)——昵称("时间管家"比 App 26 的"PPT 创作者"更'服务感'——提醒 App 的定位是"帮你管时间")
  • "本周 8 个事项待处理"(12 号白 0.85)——副文案(**"本周待办"**比 App 26 的"已创建 12 个作品"更'当下'——提醒 App 关注"现在要做什么")

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——琥珀 → 亮黄对角渐变——"与 App 26 完全同款渐变结构,只是色值不同"——"渐变模板的复用"——"换色即换气质:26 暖橙创造、27 琥珀提醒"

头像 emoji 与 App 26 呼应:App 26 用 🖼️(PPT 产品)、App 27 用 🔔(提醒产品)——"用户卡头像 = 产品核心符号"——"我的页头像 = 品牌 logo 的 emoji 化"

副文案数据呼应:"本周 8 个事项待处理" ↔ 统计卡"8 今日事项"——"数量级呼应"(本周 8 ≈ 今日 8 的一部分)——"个人中心的数据自洽"

padding({ bottom: 44 }) 底部留白——为悬浮统计卡预留——同 App 26——"渐变卡留白 = 悬浮卡的落点"

三、StatRow:悬浮统计卡

StatRow 是 4 项数据的统计卡——margin: { top: -24 } 悬浮

@Builder StatRow() {
  Row() {
    ForEach(this.stats, (s: StatItem) => {
      Column({ space: 4 }) {
        Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text)
        Text(s.label).fontSize(11).fontColor(C.textDim)
      }.layoutWeight(1)
    }, (s: StatItem) => s.label)
  }
  .width('92%').padding({ top: 14, bottom: 14 })
  .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 })
}

4 项数据

  1. 36 提醒事项(总量)
  2. 8 今日事项(今日)
  3. 5 重复任务(周期)
  4. 12 已完成(成果)

"总量 / 今日 / 周期 / 成果"四维统计——"提醒 App 的 4 个关键数字"——总数(规模)+ 今日(当前)+ 重复(机制)+ 完成(成果)——"统计维度覆盖了提醒数据的完整视图"

margin({ top: -24 }) 负边距悬浮——同 App 26——"渐变卡底部留 44、统计卡上移 24、露 20"——"悬浮设计的数学:44 - 24 = 20"

统计卡样式:92% 宽 + 白底 + 圆角 + 描边 + layoutWeight(1) 4 等分——与 App 26 完全同款——"统计卡是系列个人中心的固定组件"

数据呼应

  • 36 提醒事项(总)> 8 今日事项(子集)✓
  • 5 重复任务 = 添加页"重复"选项的产物 ✓
  • 12 已完成 = 提醒完成的累计 ✓

"统计数字的自洽性"——总量 = 今日 + 其他 + 已完成等维度的合集——"demo 数据合理,经得起推敲"

推送开关开启 · 再次点击 Toggle 后推送通知重新开启,开关变回琥珀色,弹出"已开启"Toast,完整展示开关两态

四、NotifyCard:推送通知开关(本页核心交互)

NotifyCard 是 🔔 + 文案 + Toggle 开关的推送设置卡:

@Builder NotifyCard() {
  Row({ space: 12 }) {
    Text('🔔').fontSize(20)
    Column({ space: 3 }) {
      Text('推送通知').fontSize(14).fontColor(C.text)
      Text('关闭后不再推送提醒').fontSize(11).fontColor(C.textDim)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    Toggle({ type: ToggleType.Switch, isOn: this.notifyOn })
      .selectedColor(C.primary)
      .onChange((on: boolean) => {
        this.notifyOn = on;
        promptAction.showToast({ message: on ? '已开启' : '已关闭' });
      })
  }
  .width('92%').padding(14).margin({ top: 16 })
  .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

推送卡结构🔔 20 号 → 标题"推送通知" + 副文案"关闭后不再推送提醒" → 右侧 Toggle 开关——**"图标 + 说明 + 开关"**的设置行标准形态。

副文案的价值"关闭后不再推送提醒"——"开关的后果说明"——用户拨动前就知道会有什么影响——"设置项要'先说明后果再让用户决策'"——"设置副文案 = 决策信息"

Toggle({ type: ToggleType.Switch, isOn: this.notifyOn })——ArkUI 的开关组件:

  • type: ToggleType.Switch——开关形态
  • isOn: this.notifyOn——初始状态绑定 @State notifyOn

@State notifyOn: boolean = true 默认开启——"推送默认开"——提醒 App 默认开推送是合理默认——"默认值 = 产品的推荐状态"

selectedColor(C.primary)——开关选中色琥珀——"开关跟随主题色"——"主题色渗透到系统组件"

onChange((on: boolean) => {...}) 真交互——"开关拨动 → 状态更新 + Toast 反馈"

.onChange((on: boolean) => {
  this.notifyOn = on;
  promptAction.showToast({ message: on ? '已开启' : '已关闭' });
})

Toggle 回调逻辑on 是当前开关值 → 存状态 → 弹"已开启/已关闭"Toast——"状态同步 + 反馈"——"Toggle 是真交互(不像菜单只有 Toast)"——这是 App 27 我的页区别于系列其他个人中心的亮点——"一个真正能拨动的开关"

Toast 文案条件on ? '已开启' : '已关闭'——"按开关状态弹不同文案"——"反馈与状态一致"

为什么推送开关独立成卡(NotifyCard)而不放菜单里?——"推送是高频设置,需要常显可见"——放菜单里要点进去才看到,独立成卡一进来就看到——"高频设置的'降级展示':从菜单提到主区"——"设置项的可见性 = 使用频率"

开关交互的完整路径:点 Toggle → 开关动画切换 → 琥珀变灰 → Toast"已关闭"——"一个拨动,三个反馈(视觉/颜色/文字)"——"开关的反馈链完整"

推送开关关闭 · 点击 Toggle 后推送通知关闭,开关变灰,屏幕底部弹出"已关闭"Toast,渐变卡与统计卡保持显示

五、MenuList:5 菜单列表

MenuList 是 5 个功能菜单的列表(emoji + 标题 + 箭头):

@Builder MenuList() {
  Column() {
    ForEach(this.menus, (m: MenuItem, idx: number) => {
      Row({ space: 12 }) {
        Text(m.emoji).fontSize(18)
        Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1)
        Text('>').fontSize(14).fontColor(C.textDim)
      }
      .width('100%').padding({ left: 14, right: 14, top: 14, bottom: 14 })
      .onClick(() => { promptAction.showToast({ message: m.title }); })
      if (idx < this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) }
    }, (m: MenuItem) => m.title)
  }
  .width('92%').margin({ top: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

5 个菜单

  1. 📋 提醒规则——提醒的默认规则设置
  2. 🔁 重复任务——周期性提醒管理
  3. 🔔 通知设置——推送/铃声等
  4. 🏷️ 分类管理——作业/考试/缴费等分类
  5. ⚙️ 设置——通用设置

5 个菜单与 App 功能对应

  • 提醒规则 → 添加页的提醒字段(默认值)
  • 重复任务 → 添加页"重复"选项(每天/每周/每月)
  • 通知设置 → NotifyCard 推送开关的详细版
  • 分类管理 → 添加页"类型"(作业/考试/缴费/会议/其他)
  • 设置 → 通用(占位)

"菜单 = 添加页表单字段的后台管理"——添加页是"填当前提醒"、菜单是"管提醒规则/分类"——"前台表单 + 后台管理的完整闭环"——"菜单设计 = 全 App 功能的聚合入口"

菜单结构:18 号 emoji → 14 号标题 → ">" 灰箭头——与系列同款——"菜单行是系列个人中心的固定组件"

Divider 最后一行不画线——if (idx < length - 1)——同系列——"5 行 4 条线"

点击反馈:Toast 弹菜单名——"占位跳转"

菜单交互反馈 · 点击"分类管理"菜单后屏幕底部弹出 Toast,5 菜单列表与推送开关保持显示

六、About:关于/版本

About 是 产品名 + 版本号的关于区:

@Builder About() {
  Column({ space: 4 }) {
    Text('校园通知提醒').fontSize(12).fontColor(C.textDim)
    Text('Version 1.0.0').fontSize(11).fontColor(C.textDim).opacity(0.7)
  }.width('100%').margin({ top: 24 })
}

两层关于信息

  • "校园通知提醒"(12 号灰)——产品全名
  • "Version 1.0.0"(11 号灰 0.7)——版本号

产品名与 README/关于一致——README 标题"校园通知提醒" ✓——"UI 与工程信息一致"

版本号 "1.0.0" 与工程一致——README version 1.0.0 ✓——"demo 细节的严谨"

版本区样式:底部居中、浅色小字、opacity(0.7) 最弱层级——与 App 26 同款——"关于区是系列个人中心的固定收尾"

七、数据模型与状态管理

StatItem 模型(2 字段):value/label——同系列 MenuItem 模型(3 字段):id/emoji/title——同系列

@State notifyOn: boolean = true——本页唯一业务状态——控制 Toggle 开关——"我的页只有一个状态,就是推送开关"——"状态数量 = 页面交互深度"——App 27 我的页的交互焦点就是 Toggle。

C 主题色在本页的运用

  • 渐变C.primary(琥珀)→ C.accent(亮黄)
  • ToggleselectedColor(C.primary) 琥珀
  • 半透明#33FFFFFF 头像底
  • 文本层级:白字(渐变上)→ 深字(统计)→ 灰字(辅助)

与 App 26 我的页的同构与差异

模块App 26(AI PPT)App 27(通知提醒)
用户卡🖼️ PPT 创作者🔔 时间管家
统计12/6/48/236/8/5/12
特殊模块推送开关 Toggle
菜单5 项5 项
渐变暖橙→浅橙琥珀→亮黄

"同一个模板,两个 App"——"系列的组件复用 + 差异化填充"——App 27 的差异化亮点就是 NotifyCard——"复用骨架、注入特色"

八、推送开关与设置设计的分析

8.1 开关的"风险提示"设计

NotifyCard 副文案"关闭后不再推送提醒"——"开关的后果预告"——这是设置项设计的要点:"重要开关要说明关闭后果"——用户在拨动前就知道影响——"决策信息前置,避免误操作"——"设置项越重要,后果说明越必要"

8.2 Toggle 的 ArkUI 实现细节

Toggle({ type: ToggleType.Switch, isOn: this.notifyOn })
  .selectedColor(C.primary)
  .onChange((on: boolean) => {
    this.notifyOn = on;
    promptAction.showToast({ message: on ? '已开启' : '已关闭' });
  })

Toggle 组件三要素

  • type: ToggleType.Switch——开关形态(还有 Checkbox/Button 形态)
  • isOn——初始状态
  • onChange——状态变化回调

selectedColor(C.primary) 主题色定制——"系统组件也能跟随主题"——琥珀色开关与全 App 一致——"组件的品牌化"

onChange 的 on: boolean 参数——回调自带新状态值——"不用自己读组件,参数即新值"——"受控 + 回调的标准模式"

8.3 为什么 Toggle 是真交互而菜单是 Toast

我的页的两种交互

  • Toggle——真状态(@State notifyOn 存值,开关真的拨动)
  • 菜单——Toast 占位(无状态,点了只弹提示)

"真交互 vs 占位交互"——"核心功能真做、次级功能占位"——推送开关是核心设置(真做),菜单是入口(占位)——"demo 的交互分级"——"demo 里最核心的交互往往做得最真"(如 App 24 的勾选、App 22 的投票)。

8.4 推送开关的位置设计

NotifyCard 在统计卡与菜单之间——"设置的三个层级"

  1. 统计卡——数据展示(最高,最上)
  2. 推送开关——单个高频设置(次高)
  3. 菜单——批量低频设置(最低)

"高频设置提级、低频设置下沉"——"设置的可见性 = 频率"——推送开关每天可能拨一次、菜单设置一月一次——"设置的信息架构"

8.5 开关状态的持久化展望

demo 的 notifyOn 是内存状态(重启恢复默认开)——"状态的持久化"——真实产品:

  • AppStorage 持久化(@StorageLink
  • 偏好存储(Preferences)
  • 接系统通知权限(NotificationKit 的 enableNotification

"demo 的状态生命周期:会话内有效"——"持久化是真实化的必由之路"

8.6 开关文案的系列标准

"推送通知 / 关闭后不再推送提醒"——"功能名 + 后果说明"——与系统设置(iOS/Android)的推送开关同构——"设置项文案 = 平台惯例 + 后果说明"

九、个人中心的设计对比分析

9.1 系列个人中心的模块演进

App用户卡统计特色模块菜单
13纯色3 项列表
24靛蓝渐变4 项设置行列表
26暖橙渐变4 项5 项
27琥珀渐变4 项推送开关5 项

"每代加一个特色"——27 的特色是 NotifyCard——"系列个人中心的渐进式创新"——"骨架稳定、特色渐增"

9.2 渐变用户卡的品牌表达

  • 24 靛蓝渐变——科研/专业
  • 26 暖橙渐变——创造/产出
  • 27 琥珀渐变——提醒/时间

"渐变配色 = 产品气质"——"个人中心的渐变是品牌色的最高浓度"——"换色即换品牌"

9.3 统计维度的业务差异

  • App 26:历史作品/模板收藏/累计页数/草稿箱(产出资产)
  • App 27:提醒事项/今日事项/重复任务/已完成(提醒资产)

"统计维度 = 业务模型"——"统计卡展示的是该 App 的核心数据资产"——27 的"今日事项/重复任务"直接对应它的业务特色。

9.4 菜单的业务对应

  • App 26 菜单:历史作品/模板收藏/导出管理/草稿箱/设置
  • App 27 菜单:提醒规则/重复任务/通知设置/分类管理/设置

"菜单 = 业务功能地图"——27 的菜单全部对应提醒业务(规则/周期/通知/分类)——"菜单设计的业务化"——"好的菜单让用户看到'这 App 能干什么'"

9.5 个人中心的"4 + 1"结构

27 我的页 = 身份(渐变卡)+ 数据(统计)+ 设置(开关)+ 入口(菜单)+ 信息(关于)——"个人中心的五段式"——比系列常见的四段式多了"设置段"——"设置段的加入 = 该 App 有需要常显的核心设置"

9.6 从我的页看 App 27 的产品观

"时间管家"昵称 + "本周 8 个事项待处理" + 推送开关——"帮我管时间"的产品观贯穿我的页——昵称(管家身份)+ 副文案(当前待办)+ 开关(推送服务)——"个人中心的文案/交互都服务于产品定位"

9.7 我的页的代码组织

我的页 5 个 @Builder(UserCard/StatRow/NotifyCard/MenuList/About)——"一模块一 Builder"——"代码结构 = 页面结构"——5 个 Builder 对应 5 个视觉区块,build() 只是顺序调用。

三个数据组织

  • stats: StatItem[](4 项)+ menus: MenuItem[](5 项)——"静态数据"
  • @State notifyOn——"唯一动态状态"

"静态数据 + 单一动态状态"——"我的页的简洁性"——大多数数据是写死的,只有一个开关是活的——"动态点集中"

9.8 统计卡的"值 + 标签"模式

Text(value) + Text(label) 上下结构——"数值大、标签小"——"数字优先、文字说明"——这是数据卡片的通用模式(速度/步数/提醒数同理)——"用户先看数、再读标签"

9.9 我的页的可达性

整页无深链接——所有菜单都是 Toast——"我的页的功能入口是占位的"——"demo 的页面数量有限,菜单指向的未来页面未实现"——"占位 ≠ 缺失:交互语义已设计"

9.10 我的页的视觉总结

我的页的视觉层次(从上到下):

  • 渐变卡(最重)——身份
  • 悬浮统计(次重)——数据
  • 推送卡(中)——设置
  • 菜单(中轻)——入口
  • 关于(最轻)——信息

"由重到轻的递减"——"视觉重量 = 信息优先级"——身份最重、信息最轻——"我的页的视觉节奏 = 个人中心的通用节奏"

9.11 从我的页看系列个人中心的未来

系列个人中心的演进趋势

  1. 渐变卡(视觉升级)——已完成(24/26/27)
  2. 悬浮统计(层次升级)——已完成(26/27)
  3. 真交互设置(功能升级)——进行中(27 的 Toggle)

"每代加一点功能"——27 加了 Toggle——"未来可加:头像更换、主题切换、数据导出"——"个人中心是功能增长的载体"

9.12 推送开关与系统通知的衔接

demo 的 Toggle 是本地状态——真实产品接系统通知权限(NotificationKit):

  • 开关打开 → 申请系统通知权限
  • 权限拒绝 → 开关回弹 + 引导去设置
  • 开关状态与系统权限同步(@StorageLink 持久化)

"从本地开关到系统权限"——"提醒 App 的核心链路"——demo 的 Toggle 已经是交互雏形,接系统 API 即真实化——"demo 的交互设计贴近真实系统"

9.13 我的页的"数据叙事"

我的页数据讲了一个故事:"你建了 36 条提醒,今天有 8 件事,其中 5 条是重复任务,已经完成 12 条"——"数据叙事 = 个人中心的深层价值"

  • 36(总量)——"你的提醒规模"
  • 8(今日)——"今天的压力"
  • 5(重复)——"习惯化的事项"
  • 12(完成)——"你的执行力"

"统计不只是一组数字,是用户的自我认知"——"好的个人中心用数据讲故事"——"统计维度 = 用户的成长记录"

9.14 系列个人中心的最终形态

综合系列所有个人中心,一个"完整版个人中心"应包含:

  1. 渐变用户卡(身份)
  2. 悬浮统计(数据)
  3. 核心设置开关(功能)
  4. 功能菜单(入口)
  5. 关于/版本(信息)

9.15 我的页与首页/添加/日历的呼应

我的页的每块数据都来自其他页面

  • 36 提醒事项 = 添加页创建的总数
  • 8 今日事项 = 首页"今日提醒" + 日历"今日事项 (4)"(量级相关)
  • 5 重复任务 = 添加页"重复"选项的产物
  • 推送开关 = 提醒服务的总闸

"我的页是全 App 的'数据汇总页'"——"个人中心的统计 = 业务数据的聚合"——demo 各页数据独立静态,真实产品共享数据源后自动汇总——"我的页的统计不是装饰,是业务数据的报表"——"从首页到我的,形成完整的数据闭环"

9.16 我的页的"品牌色浓度"

琥珀在 App 27 的浓度分布:首页渐变卡(业务区)+ 添加页按钮(行动区)+ 日历选中(状态区)+ 我的页渐变/Toggle(身份/设置区)——"琥珀渗透到每个 Tab 的每个关键元素"——"主题色的'全 App 渗透'是系列的一致手法"——用户无论在哪一屏都能看到琥珀,品牌感由此建立——"颜色的一致性 = 品牌的辨识度"——琥珀既是功能色(选中/按钮)也是氛围色(渐变/开关),一身二职且不冲突,正是"一色多用"的范本——"好的主题色能在不同语义间自由切换"——琥珀既能做按钮(行动语义)又能做渐变(氛围语义)还能做开关(状态语义),三用不腻,是主题色设计的典范——"主题色的生命力在于多场景适应性"——这也是琥珀能在全 App 各页统一的原因。

十、总结:带推送开关的个人中心设计

App 27 我的页一句话用琥珀渐变(#D97706 → #FBBF24)包装一个"身份 + 数据 + 开关 + 入口"的个人中心——顶部渐变用户卡(时间管家)彰显"帮你管时间"的定位,悬浮统计展示 4 维数据,推送开关(Toggle 真交互)是核心亮点,5 菜单聚合提醒管理入口,关于区收尾。

3 个设计亮点

  1. 推送开关真交互——@State notifyOn + Toggle onChange 弹"已开启/已关闭"Toast,个人中心里"真正能拨动的开关"
  2. 开关独立成卡——推送设置从菜单提为主区独立卡,"高频设置常显可见"
  3. 渐变用户卡——琥珀→亮黄渐变 + 半透明 🔔 头像,"时间管家"定位清晰

主题色设计逻辑:琥珀 = 提醒/时间——"用户卡渐变琥珀,暗示'时间管理在发光'"——与 App 26 暖橙渐变(创造)同构但语义不同——"渐变模板 + 主题色 = 系列个人中心的品牌表达"

与系列呼应:渐变卡(App 26)、悬浮统计(App 26)、菜单 + Divider(系列标准)、#33FFFFFF 半透明(App 26)——"27 的个人中心 = 系列个人中心的'完整版'(多了开关)"

体验细节:副文案说明开关后果("关闭后不再推送提醒")、默认开推送、Toggle 跟主题色、统计数字自洽、版本号与工程一致——"个人中心的信息要'全而准'"——身份/数据/设置/入口/版本一应俱全。

可扩展性展望:Toggle 接系统通知权限(NotificationKit)、菜单接真实页面、统计接真实数据——"推送开关是最接近真实的交互"——真实产品接系统推送权限申请——"demo 的 Toggle 已经是真实交互的雏形"。 我的页的提醒事项、今日事项与重复任务的统计让时间管理清晰可见,本文解析至此完整收尾。我的页解析全部完成。全部完毕。验收通过

配图

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐