- 入口宫格、工具面板、固定行列的小卡片,都别再手算宽度了。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 表示容
- 今天我们用 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 很好用: 你不用提前算一行放几个,也不用靠一堆手写
- Row 和 Column 是 ArkUI 布局里最常用的两个容器。它们不难,但很多页面乱,往往就是主轴和交叉轴没想清楚。 先分清主轴 Column 从上往下排,所以它的主轴是垂直方向。Row 从左往右排,所以它的主轴是水平方向。 justifyContent 管主轴方向怎么排,alignItems 管交叉轴方向怎么对齐 Row 和 Column 是 ArkUI 布局里最常用的两个容器。它们不难,但很多页面乱,往往就是主轴和交叉轴没想清楚。 先分清主轴 Column 从上往下排,所以它的主轴是垂直方向。Row 从左往右排,所以它的主轴是水平方向。 justifyContent 管主轴方向怎么排,alignItems 管交叉轴方向怎么对齐
- 国际化页面不维护硬编码多语言数组。静态文案进入 string.json,页面通过 $r('app.string.xxx') 读取;数字和日期格式交给 intl;系统语言、地区和区域变化在 Demo 页面内通过公共事件 COMMONEVENTLOCALECHANGED 感知。 参考能力: @kit.Localizatio 国际化页面不维护硬编码多语言数组。静态文案进入 string.json,页面通过 $r('app.string.xxx') 读取;数字和日期格式交给 intl;系统语言、地区和区域变化在 Demo 页面内通过公共事件 COMMONEVENTLOCALECHANGED 感知。 参考能力: @kit.Localizatio
- 资源规范的重点不是把所有内容都塞进 JSON,而是让同一类资源成组维护。深浅色要保证 base/dark 同名颜色 key,国际化要保证 base/enUS/frFR 同名文案 key。 本篇边界 这篇只讲 color.json、string.json、资源限定词和 key 命名。Demo 不做运行时扫描资源文件,不做 资源规范的重点不是把所有内容都塞进 JSON,而是让同一类资源成组维护。深浅色要保证 base/dark 同名颜色 key,国际化要保证 base/enUS/frFR 同名文案 key。 本篇边界 这篇只讲 color.json、string.json、资源限定词和 key 命名。Demo 不做运行时扫描资源文件,不做
- 权限页只讲四件事:先声明、再检查、按需申请、展示结果。不要把真实分布式同步、拍照、定位这类业务流程混进权限入门页。 本 Demo 复用项目已经声明的 ohos.permission.DISTRIBUTEDDATASYNC,只演示权限申请和状态反馈,不执行真实同步。 交互预期 点击“检查权限”,页面显示当前权限是否已授权 权限页只讲四件事:先声明、再检查、按需申请、展示结果。不要把真实分布式同步、拍照、定位这类业务流程混进权限入门页。 本 Demo 复用项目已经声明的 ohos.permission.DISTRIBUTEDDATASYNC,只演示权限申请和状态反馈,不执行真实同步。 交互预期 点击“检查权限”,页面显示当前权限是否已授权
- 日志和错误处理是后续系统能力 Demo 的底座。页面 Demo 不能只调用 console 或 hilog 后没有反馈,用户需要能看到当前动作是否成功、失败原因是什么。 本页演示三种最小能力: hilog.info:记录普通流程。 hilog.warn:记录可降级但需要关注的状态。 BusinessError:显示 c 日志和错误处理是后续系统能力 Demo 的底座。页面 Demo 不能只调用 console 或 hilog 后没有反馈,用户需要能看到当前动作是否成功、失败原因是什么。 本页演示三种最小能力: hilog.info:记录普通流程。 hilog.warn:记录可降级但需要关注的状态。 BusinessError:显示 c
- 工程化 Demo 里讲生命周期,不应该一上来就写后台任务。先把页面可见生命周期和组件出现/销毁看清楚,后面接文件、通知、分享或系统 Kit 时,才知道初始化、刷新和释放应该放在哪里。 本页只演示四类入口: aboutToAppear:组件即将出现,适合准备轻量状态。 onPageShow:页面重新可见,适合刷新页面内展 工程化 Demo 里讲生命周期,不应该一上来就写后台任务。先把页面可见生命周期和组件出现/销毁看清楚,后面接文件、通知、分享或系统 Kit 时,才知道初始化、刷新和释放应该放在哪里。 本页只演示四类入口: aboutToAppear:组件即将出现,适合准备轻量状态。 onPageShow:页面重新可见,适合刷新页面内展
- 前面我们写过 DeviceKVStore,也写过应用接续。分布式数据对象看起来也在做“跨设备同步”,但它的定位不一样。 它不是持久化数据库,更像把一个 JS 对象封装成可同步的共享状态。你在一个设备上改对象属性,同一个 sessionId 下的另一台设备可以收到变化。 官方文档可以先放在手边: 分布式数据对象跨设备数据 前面我们写过 DeviceKVStore,也写过应用接续。分布式数据对象看起来也在做“跨设备同步”,但它的定位不一样。 它不是持久化数据库,更像把一个 JS 对象封装成可同步的共享状态。你在一个设备上改对象属性,同一个 sessionId 下的另一台设备可以收到变化。 官方文档可以先放在手边: 分布式数据对象跨设备数据
- 上一篇跑通了最小闭环:保存向量字段,再用 SQL 距离排序找回来。 这一篇接着讲一个更实际的问题:用了向量数据库,不代表所有查询都要变成“相似度”。分类、状态、时间、租户、权限这些确定条件,仍然应该交给 RDB。 先说结论 向量检索负责“谁更像”,RDB 条件负责“哪些记录有资格参与比较”。 真实业务里,通常不是全库做 上一篇跑通了最小闭环:保存向量字段,再用 SQL 距离排序找回来。 这一篇接着讲一个更实际的问题:用了向量数据库,不代表所有查询都要变成“相似度”。分类、状态、时间、租户、权限这些确定条件,仍然应该交给 RDB。 先说结论 向量检索负责“谁更像”,RDB 条件负责“哪些记录有资格参与比较”。 真实业务里,通常不是全库做
- 前两篇分别讲了最小闭环和 RDB 混合过滤。第三篇把它落到一个常见 AI 应用场景:本地知识库。 先说结论 本地知识库不是把整篇文章直接塞进一个向量字段。 更常见的做法是:先把长文本切成片段,再给每个片段生成向量。检索时先找相似片段,后续再把片段交给摘要、问答或生成模块。 这个 Demo 做什么 页面把一段长文本切成多 前两篇分别讲了最小闭环和 RDB 混合过滤。第三篇把它落到一个常见 AI 应用场景:本地知识库。 先说结论 本地知识库不是把整篇文章直接塞进一个向量字段。 更常见的做法是:先把长文本切成片段,再给每个片段生成向量。检索时先找相似片段,后续再把片段交给摘要、问答或生成模块。 这个 Demo 做什么 页面把一段长文本切成多
- 前面 RDB 已经写到事务和 Sendable。再往 AI 应用走一步,就会遇到“向量数据库”。 这次以华为官方文档《通过向量数据库实现数据持久化 (ArkTS)》为准:向量数据库从 API version 18 开始支持,它既能保存向量数据,也能继续处理标量的关系型数据。`floatvector` 用来保存向量化结果,查询时可以用向量距离做排序。 前面 RDB 已经写到事务和 Sendable。再往 AI 应用走一步,就会遇到“向量数据库”。 这次以华为官方文档《通过向量数据库实现数据持久化 (ArkTS)》为准:向量数据库从 API version 18 开始支持,它既能保存向量数据,也能继续处理标量的关系型数据。`floatvector` 用来保存向量化结果,查询时可以用向量距离做排序。
上滑加载中
推荐直播
-
用码道,让你的AI作品三步上朋友圈2026/08/04 周二 19:00-20:00
林华鼎-华为云AI开发者运营负责人
从入门 · 到做AI应用 · 到企业级开发。不教编程,只教用AI · 零代码、有产出、能带走、可炫耀 · 每课人人动手实操
回顾中 -
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战,从0到1打通消息通道;码道鸿蒙端云一体化实战,快速搭建员工签到系统。
回顾中 -
基于华为云码道,构建你的定制化AI搭子2026/08/14 周五 09:00-11:30
明亮-华为云开发者发展与支持部部长
本期直播将向您全面介绍华为云码道产品,并基于码道手把手教你部署自己的定制化AI陪伴搭子。
回顾中
热门标签