构建弹性布局组件 FlexBox（统一对齐 + 排版 + 响应式辅助） HarmonyOS 5.0.0 或以上-CSDN博客

本文链接：https://blog.csdn.net/2501_92052054/article/details/148059570

✅ 背景说明

在企业级 UI 开发中，页面中大量使用“横向排列 / 两列布局 / 顶部对齐 / 居中显示”等弹性布局模式。

虽然 ArkTS 提供了 Row、Column、Flex 等原子组件，但每次都要重复配置对齐方式、间距、间距写法不统一，极易导致：

样式零散，不可维护
多人协作布局风格混乱
写法繁琐、排版对齐问题多

因此，本篇我们封装一个 FlexBox 弹性布局组件，用于规范化横向 / 纵向 / 居中 / 对齐 / 间距等常见模式，提升开发效率与 UI 一致性。

🧱 一、组件目标功能

支持方向配置（横 / 纵）
支持对齐方式（水平、垂直）
支持自动换行
支持间距（gap）统一设置
可快速用于居中、两端对齐、响应式分组等

📦 二、组件结构定义

@Component
struct FlexBox {
  @Prop direction: 'row' | 'column' = 'row';
  @Prop justify: 'start' | 'center' | 'end' | 'between' | 'around' = 'start';
  @Prop align: 'start' | 'center' | 'end' | 'stretch' = 'center';
  @Prop wrap: boolean = false;
  @Prop gap: number = 10;
  @Slot content?: () => void;
}

🧩 三、对齐参数转换逻辑

private mapJustify(val: string): FlexAlign {
  switch (val) {
    case 'start': return FlexAlign.Start;
    case 'center': return FlexAlign.Center;
    case 'end': return FlexAlign.End;
    case 'between': return FlexAlign.SpaceBetween;
    case 'around': return FlexAlign.SpaceAround;
    default: return FlexAlign.Start;
  }
}

private mapAlign(val: string): HorizontalAlign {
  switch (val) {
    case 'start': return HorizontalAlign.Start;
    case 'center': return HorizontalAlign.Center;
    case 'end': return HorizontalAlign.End;
    case 'stretch': return HorizontalAlign.Stretch;
    default: return HorizontalAlign.Center;
  }
}

🧩 四、组件渲染结构

build() {
  const base = this.direction === 'row'
    ? Row({ space: this.gap })
    : Column({ space: this.gap });

  base
    .alignItems(this.mapAlign(this.align))
    .justifyContent(this.mapJustify(this.justify))
    .wrap(this.wrap ? Wrap.Wrap : Wrap.NoWrap);

  if (this.content) this.content!();
}

🧪 五、父组件使用示例

✅ 居中横向布局

FlexBox({ justify: 'center', align: 'center', gap: 12 }) {
  Button('确定')
  Button('取消')
}

✅ 垂直排列 + 居中对齐

FlexBox({ direction: 'column', align: 'center', gap: 8 }) {
  Text('登录账号')
  TextInput({ placeholder: '请输入' })
}

✅ 两端对齐带间距

FlexBox({ justify: 'between', align: 'center', gap: 6 }) {
  Text('左侧')
  Text('右侧')
}

⚠️ 六、常见问题与建议

问题	原因	建议
对齐不生效	`align` 与 `Row/Column` 不匹配	水平方向用 `justify`，垂直方向用 `align`
间距不统一	未使用 `gap` 或写死 `padding`	使用统一传参 `gap=8/10/16`
无法换行	默认 `wrap: false`	设置 `wrap: true` 支持内容溢出自动折行