- 今天我们不做性能压测,只把几种常见布局写法摆在一起看:什么时候该少套一层,什么时候该抽一个 Builder。 初学 ArkUI 时,很容易一看到对齐问题就继续套 Row、Column。这样能写出来,但代码读起来会越来越绕。我们先看一个过度嵌套的小块,再看一个更扁平的写法。 第一块故意写得偏绕。只是标题、描述和一点说明, 今天我们不做性能压测,只把几种常见布局写法摆在一起看:什么时候该少套一层,什么时候该抽一个 Builder。 初学 ArkUI 时,很容易一看到对齐问题就继续套 Row、Column。这样能写出来,但代码读起来会越来越绕。我们先看一个过度嵌套的小块,再看一个更扁平的写法。 第一块故意写得偏绕。只是标题、描述和一点说明,
- 今天我们把网格列表再往前推一步:当入口变多时,用 LazyVGridLayout 搭一个固定高度、能滚动的多列区域。 这篇不讲无限加载,也不讲数据源增删。我们先把最基础的事情做稳:列怎么分、行列间距怎么写、卡片怎么放进去。 先准备一组卡片数据 页面里用 LazyGridCard 放标题、说明和颜色。这样写纯粹为了让 D 今天我们把网格列表再往前推一步:当入口变多时,用 LazyVGridLayout 搭一个固定高度、能滚动的多列区域。 这篇不讲无限加载,也不讲数据源增删。我们先把最基础的事情做稳:列怎么分、行列间距怎么写、卡片怎么放进去。 先准备一组卡片数据 页面里用 LazyGridCard 放标题、说明和颜色。这样写纯粹为了让 D
- 今天我们看一个更特殊的列表:ArcList。它主要面向圆形屏幕,适合穿戴设备这类场景。 这篇只做能力展示。我们不假设你当前设备就是圆形屏,也不讲表冠事件、横滑操作和懒加载,先把最基础的结构看明白。 先引入 ArcList ArcList 在当前 SDK 里通过 @kit.ArkUI 导出,所以页面顶部要写: Lengt 今天我们看一个更特殊的列表:ArcList。它主要面向圆形屏幕,适合穿戴设备这类场景。 这篇只做能力展示。我们不假设你当前设备就是圆形屏,也不讲表冠事件、横滑操作和懒加载,先把最基础的结构看明白。 先引入 ArcList ArcList 在当前 SDK 里通过 @kit.ArkUI 导出,所以页面顶部要写: Lengt
- 随着大模型发展,开发一款应用,门槛已经低到超乎想象。一个人 + Agent ,从有个想法到产品上线,自己就能全部搞定。不过Agent从开发到部署,都需要烧钱。比如做一个体重管理应用(实现记录体重、绑定教练、查看排课计划等功能),除了tokens费用,还需要部署资源:ECS 要花钱 、Tokens要花钱 、 RDS 、OBS也要花钱…… 那有没有办法把费用“省”下来?有 —— 只需要每天花几... 随着大模型发展,开发一款应用,门槛已经低到超乎想象。一个人 + Agent ,从有个想法到产品上线,自己就能全部搞定。不过Agent从开发到部署,都需要烧钱。比如做一个体重管理应用(实现记录体重、绑定教练、查看排课计划等功能),除了tokens费用,还需要部署资源:ECS 要花钱 、Tokens要花钱 、 RDS 、OBS也要花钱…… 那有没有办法把费用“省”下来?有 —— 只需要每天花几...
- 瀑布流适合“等宽但高度不一样”的内容。它不是把卡片随便往下塞,而是让每个子项根据列的高度自然补位。 Demo 里只做静态瀑布流 这篇先不讲无限加载、LazyForEach、WaterFlowSections。我们只看最基础的结构:WaterFlow 容器和 FlowItem 子项。 columnsTemplate('1 瀑布流适合“等宽但高度不一样”的内容。它不是把卡片随便往下塞,而是让每个子项根据列的高度自然补位。 Demo 里只做静态瀑布流 这篇先不讲无限加载、LazyForEach、WaterFlowSections。我们只看最基础的结构:WaterFlow 容器和 FlowItem 子项。 columnsTemplate('1
- 今天我们用 Scroll 做一个长内容页面,重点看纵向滚动、横向滚动、滚动条和边缘效果。 Scroll 最适合解决一个朴素问题:内容比容器长。我们不需要把页面撑到失控,也不需要靠一堆嵌套绕过去。给 Scroll 一个明确高度,再让里面的内容自然排列就行。 第一块是纵向滚动。外层 Scroll 定高,内部 Column 今天我们用 Scroll 做一个长内容页面,重点看纵向滚动、横向滚动、滚动条和边缘效果。 Scroll 最适合解决一个朴素问题:内容比容器长。我们不需要把页面撑到失控,也不需要靠一堆嵌套绕过去。给 Scroll 一个明确高度,再让里面的内容自然排列就行。 第一块是纵向滚动。外层 Scroll 定高,内部 Column
- 今天我们用 Scroll 做一个长内容页面,重点看纵向滚动、横向滚动、滚动条和边缘效果。 Scroll 最适合解决一个朴素问题:内容比容器长。我们不需要把页面撑到失控,也不需要靠一堆嵌套绕过去。给 Scroll 一个明确高度,再让里面的内容自然排列就行。 第一块是纵向滚动。外层 Scroll 定高,内部 Column 今天我们用 Scroll 做一个长内容页面,重点看纵向滚动、横向滚动、滚动条和边缘效果。 Scroll 最适合解决一个朴素问题:内容比容器长。我们不需要把页面撑到失控,也不需要靠一堆嵌套绕过去。给 Scroll 一个明确高度,再让里面的内容自然排列就行。 第一块是纵向滚动。外层 Scroll 定高,内部 Column
- 列表一旦有“上午/下午”“今天/本周”“系统/个人”这类归属关系,就别只往 List 里塞一个普通标题。ListItemGroup 能把标题和组内项目绑定在一起,结构会清楚很多。 这个 Demo 看两种分组感 第一块用 ListItemGroup({ header }) 放进 List,并在 List 上打开 stic 列表一旦有“上午/下午”“今天/本周”“系统/个人”这类归属关系,就别只往 List 里塞一个普通标题。ListItemGroup 能把标题和组内项目绑定在一起,结构会清楚很多。 这个 Demo 看两种分组感 第一块用 ListItemGroup({ header }) 放进 List,并在 List 上打开 stic
- 列表一多,就不要继续用 Column 往下堆了。List 自带滚动能力,子项也有明确边界,后面要做分组、吸顶、横滑或懒加载时,路也更顺。 这个 Demo 先看三件事 第一块是纵向列表。我们给 List 一个固定高度,内容超过后它自己滚动。space 负责列表项之间的距离。 第二块是水平列表。把 listDirectio 列表一多,就不要继续用 Column 往下堆了。List 自带滚动能力,子项也有明确边界,后面要做分组、吸顶、横滑或懒加载时,路也更顺。 这个 Demo 先看三件事 第一块是纵向列表。我们给 List 一个固定高度,内容超过后它自己滚动。space 负责列表项之间的距离。 第二块是水平列表。把 listDirectio
- 入口宫格、工具面板、固定行列的小卡片,都别再手算宽度了。Grid 负责容器,GridItem 负责每个格子,我们只需要把行列模板写清楚。 先看最常用的三列入口 Demo 第一块用 columnsTemplate('1fr 1fr 1fr') 和 rowsTemplate('1fr 1fr') 做了一个两行三列入口区。 入口宫格、工具面板、固定行列的小卡片,都别再手算宽度了。Grid 负责容器,GridItem 负责每个格子,我们只需要把行列模板写清楚。 先看最常用的三列入口 Demo 第一块用 columnsTemplate('1fr 1fr 1fr') 和 rowsTemplate('1fr 1fr') 做了一个两行三列入口区。
- 今天我们用 GridRow 和 GridCol 搭一个十二列栅格页面,先把 span、offset、order 和 gutter 这些最常用的能力看明白。 准备很简单:页面里只用 ArkUI 自带组件,不需要额外资源。我们把整行交给 GridRow,再让每个 GridCol 说明自己占几列。这样写比手算百分比舒服,也更 今天我们用 GridRow 和 GridCol 搭一个十二列栅格页面,先把 span、offset、order 和 gutter 这些最常用的能力看明白。 准备很简单:页面里只用 ArkUI 自带组件,不需要额外资源。我们把整行交给 GridRow,再让每个 GridCol 说明自己占几列。这样写比手算百分比舒服,也更
- 今天我们用 RelativeContainer 做几种相对定位:对齐容器、对齐兄弟组件,再补一个辅助线和屏障的小例子。 这篇不讲完整约束布局系统。我们先用一个小页面把锚点关系看清楚。 关键组件要有 id 在 RelativeContainer 里,组件之间要互相参考位置,就得先有稳定 id: container 表示容 今天我们用 RelativeContainer 做几种相对定位:对齐容器、对齐兄弟组件,再补一个辅助线和屏障的小例子。 这篇不讲完整约束布局系统。我们先用一个小页面把锚点关系看清楚。 关键组件要有 id 在 RelativeContainer 里,组件之间要互相参考位置,就得先有稳定 id: container 表示容
- 做 AI 应用,最烧钱的就是 Token。我最近在华为云开发者发现了个成长中心:日常做点任务攒积分,积分可以换代金券,代金券能抵扣调大模型、ModelArts 这些按 Token 收费的服务。下面是门槛最低的几个任务的操作记录。 一、低门槛任务清单(按操作成本从低到高)引路地址:开发者成长中心顺序任务周期积分操作成本1每日签到每日+10 / 天极低,点一下2实名认证一次性+50低,上传证件,... 做 AI 应用,最烧钱的就是 Token。我最近在华为云开发者发现了个成长中心:日常做点任务攒积分,积分可以换代金券,代金券能抵扣调大模型、ModelArts 这些按 Token 收费的服务。下面是门槛最低的几个任务的操作记录。 一、低门槛任务清单(按操作成本从低到高)引路地址:开发者成长中心顺序任务周期积分操作成本1每日签到每日+10 / 天极低,点一下2实名认证一次性+50低,上传证件,...
- 今天我们用 Stack 做几个常见叠层效果:角标、头像组、浮层卡片。 这篇不讲弹窗,也不讲动画。Stack 的重点是同一块区域里的前后层级,先把这个边界抓住就够了。 角标覆盖 角标这类东西很适合放在 Stack 里: alignContent 先决定默认对齐点。这里用 TopEnd,角标自然就贴近右上角。 用 zInd 今天我们用 Stack 做几个常见叠层效果:角标、头像组、浮层卡片。 这篇不讲弹窗,也不讲动画。Stack 的重点是同一块区域里的前后层级,先把这个边界抓住就够了。 角标覆盖 角标这类东西很适合放在 Stack 里: alignContent 先决定默认对齐点。这里用 TopEnd,角标自然就贴近右上角。 用 zInd
- 今天我们用 Flex 处理几个 Row/Column 不太舒服的场景:自动换行、按比例分空间、单独调整某个子项对齐。 这篇不做响应式断点,也不把 Row/Column 拉出来长篇对比。我们只看 Flex 自己。 标签换行 标签数量不固定时,FlexWrap.Wrap 很好用: 你不用提前算一行放几个,也不用靠一堆手写 今天我们用 Flex 处理几个 Row/Column 不太舒服的场景:自动换行、按比例分空间、单独调整某个子项对齐。 这篇不做响应式断点,也不把 Row/Column 拉出来长篇对比。我们只看 Flex 自己。 标签换行 标签数量不固定时,FlexWrap.Wrap 很好用: 你不用提前算一行放几个,也不用靠一堆手写
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战,从0到1打通消息通道;码道鸿蒙端云一体化实战,快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第三期2026/08/21 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人;念擎-华为云AI开发者运营案例开发专家
本期直播内容:AI六层能力首次详细解读 + 新一代华为云开发者空间亮相 + 校园案例直播带练
回顾中 -
华为云监控CES新特性解读2026/08/26 周三 19:00-20:30
刘英杰-华为云监控产品专家
华为云监控 CES H1 版本重磅全新升级!本次直播特邀华为云监控产品专家,围绕特性深度解读 + 现场实操演示 + 实时线上答疑三大模块,全方位拆解版本核心亮点,直击运维各类痛点难题。助力实现告警高效配置、指标快速检索、插件便捷部署,切实降低运维工作负担,提升监控运维工作效率。欢迎预约观看,互动提问交流!
回顾中
热门标签