登录社区云,与社区用户共同成长
邀请您加入社区
页面真正发生样式变化的对象只有“HarmonyOS 字体排版预览”这一段文字。它同时承担示例内容和状态展示两项职责。用户拖动字号滑块时,首先看到的是文字尺寸变化;打开斜体时,看到的是字形倾斜;打开下划线时,看到的是文字装饰变化。由于示例文本始终保持不变,用户很容易把前后两次画面进行比较。固定示例文字还有一个好处:它避免了输入内容不同造成的干扰。如果每次输入的字符串长度都不同,用户很难判断变化来自字
这个页面有五个固定页状态,有六条固定列表项展示,有一个向后推进按钮和一个返回第一页的刷新按钮。页码不会小于一,也不会大于五;列表编号会覆盖 1–30 的连续范围;第五页通过灰色按钮和完成文字表达终点;刷新从任何页都回到第一组内容。它没有上一页入口,没有页码输入,没有直接选择某一页的按钮,没有筛选条件,也没有网络请求失败状态。它没有根据服务器返回的数据改变总页数,也没有把多页内容累积到一个无限列表里
通用文字识别,是通过拍照、扫描等光学输入方式,将各种票据、卡证、表格、报刊、书籍等印刷品文字转化为图像信息,再利用文字识别技术将图像信息转化为计算机等设备可以使用的字符信息的技术。该服务旨在为开发者提供图像信息转换为字符信息的能力,便于用户提取字符内容、屏幕坐标及外框。其具体能力规格如下:•支持的图片格式•支持的语言:简体中文、英文、日文、韩文、繁体中文。•文本长度:不超过 10000 字符。•字
bg: string;// 页面沥青黑底色// 卡片深棕黑底色// 胶囊与输入框底色// 主标题暖白// 副文本沙棕// 弱文本暗棕// 燃油橙主色// 深燃油橙(渐变深端)// 浅燃油橙点缀色// 金属银辅助色// 排队畅通绿// 排队拥堵/删除警示红// 分隔线暗棕// 底部 Tab 激活色// 弹窗遮罩色// 代码预览卡深底色这段代码定义了整个应用的颜色中枢。
这个表单页面的重点,不在于控件数量多,而在于它把一次填写过程拆成了几种清晰的状态:三个文本输入、一个互斥选项、一个可增减数值、一个同意开关和一条结果提示。用户通过输入和点击改变状态,页面用文字、颜色和数字变化把状态呈现出来。姓名、手机号和密码负责承载文本内容;手机号和密码在提交时分别接受最低长度要求;性别负责展示互斥选项;年龄负责展示加减和下限保护;协议负责提供一个必须主动确认的条件;重置负责把所
这个主题设置页面用一个开关、四个颜色选项和三个密度按钮,展示了一个完整而克制的 UI 状态闭环。用户先看到浅色主题、蓝色强调色和紧凑预览;切换深色模式后,页面整体明暗关系改变;选择其他颜色后,勾选标记和当前按钮颜色同步变化;切换密度后,预览卡片的留白随档位改变。真正值得学习的不是某一个颜色值,而是状态与视觉结果之间的对应关系。模式状态影响整体颜色,强调色状态影响重点元素,密度状态影响空间安排,三个
一个只有几个按钮和一张卡片的页面,也可以把多语言界面的核心问题讲清楚。语言按钮负责选择表达方式,消息按钮负责改变数据,卡片负责把标题、问候语、数量和日期放在同一个结果中。中文、英文和日文之间的差异,集中体现在文本内容、日期顺序、计数单位和复数规则上;按钮颜色又让当前选择始终可见。阅读这个页面时,最值得记住的不是某一句固定文案,而是“数据与表达分离”的思路。同一个数量可以在不同语言中使用不同句式,同
这个内存状态页面用很少的控件完成了一个清晰的交互闭环。启动时以 298 MB 作为中间状态;分配动作每次增加 42 MB,并受 512 MB 上限保护;回收动作每次减少 80 MB,并受 128 MB 下限保护;当数值超过 420 MB 时,数字和进度条变红,同时给出“内存压力较高,建议执行回收”的提示;回到阈值以下后,页面恢复蓝色和“内存使用正常”。底部日志始终说明最近一次操作,但不会积累历史记
这个性能工具面板的核心不是复杂功能,而是清晰的对应关系:启动入口对应启动耗时,渲染入口对应 FPS 与重绘提示,内存入口对应峰值与缓存,网络入口对应 P95 与缓存建议。四个按钮保持相同形态,当前项使用蓝色强调,结果卡片固定在下方,用户每点击一次就得到一条与当前方向相符的短反馈。它还用一个很小的状态模型完成了完整的交互闭环。初始页面给出等待选择的提示,点击之后显示具体结果;选中颜色随着选择变化,旧
页面呈现的是上架准备的可视化演示。它确实有标题、状态、进度、四项检查文字和一个点击入口,也确实会在点击后显示四项通过以及提交审核阶段。这些是用户可以直接观察到的功能。但页面并没有真实的应用资料表单、隐私文件解析、签名检查、兼容性测试、安全扫描、远程上传、审核查询或结果持久化。任何关于这些能力的描述,都只能作为页面文案所表达的流程概念,不能当成已经执行过的系统操作。把可见反馈和真实业务能力分开,是阅
四个设备按钮的文字都很接近,如果没有颜色反馈,用户点击后很难快速确认当前选择。页面使用两种背景色区分状态:被选中的按钮使用较深的蓝色,未选中的按钮使用浅蓝色。默认进入页面时,手机按钮就是深蓝色;点击其他按钮后,深蓝色会移动到新的选项上。这种颜色切换并不是装饰,而是状态反馈的一部分。按钮文字告诉用户“它代表什么”,颜色告诉用户“它是不是当前选择”。两种信息配合在一起,可以减少用户反复确认的成本。尤其
刚打开 HarmonyOS 工程时,AppScope、entry、resources、module.json5、build-profile.json5 很容易让人看懵。本文从一个最小工程出发,逐个说明这些目录和配置文件分别负责什么,以及日常开发真正需要重点关注哪些位置。
这张“今日专注”卡片用很少的内容展示了一个完整的状态反馈闭环:卡片有紧凑和放大两种展示形态,尺寸按钮负责切换形态,刷新按钮负责推进完成度和刷新次数,底部提示负责告诉用户当前操作记录。标题、百分比和目标说明按照清晰的优先级排列,深蓝卡片、浅色背景、蓝色按钮和青绿色刷新按钮共同建立了稳定的视觉层次。更重要的是,它把“桌面卡片预览”和“真实桌面卡片能力”区分开来。当前页面可以用于观察卡片内容、比例和交互
拆解 API 门禁、isAgentSupport、FunctionOptions、错误码和显式复制路径,并保留 queryText 自动交接真机失败的真实结论。
以最多三条候选、字段白名单、分段截断、正则脱敏、240 字上限和本机剪贴板为主线,构建隐私优先的数据流。
依据华为官方资料区分应用内智能体入口与系统级意图能力,说明本项目为何选择 FunctionComponent 及其平台门禁。
结合首页、匹配、发布和举报页面,拆解四类业务状态的互斥优先级、稳定骨架、恢复动作和禁用门禁。
从当前 ReportMedia 两层正式实现出发,解释用户照片、受控演示图和品类图标的完整策略,并诚实记录演示图已移除、加载失败回退仍待补。
通知页面的主体不是按钮,而是用户需要阅读的内容。当前两条卡片虽然固定,但它们展示了通知信息的三个基本维度。第一是标题。标题直接说明通知主题,“版本更新提醒”让用户知道它与版本变化有关,“订阅内容上新”让用户知道它与关注内容有关。标题采用粗体,用户快速滚动时也能先看到核心信息。第二是时间。第一条显示“刚刚”,第二条显示“10:30”。时间没有采用同一种文案,体现了通知列表中常见的相对时间和具体时间两
如果只有三个开关,用户需要逐项查看才能知道当前总体状态。绿色摘要把三个状态汇总成一个数字,形成页面的第二个信息入口。用户可以先看摘要判断整体,再根据需要回到具体卡片检查是哪一项被打开或关闭。摘要的计算规则很直接:相机打开计一项,麦克风打开计一项,位置打开计一项,三项相加得到当前已授权能力数。初始组合是相机关闭、麦克风关闭、位置开启,所以显示一项。打开相机后变为两项,打开麦克风后变为三项;关闭任何一
第一,主要动作要有足够的视觉重量。这个页面把拍摄按钮做成整行高按钮,并用明显的白色或红色背景,使用户可以迅速找到它。第二,模式切换要同时改变文案和颜色。只改变颜色容易让部分用户忽略,只有文案又可能缺少视觉速度。当前页面让模式按钮、主要按钮和底部单位一起响应,形成一致的提示。第三,参数调整要有就近反馈。变焦滑块位于取景区域下方,但倍率数字直接出现在取景区域中,用户拖动时不需要把视线移到很远的位置。第
bg: string;// 页面纸白底色// 卡片纯白底色// 胶囊与输入框底色// 主标题深墨蓝// 副文本灰蓝// 弱文本浅蓝灰// 家园蓝主色// 深家园蓝// 浅家园蓝(渐变浅端)// 青绿辅助色// 高价警示橙// 删除警示红// 分隔线淡蓝// 底部 Tab 激活色// 弹窗遮罩色// 代码预览卡深底色这段代码定义了一个接口,将页面涉及的全部 17 个颜色字段以契约形式集中声明。
** 主题色板接口:集中声明页面所有颜色字段(奶白底+番茄红+暖橙浅色系) */bg: string;// 页面奶白底色// 卡片纯白底色// 胶囊与输入框底色// 主标题深可可色// 副文本暖棕色// 弱文本浅驼色// 番茄红主色// 深番茄红// 浅番茄红(渐变浅端)// 暖橙辅助色// 营业中状态绿// 分隔线米色// 底部 Tab 激活色// 弹窗遮罩色// 代码预览卡深底色(浅色主题也保
** 主题色板接口:集中声明页面所有颜色字段(碳晶黑+电光绿+荧光黄深色系) */bg: string;这段代码定义了一个接口,它将整个页面用到的所有颜色字段集中声明为一个类型契约。这种"接口先行"的设计有三个明显优点:第一,它让颜色的语义用途一目了然——bg是页面背景、card是卡片背景、chip是筛选标签背景、titlesubtext3是三级文字色阶、green系列是品牌主色及其明暗变体、ye
MiniBar 通过 HdsTabs 的 barFloatingStyle().miniBar 接入,Builder 负责呈现任务摘要,Controller 的 applyMiniBarStyle() 发起展开或折叠。应用请求、动效过程和组件最终样式分别保存,由回调确认实际状态,窗口变化和用户点击就不会被漏掉。持续任务的名称、进度、暂停状态属于业务模型。
回顾 HarmonyOS 集成 WPS Open SDK 的主调用链:registerApp 门禁、setWpsFileToken、OpenFileRequest 参数、关闭回传与错误码分流,便于工程复盘。
阴影是 UI 设计中塑造视觉层次感的重要工具。在星办 OA 项目中,阴影设计遵循了"少即是多"的原则,在关键位置(如底部导航栏)使用阴影来提升 UI 品质感。通过shadow属性的radiuscoloroffsetXoffsetY四个参数,可以精确控制阴影的视觉效果。在星办 OA 中,使用的上浮阴影,使底部导航栏在页面内容之上形成清晰的视觉层次。阴影设计的最佳实践包括:建立明确的阴影层级体系阴影与
BorderRadius 圆角设计是星办 OA 项目 UI 系统的重要组成部分。视觉层次清晰:大圆角(18px)用于主卡片,中圆角(16px)用于标准卡片,小圆角(13px)用于内嵌元素交互暗示明确:可点击元素使用圆角,不可点击元素使用直角或小圆角品牌调性统一:圆角值与品牌色系配合,营造专业、现代、友好的形象设计一致性:相同类型的组件使用相同的圆角值,保持视觉一致性圆角虽小,却在企业级应用的视觉设
LinearGradient 渐变背景是星办 OA 项目视觉设计中的重要元素。通过135°对角线方向、三色渐变()的设计,首页头部呈现出专业的品牌调性和丰富的视觉层次。在渐变设计中,角度控制、颜色停止点设置、与品牌色的协调、以及文字对比度,都是需要仔细考量的因素。星办 OA 的渐变实践展示了如何在企业级应用中平衡视觉美观和功能实用性,为 HarmonyOS 应用的设计提供了有价值的参考。
合理的 @Trace 粒度:只追踪数组级别的变化,通过不可变更新模式触发响应式更新引用相等性优化:无变化时返回原数组引用,避免不必要的渲染批量更新:利用 ArkUI 的自动合并机制,同一事件循环中的多次更新合并为一次渲染复合 Key 策略:包含唯一标识符和状态字段的复合 Key,确保 diff 算法高效准确List 组件虚拟列表:只渲染可见区域内的列表项@Builder 内联渲染:减少组件创建开销
不可变更新是指:当状态需要更新时,不修改原始状态对象,而是创建一个包含更改的新对象或数组。// 不可变更新:创建新数组并赋值// 而不是直接修改原数组// this.approvals.push(newItem) // 不推荐不可变状态更新模式是星办 OA 项目状态管理的核心模式。可靠的响应式更新:每次数组替换都触发 UI 更新可预测的状态变化:状态变更都是显式的赋值操作避免副作用:深克隆确保修改
单向数据流:数据从顶层组件向下流动,事件从底层组件向上传播层次化通信:父子组件使用,跨层级使用,全局共享使用!!双向绑定语法糖:简化了父子组件间的数据绑定和事件注册@Builder局部数据流:在组件内部形成独立的 UI 数据流通过合理运用这些数据流机制,星办 OA 实现了组件间高效、清晰的数据通信,为构建可维护的企业级应用奠定了基础。
分层设计:全局状态(AppStorageV2)→ 页面状态(@Local)→ 组件状态(@Param),形成了清晰的状态层次单向数据流:数据从上层向下层传递,事件从下层向上层传播,保证了数据流的可预测性集中式 Store:通过实现集中式状态管理,所有数据变更通过 Store 的公共方法进行响应式同步@Trace确保状态变更自动同步到所有 UI 组件状态隔离:页面级别的临时状态使用@Local管理,
Type装饰器是 HarmonyOS ArkUI 框架中用于类型标注的装饰器,它通常与和@Trace配合使用。运行时对象创建:当属性被初始化或重置时,框架知道应该创建什么类型的实例深层响应式绑定:框架能够递归地为复杂类型中的属性建立响应式追踪类型安全校验:在开发阶段和运行时提供类型一致性保障@Type装饰器是 HarmonyOS ArkUI 状态管理体系中一个重要的组成部分,它弥补了 TypeSc
Trace装饰器是@ObservedV2响应式系统的核心,实现了对对象属性的细粒度追踪。当被追踪的属性值发生变化时,只更新依赖该属性的组件部分,而非整个组件树,从而实现了精确的变更传播和高效的组件更新。在"星办OA"项目中,@Trace被广泛应用于ApprovalStore审批状态仓库中,追踪approvals、messages、profile三个核心属性。通过"重新赋值触发变更"的模式,确保审批
Provider/@Consumer装饰器是HarmonyOS NEXT中实现跨组件通信的重要机制。通过"发布-订阅"模式,祖先组件可以发布数据,任意后代组件都可以订阅该数据,无需通过props逐层传递。在"星办OA"项目中,@Provider/@Consumer被用于实现导航栈的跨页面共享。
Local装饰器是@ComponentV2体系中管理组件局部状态的核心工具。它提供了响应式的状态管理能力,当变量值变化时自动触发组件重新渲染。
AppStorageV2是HarmonyOS NEXT中新一代的应用级状态管理机制。通过类型安全的connect方法、工厂函数模式、与@ObservedV2/@Trace的深度集成,为复杂业务状态管理提供了强大的支持。在"星办OA"项目中,AppStorageV2被用于连接ApprovalStore审批状态仓库,实现了审批数据、消息数据、员工信息在六个页面之间的共享和同步。所有页面通过相同的con
Image和Swiper是ArkUI中最重要的媒体组件。Image通过objectFit、borderRadius等属性提供了灵活的图片展示能力,而Swiper通过autoPlay、loop、interval等属性构建了完整的轮播交互体验。在"星办OA"项目中,Swiper组件被封装为可复用的buildSwiperArea组件,通过JSON数据驱动,实现了首页轮播图的灵活配置。Image组件则在头
Button组件虽然在ArkUI中只是一个基础组件,但通过fontColor、backgroundColor、borderRadius等属性的灵活组合,配合onClick事件和AlertDialog确认弹窗,可以构建出丰富而安全的交互体系。在"星办OA"项目中,Button的设计遵循了清晰的视觉层次和语义化颜色体系:主操作使用品牌蓝色填充,危险操作使用红色调和浅红背景,次要操作使用浅色背景。
AppStorage是HarmonyOS NEXT中应用级状态管理的基石。它采用key-value存储模式,提供了全局可见、响应式绑定的状态管理能力。在"星办OA"项目中,AppStorage主要用于存储系统级的安全区域参数(topRectHeight和bottomRectHeight),为所有页面提供统一的安全区域适配。通过"基准值+微调"的模式,在保证全局一致性的同时,给予各页面个性化的间距控