- 今天我们用 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 需要一个布尔值控制显示和隐藏。 按钮点击时把它改成
- 今天我们用 Popup 做三种贴着控件出现的小提示:基础文字气泡、顶部气泡、自定义气泡。 Popup 的重点是“贴着某个控件解释一句话”。它不像 AlertDialog 那样打断用户,也不像 ActionSheet 那样让用户选动作。我们只用最小的布尔值控制显示,不展开状态管理。 基础文字气泡 最简单的写法是 bind 今天我们用 Popup 做三种贴着控件出现的小提示:基础文字气泡、顶部气泡、自定义气泡。 Popup 的重点是“贴着某个控件解释一句话”。它不像 AlertDialog 那样打断用户,也不像 ActionSheet 那样让用户选动作。我们只用最小的布尔值控制显示,不展开状态管理。 基础文字气泡 最简单的写法是 bind
- 今天我们用 ActionSheet 做三组操作列表:分享、附件处理和更多操作。 ActionSheet 适合“用户要从一组动作里选一个”。如果只有一个确认动作,用 AlertDialog 更直;如果只是告诉用户结果,用 Toast 更轻。 分享操作 第一组是分享列表。 title 和 subtitle 先把场景说清楚, 今天我们用 ActionSheet 做三组操作列表:分享、附件处理和更多操作。 ActionSheet 适合“用户要从一组动作里选一个”。如果只有一个确认动作,用 AlertDialog 更直;如果只是告诉用户结果,用 Toast 更轻。 分享操作 第一组是分享列表。 title 和 subtitle 先把场景说清楚,
- 今天我们用 CustomDialog 做一个最小自定义弹窗。固定样式弹窗不够用时,我们才需要自定义。自定义不是把一整套业务都塞进弹窗里,而是让内容结构更贴合当前场景。我们这篇只做标题、说明、关闭按钮。 写一个弹窗结构自定义弹窗先用 @CustomDialog 单独声明。@CustomDialogstruct SimpleCustomDialog { controller: CustomDi... 今天我们用 CustomDialog 做一个最小自定义弹窗。固定样式弹窗不够用时,我们才需要自定义。自定义不是把一整套业务都塞进弹窗里,而是让内容结构更贴合当前场景。我们这篇只做标题、说明、关闭按钮。 写一个弹窗结构自定义弹窗先用 @CustomDialog 单独声明。@CustomDialogstruct SimpleCustomDialog { controller: CustomDi...
- 今天我们用 AlertDialog 做三种确认场景:单按钮说明、双按钮选择、危险操作确认。 AlertDialog 会打断用户当前动作,所以我们别把它当成普通提示来用。只有用户需要做决定,或者必须看清楚后果时,它才值得出现。 单按钮说明 第一种是单按钮弹窗。 它适合“结果已经发生,只需要用户知道”的场景。按钮文案写成“ 今天我们用 AlertDialog 做三种确认场景:单按钮说明、双按钮选择、危险操作确认。 AlertDialog 会打断用户当前动作,所以我们别把它当成普通提示来用。只有用户需要做决定,或者必须看清楚后果时,它才值得出现。 单按钮说明 第一种是单按钮弹窗。 它适合“结果已经发生,只需要用户知道”的场景。按钮文案写成“
- 今天我们用 Toast 做三个轻提示:默认提示、停留久一点的提示,以及避开底部按钮的提示。 Toast 的定位很简单,它只负责告诉用户“刚才那一下发生了什么”。保存成功、复制成功、网络慢一点,这类信息用它刚好。要是需要用户做决定,就别让 Toast 硬扛,后面我们会用确认弹窗处理。 准备页面 我们先准备一个展示页,页面 今天我们用 Toast 做三个轻提示:默认提示、停留久一点的提示,以及避开底部按钮的提示。 Toast 的定位很简单,它只负责告诉用户“刚才那一下发生了什么”。保存成功、复制成功、网络慢一点,这类信息用它刚好。要是需要用户做决定,就别让 Toast 硬扛,后面我们会用确认弹窗处理。 准备页面 我们先准备一个展示页,页面
- 今天我们看 Symbol。它不是普通图片,更像一套能跟文字一起工作的符号字体。 如果只是放一个图标,Image 当然能做。但 Symbol 的好处是可以调字号、颜色、字重,还能塞进 Text 里和文字对齐。做导航、状态提示、小入口时,它会比单独准备一堆图片轻很多。 独立展示一个符号 案例里用的是系统符号资源: font 今天我们看 Symbol。它不是普通图片,更像一套能跟文字一起工作的符号字体。 如果只是放一个图标,Image 当然能做。但 Symbol 的好处是可以调字号、颜色、字重,还能塞进 Text 里和文字对齐。做导航、状态提示、小入口时,它会比单独准备一堆图片轻很多。 独立展示一个符号 案例里用的是系统符号资源: font
- 这一篇我们只做 Canvas 入门。不开动画循环,不做离屏绘制,也不处理图片像素;先把最基础的 2D 绘制跑通。 Canvas 和 Shape 的区别 Shape 更像声明式小图形,适合简单矢量元素。Canvas 更像一张画纸,我们拿到 CanvasRenderingContext2D 后,用命令一笔一笔画。 Demo 这一篇我们只做 Canvas 入门。不开动画循环,不做离屏绘制,也不处理图片像素;先把最基础的 2D 绘制跑通。 Canvas 和 Shape 的区别 Shape 更像声明式小图形,适合简单矢量元素。Canvas 更像一张画纸,我们拿到 CanvasRenderingContext2D 后,用命令一笔一笔画。 Demo
- 今天我们用 Swiper 做一个轮播页,先看指示点、循环、自动播放、多卡展示和露边效果。 Swiper 很容易被写成“横向塞几张卡片”。这样当然能滑,但用户不知道当前在哪,也不知道旁边还有没有内容。我们这次只做展示配置,不写控制器按钮,也不记录当前页。 第一块是基础轮播。indicator(true) 让页面有位置感, 今天我们用 Swiper 做一个轮播页,先看指示点、循环、自动播放、多卡展示和露边效果。 Swiper 很容易被写成“横向塞几张卡片”。这样当然能滑,但用户不知道当前在哪,也不知道旁边还有没有内容。我们这次只做展示配置,不写控制器按钮,也不记录当前页。 第一块是基础轮播。indicator(true) 让页面有位置感,
- 今天我们用 Tabs 把同一层级的内容拆成几页,让页面不再从头长到尾。 Tabs 的思路很直接:Tabs 管整体,TabContent 管每一页,tabBar 管标签文字。我们先用组件自己的切换能力,不额外记录当前索引,避免一上来就把主题带到状态管理。 第一块是顶部页签。barPosition: BarPosition 今天我们用 Tabs 把同一层级的内容拆成几页,让页面不再从头长到尾。 Tabs 的思路很直接:Tabs 管整体,TabContent 管每一页,tabBar 管标签文字。我们先用组件自己的切换能力,不额外记录当前索引,避免一上来就把主题带到状态管理。 第一块是顶部页签。barPosition: BarPosition
- 这篇我们看 Select。 有些选项不值得全部摊在页面上。比如“轻量、标准、完整”,如果每个地方都平铺按钮,页面很快就会变挤。Select 的价值就是把这类短选项收起来,让页面先保持干净。 这个 Demo 只展示 Select 本身:选项数组、默认选中、按钮显示文案、选项文字样式和禁用态。不写 onSelect,也不做 这篇我们看 Select。 有些选项不值得全部摊在页面上。比如“轻量、标准、完整”,如果每个地方都平铺按钮,页面很快就会变挤。Select 的价值就是把这类短选项收起来,让页面先保持干净。 这个 Demo 只展示 Select 本身:选项数组、默认选中、按钮显示文案、选项文字样式和禁用态。不写 onSelect,也不做
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了:看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签