- 今天我们用 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，也不做
- 这篇我们看 Rating。 评分控件很容易被当成装饰：随手放五颗星，看起来热闹，但用户不知道评分代表满意度、难度，还是推荐指数。我们这篇先把它写得克制一点。 这个 Demo 只展示 Rating 本身：默认分值、星星数量、半星步进、只读展示和禁用态。不自定义星星图片，也不引入额外资源。 参考文档： https://de 这篇我们看 Rating。 评分控件很容易被当成装饰：随手放五颗星，看起来热闹，但用户不知道评分代表满意度、难度，还是推荐指数。我们这篇先把它写得克制一点。 这个 Demo 只展示 Rating 本身：默认分值、星星数量、半星步进、只读展示和禁用态。不自定义星星图片，也不引入额外资源。 参考文档： https://de
- 这篇我们看 Progress。 等待本身不可怕，可怕的是不知道等到哪了。Progress 的任务就是给用户一个明确预期：刚开始、进行中、快结束，页面要说得出来。 这个 Demo 只做静态进度展示：线性进度、环形进度、胶囊进度，以及高低进度对比。不模拟异步下载，也不写定时器。 参考文档： https://develope 这篇我们看 Progress。 等待本身不可怕，可怕的是不知道等到哪了。Progress 的任务就是给用户一个明确预期：刚开始、进行中、快结束，页面要说得出来。 这个 Demo 只做静态进度展示：线性进度、环形进度、胶囊进度，以及高低进度对比。不模拟异步下载，也不写定时器。 参考文档： https://develope
- 这篇我们看 Slider。 有些设置不是“开或关”，也不是“选 A 或 B”，而是在一个范围里调节。音量、亮度、字号、透明度，这类场景就适合 Slider。 这个 Demo 只展示 Slider 本身：最小值、最大值、步进、颜色、提示和禁用态。不写实时数值刷新，也不把它提前拉进状态管理章节。 参考文档： https:/ 这篇我们看 Slider。 有些设置不是“开或关”，也不是“选 A 或 B”，而是在一个范围里调节。音量、亮度、字号、透明度，这类场景就适合 Slider。 这个 Demo 只展示 Slider 本身：最小值、最大值、步进、颜色、提示和禁用态。不写实时数值刷新，也不把它提前拉进状态管理章节。 参考文档： https:/
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签