UnicornDev-CSDN博客

原创【Flutter x HarmonyOS 6】魔方计时APP——记录页面的UI设计

,圆角背景（半透明填充色（主色边框。这种设计让选中态非常醒目，同时保持了整体的轻盈感。页面布局：使用Stack，Tab 切换 + 悬浮按钮。Tab 切换栏：包裹在卡片中，自定义指示器样式，支持显示/隐藏动画。分组记录视图：水平滚动的分组选择器 + 统计信息 + 记录列表。项目统计视图：项目选择器 + 多种统计卡片。通用卡片组件提供统一的视觉风格。记录列表项：罚时标记、水波纹点击效果。下一篇我们可以深入聊聊数据层的设计，以及如何实现这些统计功能。

2026-05-11 09:40:03 1178

原创【Flutter x HarmonyOS 6】魔方计时APP——计时逻辑实现

这篇我们只看了 LR Timer 中最核心的计时逻辑。整体可以总结成一句话：用TimerPhase管流程，用Stopwatch管真实时间，用Ticker管页面刷新。长按屏幕 → holding松手 → inspection 或 runningTicker 刷新 → 读取 Stopwatch.elapsed轻触屏幕 → 停止 Stopwatch，得到 resultController 回到 idle这样拆开以后，计时器本身其实并不复杂。

2026-05-06 23:15:05 1265

原创【HarmonyOS 6】底部悬浮导航的迷你栏适配（API23）

官方文档里对迷你栏的描述是：迷你栏是新增的自定义区域，跟页签栏高度相等且水平对齐，支持展开和折叠两种样式。简单理解就是：以前底部悬浮区域只有一个TabBar，也就是我们常见的“首页 / 发现 / 消息 / 我的”。音乐播放控制器。课程播放进度。当前任务状态。快捷操作入口。这块区域就是miniBar。它不是普通的Row手写悬浮层，而是HdsTabs悬浮背景。渐变蒙层。沉浸光感材质。折叠/展开动效。点击触发展开或收起。

2026-05-04 00:02:37 1503

原创【HarmonyOS 6】底部悬浮导航的沉浸光感适配（API23）

沉浸光感是 HarmonyOS 6.1.0(23) 引入的一种系统级材质效果，它能让 UI 组件与底层内容产生"毛玻璃 + 光影渗透"的高级视觉体验。对于底部悬浮导航栏，通过的参数即可开启。

2026-05-01 13:44:19 1341

原创【HarmonyOS 6】设置页面 UI 设计

设置页面是应用的"控制中心"，良好的设计能显著提升用户体验。功能模块说明技术亮点🎵音量调节0-100% 滑动调节Slider 组件 + 实时预览🔊语音开关控制语音指导播放Toggle 组件 + 状态同步🎯挑战难度5/10/15/20 次可选按钮组 + 选中状态管理📱侧边按钮左右按钮显示模式配置条件渲染 + 单选卡片⚠️数据管理举报反馈与数据清除对话框 + 数据持久化原则说明实践示例卡片式布局每个设置项独立成卡24dp 内边距 + 12dp 圆角视觉层级。

2026-04-27 09:17:17 1459

原创【HarmonyOS 6】基于API23的底部悬浮导航

之前我们讲了如何在API22里面，实现一个简易的悬浮导航栏。但是在API23中，官方给了更为便捷的方案。

2026-04-23 22:38:08 1451

原创【HarmonyOS 6】练习记录页面 UI 设计

统计概览卡片：连续练习天数、获得成就数、最长连续记录练习日历：30天打卡视图，一眼看出练习频次成就徽章：已解锁和未解锁的成就列表练习详情：最近有记录的日期详细数据。

2026-04-20 22:35:23 1494

原创【HarmonyOS 6】鸿蒙原生应用智能体接入

本文中的代码全部来自项目现有实现，核心逻辑集中在。

2026-04-13 23:33:27 1534 1

原创【HarmonyOS 6】时间管理APP：时光重塑页面布局设计

时光重塑页面（SimulationPage）是一个典型的多功能交互页面三层条件渲染：加载态 / 错误态 / 主内容双视图切换：原始数据 ↔ 重塑后固定底部按钮栏：与滚动内容分离嵌套对话框：CustomDialog 承载表单编辑整体采用 Column 垂直布局，通过控制滚动区域自适应。

2026-04-06 22:52:04 1321

原创【HarmonyOS 6】使用说明功能：浮动按钮、弹窗与偏好设置

在热力图页面（HeatmapPage）中，使用说明功能由三部分内嵌式使用说明面板— 首次进入或开启常驻时，在网格上方展开的引导卡片浮动帮助按钮— 面板隐藏后出现在右上角的圆形悬浮按钮AlertDialog 弹窗— 点击?按钮后弹出的详细帮助对话框showGuide（控制面板显隐）和（控制是否常驻）。同时利用 PreferencesManager 将用户选择持久化到本地。@State showGuide: boolean = false // 是否显示内嵌面板。

2026-04-02 23:48:00 1542

原创【HarmonyOS 6】空状态页面布局设计

时间洞察页面需要至少 7 天的数据才能进行分析。视觉图标吸引注意当前状态说明（已记录/还需天数）进度可视化操作引导提示。

2026-03-30 23:31:33 1381 1

原创【HarmonyOS 6】今日统计卡片实战：运动记录数据概览

