- 今天我们用 stateStyles 给按钮的不同状态配不同外观。 很多新手写按钮时,只写 normal 样式。结果按下、聚焦、禁用都差不多,用户很难判断当前控件到底能不能点、有没有被选中。stateStyles 解决的是这个视觉反馈问题。 参考文档:组件扩展 先说结论 stateStyles 适合: 按下时给反馈。 聚 今天我们用 stateStyles 给按钮的不同状态配不同外观。 很多新手写按钮时,只写 normal 样式。结果按下、聚焦、禁用都差不多,用户很难判断当前控件到底能不能点、有没有被选中。stateStyles 解决的是这个视觉反馈问题。 参考文档:组件扩展 先说结论 stateStyles 适合: 按下时给反馈。 聚
- 鸿蒙(HarmonyOS)应用用 ArkTS 语言、声明式 UI 开发。本文从环境准备讲起,带你写一个带状态管理、列表渲染和表单输入的完整 ArkTS 页面,说明组件生命周期与状态装饰器(@State/@Prop/@Link/@Provide),对比 ArkTS 与前端的异同、与 Flutter/React Native 的定位差异,并给出连真机预览、签名打包的关键步骤和常见新手坑。 鸿蒙(HarmonyOS)应用用 ArkTS 语言、声明式 UI 开发。本文从环境准备讲起,带你写一个带状态管理、列表渲染和表单输入的完整 ArkTS 页面,说明组件生命周期与状态装饰器(@State/@Prop/@Link/@Provide),对比 ArkTS 与前端的异同、与 Flutter/React Native 的定位差异,并给出连真机预览、签名打包的关键步骤和常见新手坑。
- 今天我们用 @Styles 把几组重复样式收起来。 前面我们一直在写卡片、圆角、边框、背景色。这些东西如果每个组件都复制一遍,页面很快会变得又长又烦。@Styles 的价值很直接:它只复用样式,不生成结构。 参考文档:组件扩展 先分清它和 @Builder @Builder 复用的是一段 UI: 可以有 Column、 今天我们用 @Styles 把几组重复样式收起来。 前面我们一直在写卡片、圆角、边框、背景色。这些东西如果每个组件都复制一遍,页面很快会变得又长又烦。@Styles 的价值很直接:它只复用样式,不生成结构。 参考文档:组件扩展 先分清它和 @Builder @Builder 复用的是一段 UI: 可以有 Column、
- 今天我们把 NavDestination 单独拎出来看。 Navigation 负责管栈,但真正展示内容的是 NavDestination。如果目标页只是一堆随手写进去的组件,标题、参数、返回都散在外面,后面维护会很难受。我们这次做一个最小文章列表,点进去后由目标页自己接住参数、设置标题,并负责返回。 列表页只负责选择 今天我们把 NavDestination 单独拎出来看。 Navigation 负责管栈,但真正展示内容的是 NavDestination。如果目标页只是一堆随手写进去的组件,标题、参数、返回都散在外面,后面维护会很难受。我们这次做一个最小文章列表,点进去后由目标页自己接住参数、设置标题,并负责返回。 列表页只负责选择
- 今天我们把 NavDestination 单独拎出来看。 Navigation 负责管栈,但真正展示内容的是 NavDestination。如果目标页只是一堆随手写进去的组件,标题、参数、返回都散在外面,后面维护会很难受。我们这次做一个最小文章列表,点进去后由目标页自己接住参数、设置标题,并负责返回。 列表页只负责选择 今天我们把 NavDestination 单独拎出来看。 Navigation 负责管栈,但真正展示内容的是 NavDestination。如果目标页只是一堆随手写进去的组件,标题、参数、返回都散在外面,后面维护会很难受。我们这次做一个最小文章列表,点进去后由目标页自己接住参数、设置标题,并负责返回。 列表页只负责选择
- HarmonyOS 7.0 已于 2026 年 9 月 7 日正式发布,该版本在 HarmonyOS 6.1 基础上增强了若干特性,让鸿蒙系统变得更智能更好用,下面结合《鸿蒙HarmonyOS 6应用开发:从零基础到App上线》一书对 HarmonyOS 7.0 新特性中的常用部分逐一讲解。一、ArkUI(方舟UI框架)新增ArkUI组件级沉浸光感,提供的一套高品质视觉与动效体系,通过沉浸... HarmonyOS 7.0 已于 2026 年 9 月 7 日正式发布,该版本在 HarmonyOS 6.1 基础上增强了若干特性,让鸿蒙系统变得更智能更好用,下面结合《鸿蒙HarmonyOS 6应用开发:从零基础到App上线》一书对 HarmonyOS 7.0 新特性中的常用部分逐一讲解。一、ArkUI(方舟UI框架)新增ArkUI组件级沉浸光感,提供的一套高品质视觉与动效体系,通过沉浸...
- 今天我们用 Navigation 做一个组件内的页面跳转。 刚开始写页面时,全局 router 的 pushUrl 很顺手。但当一个页面里面本来就有一组子页面,比如设置页、项目详情、二级说明页,一直用全局 router 跳来跳去,结构会越来越散。这个时候我们可以把这组子页交给 Navigation 管。 先准备一个导航 今天我们用 Navigation 做一个组件内的页面跳转。 刚开始写页面时,全局 router 的 pushUrl 很顺手。但当一个页面里面本来就有一组子页面,比如设置页、项目详情、二级说明页,一直用全局 router 跳来跳去,结构会越来越散。这个时候我们可以把这组子页交给 Navigation 管。 先准备一个导航
- 今天我们用 router.back 做一个最普通的页面回退。 页面能打开,也要能离开。很多新手写跳转时只盯着 pushUrl,等页面多了以后才发现返回路径乱了。我们先把普通回退讲清楚。 先跳到练习页 入口页有一个按钮,打开 ArkUIRouterBackTargetDemo。目标页是当前栈顶页面,里面只有说明和一个 b 今天我们用 router.back 做一个最普通的页面回退。 页面能打开,也要能离开。很多新手写跳转时只盯着 pushUrl,等页面多了以后才发现返回路径乱了。我们先把普通回退讲清楚。 先跳到练习页 入口页有一个按钮,打开 ArkUIRouterBackTargetDemo。目标页是当前栈顶页面,里面只有说明和一个 b
- 今天我们用 pushUrl 带一组参数,再在目标页用 getParams 读出来。 参数传递很常见。列表点进详情、卡片打开编辑页、搜索页带筛选条件,都绕不开它。但这里有个坑:目标页不要默认参数一定完整。 只传简单数据 Demo 里传了三个字段: 这些都是可序列化的数据。Router 参数不要塞方法、系统对象、上下文对象 今天我们用 pushUrl 带一组参数,再在目标页用 getParams 读出来。 参数传递很常见。列表点进详情、卡片打开编辑页、搜索页带筛选条件,都绕不开它。但这里有个坑:目标页不要默认参数一定完整。 只传简单数据 Demo 里传了三个字段: 这些都是可序列化的数据。Router 参数不要塞方法、系统对象、上下文对象
- 今天我们用 router.pushUrl 做一个最普通的页面跳转。 路由第一步很简单:点按钮,打开另一个页面。但真正容易出问题的地方不在按钮,而在 URL、页面栈和调用时机。我们先把最小闭环跑通,再把边界记住。 先准备一个承接页 Demo 里入口页只做一件事:跳到 ArkUIRouterTargetDemo。承接页也只 今天我们用 router.pushUrl 做一个最普通的页面跳转。 路由第一步很简单:点按钮,打开另一个页面。但真正容易出问题的地方不在按钮,而在 URL、页面栈和调用时机。我们先把最小闭环跑通,再把边界记住。 先准备一个承接页 Demo 里入口页只做一件事:跳到 ArkUIRouterTargetDemo。承接页也只
- 今天我们用 bindContentCover 做一个全屏覆盖层。 全屏覆盖适合临时进入一个完整视图,比如阅读、预览、确认一大块内容。它看起来像铺满了屏幕,但本质上还是覆盖层,所以这篇只讲打开、展示和关闭。 准备显示开关 先用一个布尔值控制覆盖层是否显示。 点击按钮时设为 true,覆盖层里的关闭按钮再设回 false。 今天我们用 bindContentCover 做一个全屏覆盖层。 全屏覆盖适合临时进入一个完整视图,比如阅读、预览、确认一大块内容。它看起来像铺满了屏幕,但本质上还是覆盖层,所以这篇只讲打开、展示和关闭。 准备显示开关 先用一个布尔值控制覆盖层是否显示。 点击按钮时设为 true,覆盖层里的关闭按钮再设回 false。
- 今天我们用 bindSheet 做一个半模态任务面板。 半模态适合处理短任务。比如整理草稿、补标签、选择分享范围,这些事不一定值得开一个完整页面,但又比一句提示复杂一点。我们这篇只做一个触发按钮和一个面板,先把最常用的结构跑通。 准备一个显示开关 bindSheet 需要一个布尔值控制显示和隐藏。 按钮点击时把它改成 今天我们用 bindSheet 做一个半模态任务面板。 半模态适合处理短任务。比如整理草稿、补标签、选择分享范围,这些事不一定值得开一个完整页面,但又比一句提示复杂一点。我们这篇只做一个触发按钮和一个面板,先把最常用的结构跑通。 准备一个显示开关 bindSheet 需要一个布尔值控制显示和隐藏。 按钮点击时把它改成
- 现在主流的手机操作系统有Android、iOS和HarmonyOS(鸿蒙系统),为了减少同时维护三种客户端的工作量,一般采用APP内嵌H5页面的形式。由于H5不能直接调用客户端的原生能力,比如相机、麦克风,以及读取设备信息,因此需要在APP与H5之间搭建一种双向通信的桥梁机制。一、JSBridge的开源框架JSBridge(JavaScript Bridge)就是这种H5混合App的双向通... 现在主流的手机操作系统有Android、iOS和HarmonyOS(鸿蒙系统),为了减少同时维护三种客户端的工作量,一般采用APP内嵌H5页面的形式。由于H5不能直接调用客户端的原生能力,比如相机、麦克风,以及读取设备信息,因此需要在APP与H5之间搭建一种双向通信的桥梁机制。一、JSBridge的开源框架JSBridge(JavaScript Bridge)就是这种H5混合App的双向通...
- 今天我们用 Popup 做三种贴着控件出现的小提示:基础文字气泡、顶部气泡、自定义气泡。 Popup 的重点是“贴着某个控件解释一句话”。它不像 AlertDialog 那样打断用户,也不像 ActionSheet 那样让用户选动作。我们只用最小的布尔值控制显示,不展开状态管理。 基础文字气泡 最简单的写法是 bind 今天我们用 Popup 做三种贴着控件出现的小提示:基础文字气泡、顶部气泡、自定义气泡。 Popup 的重点是“贴着某个控件解释一句话”。它不像 AlertDialog 那样打断用户,也不像 ActionSheet 那样让用户选动作。我们只用最小的布尔值控制显示,不展开状态管理。 基础文字气泡 最简单的写法是 bind
- 今天我们用 ActionSheet 做三组操作列表:分享、附件处理和更多操作。 ActionSheet 适合“用户要从一组动作里选一个”。如果只有一个确认动作,用 AlertDialog 更直;如果只是告诉用户结果,用 Toast 更轻。 分享操作 第一组是分享列表。 title 和 subtitle 先把场景说清楚, 今天我们用 ActionSheet 做三组操作列表:分享、附件处理和更多操作。 ActionSheet 适合“用户要从一组动作里选一个”。如果只有一个确认动作,用 AlertDialog 更直;如果只是告诉用户结果,用 Toast 更轻。 分享操作 第一组是分享列表。 title 和 subtitle 先把场景说清楚,
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战,从0到1打通消息通道;码道鸿蒙端云一体化实战,快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人;蒋春阳-华为云AI开发者案例开发专家
本期直播内容: AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了:看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签