鸿蒙 ArkTS 精确对齐布局实战：Row + SizedBox(width:120) + Expanded（API 24）

一、引言

表单页面是移动端最常见的交互场景。一个精心设计的表单应当具备标签精确对齐、内容区自适应、图文混排规整三大特征。Flutter 社区为此总结出一套成熟的方案——Row + SizedBox(width:120) + Expanded。本文完整阐述如何将此方案迁移到鸿蒙 ArkTS（API 24，HarmonyOS 4.0+），并提供经过构建验证的完整示例代码。

Flutter 到 ArkTS 核心映射

Flutter	ArkTS (API 24)	说明
SizedBox(width:120)	.width(120)	固定标签宽度
Expanded(child: ...)	.layoutWeight(1)	内容区自动撑满
Row(children: [...])	Row() { ... }	水平排列容器
CrossAxisAlignment.center	VerticalAlign.Center	交叉轴居中
EdgeInsets.all(20)	.padding(20)	统一内边距
TextField()	TextInput({...})	单行文本输入
TextFormField(maxLines:3)	TextArea({...})	多行文本输入
Radio()	Radio({...})	单选按钮
CircleAvatar()	Row().borderRadius(x).backgroundColor(...)	圆形头像（API 24 兼容）

二、Flutter 布局原理与鸿蒙迁移

2.1 为什么需要固定宽度标签

不同标签的文字长度天然不同——"姓名"2 字 vs "手机号码"4 字。如果仅使用 Padding 缩进，标签右边缘无法对齐，视觉凌乱。如果使用 Flex 比例分配宽度，标签宽度绝对值随屏幕变化，同样无法保证所有标签的右边缘处于同一垂直线。

解决思路：给标签一个固定的绝对宽度值（推荐 120px），内容区占剩余全部空间。由于所有标签宽度相同，无论文字内容长短，右边缘都锁定在同一个 x 坐标上。

2.2 为什么选择 120px

• 4-6 个中文字符在 15px 字号下约 60-90px，120px 留出 30-60px 余量。
• 适配中英文混合标签，如 “Username”、“Phone Number”。
• 主流屏幕（360-430dp）上标签区与内容区的比例约 1:2.5，视觉舒适。
• 鸿蒙 API 24 设备屏幕从 HD 到 2K+，120px 在各尺寸上表现稳定。

如果项目标签特别长（超过 6 字），可调整为 140px 或 160px。核心原则：全项目使用统一的标签宽度值。

2.3 layoutWeight 深入解析

.layoutWeight(1) 是 ArkTS 中与 Flutter Expanded 完全对应的弹性布局属性。其工作原理如下：

Row() {
  Text('用户姓名').width(120)      // 非弹性：固定 120px
  TextInput({...}).layoutWeight(1) // 弹性：占据全部剩余空间
}

布局引擎计算流程：

1. Row 先测量所有非弹性子节点（固定宽度的 Text），确定其占用空间。
2. Row 计算剩余可用空间 = Row 总宽度 - 非弹性子节点宽度 - 间距。
3. layoutWeight 子节点按权重比例分配剩余空间。仅一个弹性节点时，无论权重值多少，都占据全部剩余空间。
4. 弹性子节点被约束到分配的空间大小后，再进行内部布局。

注意事项：

• 避免混用 .layoutWeight 和 .flexGrow，可能产生预期外的冲突。
• 嵌套布局时，内层 layoutWeight 参照的是外层弹性分配后的可用空间。
• 设置 .layoutWeight 后，同时设置的 .width() 会被忽略。

三、完整实战代码解析

3.1 页面整体架构

Scroll
 └── Column
      ├── Text("个人信息")                  // 标题
      ├── Text("使用 Row + SizedBox...")    // 副标题
      ├── Column (卡片容器)
      │    ├── Row  (姓名)     → Text.width(120) + TextInput.layoutWeight(1)
      │    ├── Divider
      │    ├── Row  (手机)     → Text.width(120) + TextInput.layoutWeight(1)
      │    ├── Divider
      │    ├── Row  (邮箱)     → Text.width(120) + TextInput.layoutWeight(1)
      │    ├── Divider
      │    ├── Row  (性别)     → Text.width(120) + Radio 组.layoutWeight(1)
      │    ├── Divider
      │    ├── Row  (简介)     → Text.width(120) + TextArea.layoutWeight(1)
      │    ├── Divider
      │    └── Row  (头像)     → Text.width(120) + Column(图+文).layoutWeight(1)
      └── Button("保存信息")