Row + layoutWeight 实现左右两列指标卡片式背景与圆角增强视觉聚焦空状态提升体验，有记录时自然过渡到列表掌握这个案例后，你可以迁移到饮水、睡眠、打卡等模块，快速搭建可视化的日统计卡片。

2026-03-26 23:36:56 1555

原创【HarmonyOS 6】活动标签管理页面实现

标签列表展示：区分预设标签和自定义标签新增标签：包含名称输入、颜色选择、评分开关删除标签：支持删除数据或转移数据两种方式。

2026-03-23 22:18:35 1789

原创【HarmonyOS 6】个人中心数据可视化实战

菜单入口触发弹窗显示周/月切换控制数据周期环形进度展示综合评分线性进度展示分项平均分数据趋势折线图日历高亮评分等级标签。

2026-03-16 22:17:35 1632

原创【HarmonyOS 6】底部导航实战：Tabs 与玻璃导航栏联动

Tabs 作为内容容器自定义 TabBar 文本样式玻璃拟态底部导航栏使用状态联动保证导航高亮一致掌握这个案例后，你可以轻松扩展为电商首页、课程导航、任务面板等场景。

2026-03-12 22:47:05 1124 1

原创【HarmonyOS 6】星级评分实战：打造直观的评价组件

/ 当前评分，默认 3 分使用 ForEach 渲染星星数组，代码简洁通过 @State 管理评分状态点击事件更新评分，UI 自动刷新三元运算符实现实心/空心星星切换数组映射实现评分文字描述FlexAlign.SpaceEvenly 实现均匀布局星级评分是最经典的交互组件之一，掌握这个案例后，你可以轻松实现商品评价、用户反馈、满意度调查等各种评分场景。

2026-03-09 21:23:59 1518

原创【HarmonyOS 6】打卡列表实战：复选框与列表的完美结合

/ 打卡项列表// 已完成数量使用 @State 装饰器确保状态变化时 UI 自动更新。Checkbox 组件的基本用法和属性配置列表项状态管理的核心逻辑（创建新数组触发更新）完成/未完成状态的视觉区分（透明度、背景色）自动排序算法（未完成在前，已完成在后）进度统计与显示整行可点击的交互优化掌握这些技巧后，你可以轻松实现各种带复选框的列表场景，如待办事项、任务清单、多选列表等。

2026-03-06 21:08:11 1402

原创【HarmonyOS 6】卡片布局实战：打造精美的信息展示界面

卡片（Card）是移动应用中最常用的模块。它将相关信息组织在一个独立的容器中，通过圆角、阴影、背景色等各种各样的视觉元素，营造出层次分明、易于浏览的界面效果。在本文中，我们将通过健康管理应用的实际案例，展示如何在HarmonyOS应用中实现各种类型的卡片布局。从简单的数据展示卡片，到复杂的评分卡片，再到快捷入口卡片，你将学会如何设计和实现专业的卡片界面。已经了解 ArkTS 基础语法的初学者卡片的基本结构与样式设计不同类型卡片的布局实现响应式卡片设计技巧卡片间距与对齐方式。

2026-03-02 23:32:46 1662

原创【HarmonyOS 6】悬浮按钮实战：FAB 的设计与定位

悬浮操作按钮（Floating Action Button，简称 FAB），它悬浮在页面内容之上，用于展示应用中最主要的操作。FAB 通常是一个圆形按钮，带有阴影效果，固定在屏幕的某个位置，方便用户快速触达核心功能。在移动应用中，FAB 常用于"添加"、“编辑”、"分享"等主要操作。本文将通过一个实际案例——健康管理应用的运动记录添加功能，带你深入理解如何在HarmonyOS 6应用中实现一个优雅的悬浮按钮。已经了解 ArkTS 基础语法的初学者悬浮按钮的设计原则与视觉规范。

2026-03-02 08:41:24 1593

原创【HarmonyOS 6】输入框实战：表单设计与数据验证

在移动应用开发中，表单输入是用户与应用交互的重要方式。无论是注册登录、添加数据、还是编辑信息，都离不开输入框组件。一个设计良好的输入框不仅要美观易用，还要具备完善的验证机制，确保用户输入的数据符合要求。本文将通过一个实际案例——健康管理应用的运动类型添加功能，带你深入理解 TextInput 组件的使用方法和表单设计技巧。已经了解基础语法的初学者TextInput 组件的基础用法和属性配置输入验证与字数限制的实现输入框样式设计与用户体验优化。

2026-02-26 22:45:43 1494

原创【HarmonyOS 6】时间选择器实战：优雅的时间输入设计

在移动应用开发中，时间输入是一个非常常见的需求。无论是设置闹钟、记录睡眠时间、预约服务，还是填写表单，都需要用户输入时间。传统的键盘输入方式虽然精确，但操作繁琐且容易出错。而TimePicker 组件，配合快捷按钮的设计，可以让用户快速、准确地选择时间，大大提升用户体验。本文将通过一个实际案例——健康管理应用的睡眠记录功能，带你深入理解 TimePicker 组件的使用方法和时间输入的交互设计技巧。本文适合已经了解 ArkTS 基础语法的初学者阅读。TimePicker 组件的基础用法和属性配置。

2026-02-24 22:53:38 1813

2503_94458334的博客