- 这一篇我们只做 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:/
- 这篇我们写 Toggle。开关控件看起来很小，但它很容易被用乱：有的地方明明是确认项，却做成开关；有的地方是普通按钮，却伪装成 Toggle。 所以这个案例不写设置保存，也不讲状态同步。我们先把 Toggle 自己的三种形态看清楚：Switch、Checkbox、Button。 参考文档： https://develo 这篇我们写 Toggle。开关控件看起来很小，但它很容易被用乱：有的地方明明是确认项，却做成开关；有的地方是普通按钮，却伪装成 Toggle。 所以这个案例不写设置保存，也不讲状态同步。我们先把 Toggle 自己的三种形态看清楚：Switch、Checkbox、Button。 参考文档： https://develo
- 这篇我们单独看 Radio。 Radio 最适合互斥选择：一组选项里只能选一个。新手很容易把它和 Checkbox 混着用，结果页面看起来能多选，实际业务又只认一个值，用户就会迷糊。 所以这个 Demo 不写表单提交，也不讲状态刷新。我们先把 Radio 自己的边界看清楚：同组单选、默认选中、样式颜色和禁用态。 参考文 这篇我们单独看 Radio。 Radio 最适合互斥选择：一组选项里只能选一个。新手很容易把它和 Checkbox 混着用，结果页面看起来能多选，实际业务又只认一个值，用户就会迷糊。 所以这个 Demo 不写表单提交，也不讲状态刷新。我们先把 Radio 自己的边界看清楚：同组单选、默认选中、样式颜色和禁用态。 参考文
- 这篇我们单独看 Checkbox。 上一篇 Toggle 里已经见过 Checkbox 形态，但那只是为了分清几种开关外观。这一篇不绕了，我们就盯着真正的 Checkbox 组件：单个勾选、多个独立选择、颜色和禁用态。 先说清楚边界：这篇不讲成组管理，也不做全选、反选、列表刷新和表单提交。那些内容以后会放到对应章节。我 这篇我们单独看 Checkbox。 上一篇 Toggle 里已经见过 Checkbox 形态，但那只是为了分清几种开关外观。这一篇不绕了，我们就盯着真正的 Checkbox 组件：单个勾选、多个独立选择、颜色和禁用态。 先说清楚边界：这篇不讲成组管理，也不做全选、反选、列表刷新和表单提交。那些内容以后会放到对应章节。我
- 这篇我们写 TextArea。它看起来只是 TextInput 的多行版本，但真放到页面里，问题会马上冒出来：高度被撑乱、字数没边界、滚动条不好看、禁用态像还能编辑。 所以这个案例不做评论发布，也不做草稿保存。我们只把多行输入框本身处理顺：占位提示、字数计数、最多行数、滚动条、高度适配和禁用态。 参考文档： https 这篇我们写 TextArea。它看起来只是 TextInput 的多行版本，但真放到页面里，问题会马上冒出来：高度被撑乱、字数没边界、滚动条不好看、禁用态像还能编辑。 所以这个案例不做评论发布，也不做草稿保存。我们只把多行输入框本身处理顺：占位提示、字数计数、最多行数、滚动条、高度适配和禁用态。 参考文档： https
- 这篇我们写 TextInput。输入框很小，但它特别容易暴露页面粗糙感：占位文字太重、键盘类型不对、密码框没有眼睛图标、错误态只靠用户自己猜。 所以这个案例不做完整登录页，也不讲状态管理。我们先把输入框本体看清楚：普通输入、手机号、邮箱、验证码、密码、错误态和禁用态。 参考文档： https://developer.h 这篇我们写 TextInput。输入框很小，但它特别容易暴露页面粗糙感：占位文字太重、键盘类型不对、密码框没有眼睛图标、错误态只靠用户自己猜。 所以这个案例不做完整登录页，也不讲状态管理。我们先把输入框本体看清楚：普通输入、手机号、邮箱、验证码、密码、错误态和禁用态。 参考文档： https://developer.h
- 这次我们只看 Button。不写登录，不写提交，也不弹窗，先把按钮本身讲明白。 按钮最怕什么？一排全是蓝色，一眼看过去每个都像主操作。用户不知道该点哪个，后面逻辑写得再漂亮也白搭。 所以这个案例只做几种按钮：主按钮、次按钮、危险按钮、弱按钮、整行按钮、并排按钮和禁用态。 参考文档： https://developer. 这次我们只看 Button。不写登录，不写提交，也不弹窗，先把按钮本身讲明白。 按钮最怕什么？一排全是蓝色，一眼看过去每个都像主操作。用户不知道该点哪个，后面逻辑写得再漂亮也白搭。 所以这个案例只做几种按钮：主按钮、次按钮、危险按钮、弱按钮、整行按钮、并排按钮和禁用态。 参考文档： https://developer.
- 这篇我们聊 Image。图片这东西看着简单，真写页面时经常出事：不是路径错了，就是比例歪了，要么封面一铺满就把重点裁没了。 所以这个案例不做花活，只把四种来源放到一页里：media、rawfile、SVG、网络图。最后再看一眼 Contain、Cover、Fill 到底差在哪。 用本地资源是为了稳定，用网络图是为了贴近 这篇我们聊 Image。图片这东西看着简单，真写页面时经常出事：不是路径错了，就是比例歪了，要么封面一铺满就把重点裁没了。 所以这个案例不做花活，只把四种来源放到一页里：media、rawfile、SVG、网络图。最后再看一眼 Contain、Cover、Fill 到底差在哪。 用本地资源是为了稳定，用网络图是为了贴近
- 今天我们写一个很小的 RichEditor。它能编辑图文内容，但我们先不做 Markdown、不做 HTML 转换，也不做保存。 官方文档里也把边界说得很清楚：只是展示图文时，可以先考虑 Text 或 RichText；用户真的要编辑图文内容时，再上 RichEditor。这个 Demo 就按这个边界来。 先准备控制器 今天我们写一个很小的 RichEditor。它能编辑图文内容，但我们先不做 Markdown、不做 HTML 转换，也不做保存。 官方文档里也把边界说得很清楚：只是展示图文时，可以先考虑 Text 或 RichText；用户真的要编辑图文内容时，再上 RichEditor。这个 Demo 就按这个边界来。 先准备控制器
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签