3.2 状态管理

@Entry
@Component
struct Index {
  @State name: string = '';
  @State phone: string = '';
  @State email: string = '';
  @State bio: string = '';
  @State gender: number = 0; // 0=保密 1=男 2=女
}

@State 声明响应式状态变量——值变化时，框架自动重新渲染依赖它们的组件。@State 适合组件内部私有状态；@Prop 适合父组件单向传入；@Link 适合跨页面双向同步。

3.3 外层容器

Scroll() {
  Column() {
    // 页面内容...
  }
  .width('100%').padding({ top: 40 }).backgroundColor('#F0F2F5')
}
.width('100%').height('100%').backgroundColor('#F0F2F5')

• Scroll：表单内容超屏幕时允许滚动，是表单页面的标配。
• 背景色分层：Scroll 灰色 #F0F2F5 + 表单卡片白色 #FFFFFF，形成清晰的视觉焦点。

3.4 标题与卡片容器

Text('个人信息').fontSize(24).fontWeight(FontWeight.Bold)
  .fontColor('#1A1A2E').width('100%').textAlign(TextAlign.Center)
  .margin({ top: 24, bottom: 8 })

Text('使用 Row + SizedBox(width:120) + Expanded 精确对齐布局')
  .fontSize(13).fontColor('#888888').width('100%')
  .textAlign(TextAlign.Center).margin({ bottom: 24 })

// 表单卡片容器
Column() { /* 6 行表单项 */ }
  .width('92%').padding(20).backgroundColor('#FFFFFF')
  .borderRadius(16)
  .shadow({ radius: 8, color: 'rgba(0,0,0,0.06)', offsetX: 0, offsetY: 2 })

卡片设计优势：白色浮层在灰色背景上形成层次感，16px 圆角符合 OH Design 规范，92% 宽度留出左右 4% 边缘空间避免贴边压迫感。

3.5 第1-3行：基础表单行

Row() {
  Text('用户姓名')
    .width(120)               // 固定标签宽度，纵对齐基石
    .fontSize(15).fontColor('#333333')
    .textAlign(TextAlign.End) // 右对齐，使所有标签右边缘落在同一垂直线

  TextInput({ placeholder: '请输入姓名', text: this.name })
    .layoutWeight(1)          // 内容区自动撑满
    .height(40).padding({ left: 12 })
    .backgroundColor('#F5F7FA').borderRadius(8)
    .fontSize(15)
    .onChange((value: string) => { this.name = value })
}
.width('100%')
.alignItems(VerticalAlign.Center) // 标签与输入框垂直居中
.margin({ top: 8, bottom: 8 })

各属性作用：

属性	作用
.width(120)	标签区固定 120px，所有内容从此坐标开始排列
.textAlign(TextAlign.End)	文字靠右，"姓名"与"手机号码"右边缘完美对齐
.layoutWeight(1)	占据标签后全部剩余宽度，自动适配各种屏幕
.backgroundColor('#F5F7FA')	浅灰色背景标识可输入区域
alignItems(VerticalAlign.Center)	保证标签与输入框垂直方向处于同一水平线

手机号与邮箱增强：

// 手机号
.type(InputType.Number)    // 数字键盘
.maxLength(11)             // 限制 11 位

// 邮箱
.type(InputType.Email)     // 邮箱键盘，含 @ 和 . 快捷键

3.6 第4行：性别（Radio 单选组）

Row() {
  Text('性别').width(120).fontSize(15).fontColor('#333333')
    .textAlign(TextAlign.End)

  Row() {   // 内层 Row 放置三个选项
    Row() {
      Radio({ value: '0', group: 'genderGroup' })
        .checked(this.gender === 0)
        .onChange(() => { this.gender = 0 })
      Text('保密').fontSize(15).fontColor('#555555')
    }.margin({ right: 24 })

    Row() {
      Radio({ value: '1', group: 'genderGroup' })
        .checked(this.gender === 1)
        .onChange(() => { this.gender = 1 })
      Text('男').fontSize(15).fontColor('#555555')
    }.margin({ right: 24 })

    Row() {
      Radio({ value: '2', group: 'genderGroup' })
        .checked(this.gender === 2)
        .onChange(() => { this.gender = 2 })
      Text('女').fontSize(15).fontColor('#555555')
    }
  }
  .layoutWeight(1)           // Radio 组占据剩余空间
  .padding({ left: 8 }).height(40)
}
.alignItems(VerticalAlign.Center)

