同一个“入口宫格/卡片墙”,在手机要两列、平板要三列、横屏要四列:如果你靠 if/else 手写一堆宽高,很快就会失控。本文用一个最小可复用的“功能入口栅格”示例,对照 ArkUI 的 GridRow/GridCol 与 Android(Compose 的 LazyVerticalGrid / View 的 GridLayoutManager),把“列数、间距、span/offset、断点”这套规则落到具体写法。
Row/Column 解决“沿一条轴排”,Stack 解决“覆盖叠放”,Flex 解决“放不下就换行”。但当你要把角标、播放按钮、标题、副标题、操作区同时放进同一张卡片时,真正的难点变成了:控件之间到底怎么互相对齐、互相约束?本文用一个封面卡片示例,对照 ArkUI RelativeContainer 与 Android ConstraintLayout(含 Compose 约束思路),把“约束关系”这件事从心智到写法一次讲清楚。
线性布局能把一行排整齐,但一旦组件数量不确定(标签、筛选项、快捷入口),你就会遇到“放不下怎么办”的问题。本文用一个可复用的筛选标签区示例,对照 ArkUI Flex 与 Android(Compose / View)的写法,把 wrap、主轴分布、对齐与间距讲清楚。
继续按 HarmonyOS ArkUI UI 开发里的构建布局顺序往后拆。本文先用一个更小的封面卡片示例讲清 Stack:底图铺满,底部信息浮层覆盖在图片上。多控件相对定位留到 RelativeContainer。
跟着 HarmonyOS 开发者网站的 ArkUI UI 开发布局顺序,从线性布局开始。本文用一个个人中心头部卡片,把 Row、Column、主轴、交叉轴、间距、对齐和 layoutWeight 串起来,并用 Android LinearLayout 与 Compose 做参照。
很多 Android 开发者学 ArkUI 时会卡在“语法像 TS、写法像链式调用”上。本文不从名词表入手,而是用一张对照表把 ArkUI 的 Row/Column/Stack 与 Compose 的 Row/Column/Box 对齐;再用一份“第一屏骨架”示例,把间距、对齐、背景、点击与复用边界串成一条可落地的写法。