关键点：

• group 属性：三个 Radio 的 group 均为 'genderGroup'，保证互斥选择。
• checked 双向绑定：this.gender === n 控制选中状态，onChange 更新数据后 UI 自动刷新。
• margin 分隔：选项间 24px 间距，呼吸感适中。
• 内层 Row.layoutWeight(1)：嵌套弹性布局，内容区宽度由外层 Row 剩余宽度决定。

3.7 第5行：个人简介（多行文本对齐）

Row() {
  Text('个人简介')
    .width(120).fontSize(15).fontColor('#333333')
    .textAlign(TextAlign.End)
    .alignSelf(ItemAlign.Start)     // 标签靠顶
    .margin({ top: 10 })

  TextArea({ placeholder: '请简要介绍自己……', text: this.bio })
    .layoutWeight(1).height(100)
    .padding({ left: 12 })
    .backgroundColor('#F5F7FA').borderRadius(8)
    .fontSize(15)
    .onChange((value: string) => { this.bio = value })
}
.alignItems(VerticalAlign.Top)      // 整行顶部对齐

对齐技巧：

• .alignItems(VerticalAlign.Top)：如果默认 center，100px 高的 TextArea 居中，标签也会居中——但标签与 TextArea 首行文字不在同一水平线，阅读时视线需要上下跳跃。
• .alignSelf(ItemAlign.Start) + .margin({top: 10})：标签靠顶 + 微调偏移，使其与 TextArea 内边距后的首行文字齐平。

3.8 第6行：头像（图文混排，API 24 兼容）

Row() {
  Text('头像')
    .width(120).fontSize(15).fontColor('#333333')
    .textAlign(TextAlign.End)
    .alignSelf(ItemAlign.Start)
    .margin({ top: 20 })

  Column() {
    // 兼容 API 24：Row + borderRadius 替代 Circle.fill
    Row()
      .width(64).height(64)
      .borderRadius(32)             // 圆角 = 宽高一半 → 正圆
      .backgroundColor('#E8ECF1')   // 浅灰色占位
      .border({ width: 1, color: '#CCCCCC' })

    Text('点击上传头像')
      .fontSize(12).fontColor('#999999')
      .margin({ top: 6 })
  }
  .layoutWeight(1)
  .alignItems(HorizontalAlign.Start)
  .padding({ left: 8 })
}
.alignItems(VerticalAlign.Top)

API 24 兼容关键：Circle 的 fill 属性仅支持 SDK 26+。此处用 Row().borderRadius(32).backgroundColor(...) 替代，效果等价，API 24 完全兼容。

四、API 24 兼容性适配

4.1 兼容性问题清单

API	API 24 状态	解决方案
Circle.fill	❌ 仅 SDK 26+	Row + borderRadius(宽高一半) + backgroundColor
.shadow() radius	⚠️ 效果有限	正常使用基础参数
.backgroundColor()	✅ 完整支持	直接使用
.borderRadius()	✅ 完整支持	直接使用
TextInput.type()	✅ 完整支持	直接使用
FontWeight.*	✅ 完整支持	推荐 Bold / Medium / Normal
.border({width,color})	✅ 完整支持	直接使用

4.2 运行时检测与项目适配

对于需要兼容多版本 SDK 的场景，使用 canIUse 运行检测：

if (canIUse('SystemCapability.ArkUI.ArkUI.Circle.fill')) {
  Circle().width(64).height(64).fill('#E8ECF1')
} else {
  Row().width(64).height(64).borderRadius(32).backgroundColor('#E8ECF1')
}

本项目已完成全部 API 24 适配：

• 圆形头像：Row + borderRadius + backgroundColor 替代 Circle.fill。
• 阴影：使用基础 shadow 参数，不依赖高版本扩展属性。
• 字体：仅使用 Bold / Medium / Normal 三种稳定字重。

五、最佳实践总结

5.1 标签宽度选择策略

宽度	适用场景
80px	超短标签（“姓名”“性别”），小屏优化
120px	标准中英文表单（强烈推荐）
140px	标签含 5-7 个中文或较长英文词组
160px	超长标签，建议配合 layoutWeight 保证内容区

5.2 垂直对齐黄金法则

内容类型	对齐方式	代码
单行输入框	垂直居中	Row.alignItems(VerticalAlign.Center)
多行文本区	顶部对齐 + 偏移	VerticalAlign.Top + Text.alignSelf(Start) + margin({top: x})
图文组合	顶部对齐 + 较大偏移	VerticalAlign.Top + 标签 margin({top: 20})
开关/复选框	垂直居中	VerticalAlign.Center

5.3 常见陷阱排查

问题	原因	解决方案
标签宽度不一致	某行 width 值不同	统一所有标签的 width 值
内容区未扩展	未设置 layoutWeight	检查是否添加 .layoutWeight(1)
标签与输入框不居中	Row 缺少 alignItems	补充交叉轴对齐设置
多行 TextArea 标签偏移	alignSelf + margin 未配好	调整 alignSelf(Start) + 上边距
页面溢出不滚动	缺少 Scroll	外层包裹 Scroll 组件
圆形头像显示为矩形	borderRadius 不足	确保 borderRadius = width/2
Radio 无法单选	group 值不一致	统一 group 属性值

5.4 响应式扩展：动态标签宽度

在平板或横屏场景，可根据屏幕宽度动态调整标签宽度：

import { display } from '@kit.ArkUI';

@State labelWidth: number = 120;

aboutToAppear() {
  let screenWidth = display.getDefaultDisplaySync().width;
  if (screenWidth >= 1000) this.labelWidth = 180;
  else if (screenWidth >= 600) this.labelWidth = 150;
  else this.labelWidth = 120;
}

// 监听横竖屏切换
window.getLastWindow(this.context, (err, win) => {
  win.on('windowSizeChange', (size) => {
    this.labelWidth = size.width >= 1000 ? 180 : 120;
  });
});

5.5 无障碍与适老化

• 点击区域：Radio 和 Button 触摸目标不小于 44x44vp。
• 对比度：#333333 标签色与白色背景对比度约 10:1，远超 WCAG AA 标准。
• 相对字号：建议结合 $r('app.float.*') 系统资源引用，支持字体缩放。
• 内边距：输入框 padding({left: 12}) 保证文字不贴边。

5.6 与鸿蒙设计规范的一致性

本方案与 OH Design 原则高度契合：

• 清晰信息层级：固定标签 + 内容区的分割让字段意义一目了然。
• 统一对齐规则：120px 固定宽度确保所有标签右边缘对齐。
• 8px 网格体系：间距值（8、12、16、20、24）均基于 8px 基准。
• 适应性布局：layoutWeight 使内容区自适应，符合"一次开发、多端部署"理念。

5.7 规律总结

布局正确性可以通过以下三步快速验证：

第一步：检查每一行的标签——是否都统一设置了 .width(120)？是否有某行遗漏？

第二步：检查每一行的内容区——是否都设置了 .layoutWeight(1)？是否有意外使用固定宽度替代？

第三步：检查对齐方式——单行输入是 VerticalAlign.Center 吗？多行或图文是 VerticalAlign.Top 加 alignSelf 吗？

三步检查通过，布局基本不会出错。如果视觉仍不满意，微调第 2 步中标签的 .margin({top}) 偏移值即可。

六、结语

Row + SizedBox(width:120) + Expanded 的鸿蒙等效实现——Row + .width(120) + .layoutWeight(1)，是一套代码简洁、效果稳定、维护成本低的精确对齐布局方案。

核心四要素：

1. 固定标签宽度 .width(120)——纵向对齐基石
2. 内容区弹性撑满 .layoutWeight(1)——屏幕自适应
3. 垂直对齐精细控制 VerticalAlign + alignSelf——多行/图文不乱
4. API 24 兼容——避开 Circle.fill，使用 Row + borderRadius 替代

掌握此模式后，无论是标准表单、图文详情页，还是多屏幕适配，都能高效构建、一劳永逸。

---

本文配套代码：entry/src/main/ets/pages/Index.ets，已通过 API 24 (HarmonyOS 4.0+) hvigor 构建验证，零 Error、零 Warning。