鸿蒙原生 ArkTS 布局深度解析（一）：Column 嵌套弹性布局实战

---

一、引言

在移动端开发中，纵向分层是最普遍的页面结构——社交 App 的个人主页、电商 App 的商品详情、管理后台的数据看板，都遵循"从上到下分区、分区内部横向排列"的范式。

HarmonyOS NEXT 的 ArkTS 体系中，Column 和 Row 承担了类似 Web Flexbox 的角色，但有其独特的弹性属性体系。真实页面往往是二维的：纵向分大区，大区内部横向分小区，小区内部再纵向堆叠文字。这意味着 Column 套 Row、Row 套 Column 的多层嵌套不可避免。

本文通过一个 “用户个人中心仪表盘” 案例，逐层拆解 Column 嵌套弹性布局的全部细节，涵盖 flexGrow、flexShrink、layoutWeight、@Builder 封装、多级 flex 数学原理等核心知识点。

---

二、弹性属性速览

Column 和 Row 共享以下关键弹性属性：

属性	类型	说明
flexGrow(n)	number	弹性扩张系数，0 不扩张
flexShrink(n)	number	弹性收缩系数，0 不收缩
layoutWeight(n)	number	按权重瓜分父容器主轴空间
alignSelf(align)	ItemAlign	交叉轴对齐方式
flexBasis(value)	Length	主轴基础尺寸

flexGrow 与 layoutWeight 的核心区别：

• flexGrow：分配的是父容器的剩余空间（扣除固定尺寸后）
• layoutWeight：按权值瓜分父容器的全部主轴空间（扣除固定尺寸组件后）

例如父容器 600px，子组件 A 固定 100px，B 和 C 分别 layoutWeight(2) 和 (3)：

• 剩余空间 = 600 - 100 = 500px
• B = 500 × 2/5 = 200px，C = 500 × 3/5 = 300px

Blank() 是一个特殊占位组件，自动扩张填满 Row 或 Column 的剩余空间，常用于标题栏两端撑开。

---

三、布局架构全景

本案例模拟用户个人中心仪表盘，页面结构如下：

┌──────────────────────────────────────────────────┐
│  ← 返回              个人中心              ⋯ 更多 │  标题栏（固定高度）
├──────────────────────────────────────────────────┤
│  ┌────────────────────────────────────────────┐  │
│  │  ● 头像   张明华                   [编辑]    │  │  flex: 2
│  │             Lv.6 高级会员                    │  │
│  ├────────────────────────────────────────────┤  │
│  │   1,280             186             5,680   │  │  flex: 3
│  │    粉丝             关注             获赞   │  │
│  ├────────────────────────────────────────────┤  │
│  │  功能服务                                    │  │
│  │  ┌──────┬──────┬──────┐                     │  │  flex: 4
│  │  │ 📦   │ ❤️   │ 💬  │                     │  │
│  │  │订单   │收藏   │消息  │                     │  │
│  │  ├──────┼──────┼──────┤                     │  │
│  │  │ 👥   │ 📅   │ ⚙️  │                     │  │
│  │  │好友   │日程   │设置  │                     │  │
│  │  └──────┴──────┴──────┘                     │  │
│  ├────────────────────────────────────────────┤  │
│  │  最近动态                                    │  │  flex: 3
│  │  ● 李明 点赞了你的照片          3分钟前      │  │
│  │  ● 王芳 评论了你的动态          15分钟前     │  │
│  └────────────────────────────────────────────┘  │
├──────────────────────────────────────────────────┤
│  🏠 首页    🔍 发现    ❤️ 关注    👤 我的       │  底部Tab（高度56px固定）
└──────────────────────────────────────────────────┘

纵向弹性分配比例（弹性总份数 = 2 + 3 + 4 + 3 = 12）：

区域	flexGrow	弹性占比
标题栏	0	固定不伸缩
用户信息卡片	2	2/12 ≈ 16.7%
统计数据行	3	3/12 = 25%
功能菜单网格	4	4/12 ≈ 33.3%（最大）
最近动态列表	3	3/12 = 25%
底部 Tab 栏	0	56px 固定

---

四、逐层拆解

4.1 第 1 层：全屏 Column——三大区域骨架

Column() {
  // 区域1：标题栏 Row，flexGrow:0, flexShrink:0（固定不伸缩）
  // 区域2：内容区 Column，flexGrow:1（填满剩余）
  // 区域3：底部Tab栏 Row，flexGrow:0, flexShrink:0（固定56px）
}
.width('100%')
.height('100%')
.backgroundColor('#F0F2F5')

最外层 Column 设 height('100%') 铺满屏幕。三个子节点中，标题栏和 Tab 栏通过 flexShrink(0)+flexGrow(0) 锁定尺寸，内容区用 flexGrow(1) 独占剩余空间。这是"固定头尾 + 弹性中部"的经典模式。

4.2 标题栏：Blank 两端撑开

Row() {
  Text('⬅ 返回')
  Blank().flexGrow(1)    // 左侧弹性空白
  Text('个人中心')
    .fontSize(18).fontWeight(FontWeight.Bold)
  Blank().flexGrow(1)    // 右侧弹性空白
  Text('••• 更多')
}

两个 Blank().flexGrow(1) 对称瓜分剩余空间，使"个人中心"居中，左右文字自动贴边。无需手动计算 margin 即可实现标准导航栏布局。

4.3 第 2 层：内容区 Column——四张弹性卡片

Column() {
  // 2-1 用户信息卡片    .flexGrow(2)
  Blank().height(10)     // 卡片间隙（固定）
  // 2-2 统计数据行      .flexGrow(3)
  Blank().height(10)
  // 2-3 功能菜单网格    .flexGrow(4)
  Blank().height(10)
  // 2-4 最近动态列表    .flexGrow(3)
}
.padding(12)
.flexGrow(1)             // 填满外部Column剩余空间

这是整个布局的核心层。四个子卡片通过不同 flexGrow 系数实现非均匀弹性分配。间隙用固定高度 Blank 替代 margin，让弹性计算更透明。

4.4 2-1 用户信息卡片：Row 内混合弹性

Column() {
  Row() {
    Row().width(56).height(56).borderRadius(28)  // 头像
    Blank().width(12)
    Column() {                                     // 姓名 + 等级
      Text('张明华').fontSize(20)
      Text('Lv.6 高级会员').fontSize(12)
    }.layoutWeight(1)                              // ★ 占据剩余空间
    Text('编辑').fontSize(13)                      // 编辑按钮
  }
}
.flexGrow(2)   // ★ 在内容区Column中占2份

layoutWeight(1) 使中间区域弹性占满头像与编辑按钮之间的宽度。外层 flexGrow(2) 控制纵向占比。这就是"外纵内横"模式的典型应用。

4.5 2-2 统计数据行：三等分一行

Row() {
  this.statCard('粉丝', 1280, '#FF6B81').layoutWeight(1)
  this.statCard('关注', 186, '#4ECDC4').layoutWeight(1)
  this.statCard('获赞', 5680, '#45B7D1').layoutWeight(1)
}
.flexGrow(3)   // 纵向占3份

三个 layoutWeight(1) 实现水平三等分。@Builder statCard() 封装了数字 + 标签的重复结构。

4.6 2-3 功能菜单网格：行内再分列

Column() {                   // 外层Column（flexGrow:4）
  Text('功能服务').alignSelf(ItemAlign.Start)
  Row() {                    // 第1行
    ForEach(items.slice(0,3), (item) => {
      this.menuCell(item.icon, item.label).layoutWeight(1)
    }, (item) => item.label)
  }.flexGrow(1)
  Blank().height(8)
  Row() {                    // 第2行
    ForEach(items.slice(3,6), (item) => {
      this.menuCell(item.icon, item.label).layoutWeight(1)
    }, (item) => item.label)
  }.flexGrow(1)
}

嵌套层次最深：外层 Column 分两行（各 flexGrow:1），行内 Row 用 layoutWeight(1) 三等分。ForEach 的第三个参数 keyGenerator 为每个菜单项生成唯一标识，提升 diff 更新效率。

4.7 2-4 最近动态列表：列表项等分

每条动态是一个 Row，内部 Column 用 layoutWeight(1) 弹性占宽。每条 flexGrow(1) 使三条动态在卡片内等分高度。

4.8 底部 Tab 栏：固定尺寸

Row() {
  this.tabItem('🏠', '首页')
  this.tabItem('🔍', '发现')
  this.tabItem('❤️', '关注')
  this.tabItem('👤', '我的')
}
.height(56)
.flexShrink(0).flexGrow(0)   // 完全锁定
.justifyContent(FlexAlign.SpaceAround)  // 均匀分布

三重保证（height + flexShrink + flexGrow）使底部导航完全脱离弹性系统。

---

五、多级 flex 数学原理

以 800px 屏幕高度为例，计算弹性分配过程：

第 1 步：最外层 Column 分配

• 标题栏 ~48px + 底部 Tab 56px = 固定 104px
• 弹性内容区 = 800 - 104 = 696px
• 减去内容区 padding(12×2) = 672px 可用

第 2 步：内容区 Column 内四张卡片

• 固定部分 ≈ 118px（含 padding、间隙）
• 弹性空间 = 672 - 118 = 554px
• 总份数 = 2 + 3 + 4 + 3 = 12

卡片	flexGrow	弹性高度	总高（含固定）
用户信息	2	554×2/12≈92px	~108px
统计数据	3	554×3/12≈139px	~143px
功能菜单	4	554×4/12≈185px	~201px
最近动态	3	554×3/12≈139px	~155px

第 3 步：卡片内部再分配

以功能菜单（~201px）为例：

• 标题文字 ~22px + 间隙 8px = 固定 30px
• 弹性空间 = 201 - 30 = 171px
• 两行 Row 各 flexGrow:1 → 每行 ≈ 86px
• 行内 3 个 menuCell 各 layoutWeight:1 → 宽度各 1/3

屏幕适配优势：

• 800px→600px（小屏）：弹性空间从 554px 缩减到 354px，比例不变，等比例缩小
• 800px→1200px（平板）：弹性空间扩展到 954px，比例不变，等比例放大
• 一套代码适配所有尺寸

---

六、完整源码

/**
 * Column嵌套弹性布局 Demo
 * 场景：用户个人中心仪表盘
 * 核心技术：Column嵌套Column/Row + 多级flex
 */
import router from '@ohos.router';

interface MenuItem { icon: string; label: string; }
interface ActivityItem { user: string; action: string; time: string; }

@Entry
@Component
struct ColumnNestedFlexLayout {
  @State userName: string = '张明华';
  @State userLevel: string = 'Lv.6 高级会员';
  @State fansCount: number = 1280;
  @State followCount: number = 186;
  @State likesCount: number = 5680;

  private menuItems: MenuItem[] = [
    { icon: '📦', label: '我的订单' }, { icon: '❤️', label: '我的收藏' },
    { icon: '💬', label: '消息中心' }, { icon: '👥', label: '好友列表' },
    { icon: '📅', label: '日程管理' }, { icon: '⚙️', label: '系统设置' },
  ];

  private activities: ActivityItem[] = [
    { user: '李明', action: '点赞了你的照片', time: '3分钟前' },
    { user: '王芳', action: '评论了你的动态', time: '15分钟前' },
    { user: '赵强', action: '转发了你的文章', time: '1小时前' },
  ];

  build() {
    // ═══ 第1层：全屏Column → 标题栏 / 弹性内容区 / 底部Tab ═══
    Column() {
      // ── 标题栏（固定高度） ──
      Row() {
        Text('⬅ 返回').fontSize(15).onClick(() => router.back())
        Blank().flexGrow(1)
        Text('个人中心').fontSize(18).fontWeight(FontWeight.Bold)
        Blank().flexGrow(1)
        Text('••• 更多').fontSize(15)
      }
      .width('100%').padding({ left: 16, right: 16, top: 12, bottom: 12 })
      .backgroundColor('#FFFFFF')
      .flexShrink(0).flexGrow(0)   // ★ 固定不伸缩

      // ── 弹性内容区（flexGrow:1 → 填满剩余） ──
      Column() {
        // 2-1 用户信息卡片 | flex: 2
        Column() {
          Row() {
            Row().width(56).height(56).borderRadius(28)
              .backgroundColor('#FF6B81')
            Blank().width(12)
            Column() {
              Text(this.userName).fontSize(20).fontWeight(FontWeight.Medium)
              Blank().height(6)
              Text(this.userLevel).fontSize(12).fontColor('#FFFFFF')
                .backgroundColor('#FF6B6B').borderRadius(10)
                .padding({ left: 10, right: 10, top: 3, bottom: 3 })
            }.layoutWeight(1)    // ★ 横向弹性占满
            Blank().width(10)
            Text('编辑').fontSize(13).fontColor('#FF6B81')
              .border({ width: 1, color: '#FF6B81' }).borderRadius(14)
              .padding({ left: 14, right: 14, top: 5, bottom: 5 })
          }.width('100%').alignItems(VerticalAlign.Center)
        }.width('100%').padding(16).backgroundColor('#FFFFFF')
        .borderRadius(12).shadow({ radius: 4, offsetY: 2 })
        .flexGrow(2)    // ★ 纵向占2份

        Blank().height(10)   // 卡片间隙

        // 2-2 统计数据行 | flex: 3
        Row() {
          this.statCard('粉丝', this.fansCount, '#FF6B81').layoutWeight(1)
          this.statCard('关注', this.followCount, '#4ECDC4').layoutWeight(1)
          this.statCard('获赞', this.likesCount, '#45B7D1').layoutWeight(1)
        }.width('100%').padding(4).backgroundColor('#FFFFFF')
        .borderRadius(12).shadow({ radius: 4, offsetY: 2 })
        .flexGrow(3)    // ★ 纵向占3份

        Blank().height(10)

        // 2-3 功能菜单网格 | flex: 4
        Column() {
          Text('功能服务').fontSize(16).fontWeight(FontWeight.Bold)
            .alignSelf(ItemAlign.Start).margin({ bottom: 8 })
          Row() {
            ForEach(this.menuItems.slice(0, 3),
              (item: MenuItem) => this.menuCell(item.icon, item.label)
                .layoutWeight(1),
              (item: MenuItem): string => item.label)
          }.width('100%').flexGrow(1)
          Blank().height(8)
          Row() {
            ForEach(this.menuItems.slice(3, 6),
              (item: MenuItem) => this.menuCell(item.icon, item.label)
                .layoutWeight(1),
              (item: MenuItem): string => item.label)
          }.width('100%').flexGrow(1)
        }.width('100%').padding(16).backgroundColor('#FFFFFF')
        .borderRadius(12).shadow({ radius: 4, offsetY: 2 })
        .flexGrow(4)    // ★ 纵向占4份

        Blank().height(10)

        // 2-4 最近动态列表 | flex: 3
        Column() {
          Text('最近动态').fontSize(16).fontWeight(FontWeight.Bold)
            .alignSelf(ItemAlign.Start).margin({ bottom: 8 })
          ForEach(this.activities,
            (item: ActivityItem) => {
              Row() {
                Row().width(32).height(32).borderRadius(16)
                  .backgroundColor('#E8E8E8')
                Blank().width(10)
                Column() {
                  Row() {
                    Text(item.user).fontSize(14).fontWeight(FontWeight.Medium)
                    Text(item.action).fontSize(14).fontColor('#666666')
                      .margin({ left: 4 })
                  }
                  Text(item.time).fontSize(11).fontColor('#AAAAAA')
                    .margin({ top: 2 })
                }.layoutWeight(1)
              }.width('100%').padding({ top: 8, bottom: 8 }).flexGrow(1)
            },
            (item: ActivityItem): string => item.user + item.time)
        }.width('100%').padding(16).backgroundColor('#FFFFFF')
        .borderRadius(12).shadow({ radius: 4, offsetY: 2 })
        .flexGrow(3)    // ★ 纵向占3份
      }
      .width('100%').height('100%').padding(12)
      .flexGrow(1).flexShrink(1)   // ★ 弹性填满

      // ── 底部Tab栏（固定56px） ──
      Row() {
        this.tabItem('🏠', '首页'); this.tabItem('🔍', '发现')
        this.tabItem('❤️', '关注'); this.tabItem('👤', '我的')
      }
      .width('100%').height(56).backgroundColor('#FFFFFF')
      .shadow({ radius: 6, offsetY: -2 })
      .flexShrink(0).flexGrow(0)   // ★ 固定不伸缩
      .justifyContent(FlexAlign.SpaceAround)
      .alignItems(VerticalAlign.Center)
    }
    .width('100%').height('100%').backgroundColor('#F0F2F5')
  }

  @Builder statCard(label: string, count: number, color: string) {
    Column() {
      Text(count.toString()).fontSize(22).fontWeight(FontWeight.Bold)
        .fontColor(color)
      Blank().height(4)
      Text(label).fontSize(13).fontColor('#999999')
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
    .height('100%')
  }

  @Builder menuCell(icon: string, label: string) {
    Column() {
      Text(icon).fontSize(28)
      Blank().height(6)
      Text(label).fontSize(13).fontColor('#555555')
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
    .height('100%')
  }

  @Builder tabItem(icon: string, label: string) {
    Column() {
      Text(icon).fontSize(22)
      Text(label).fontSize(11).fontColor('#888888').margin({ top: 2 })
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

---

七、常见问题

7.1 弹性分配不符合预期

检查：① 父容器是否设置了宽度/高度约束；② 子组件是否有非零的固定尺寸（padding、border 等会先于弹性分配扣除）；③ 同一层的 flexGrow 总和是否正确。

7.2 内容溢出

弹性分配后组件尺寸变小但内容没自适应。解决办法：Text 加 .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })，图片加 .objectFit(ImageFit.Cover)。

7.3 Row 内元素垂直堆叠

Row 的子组件需设 layoutWeight(1) 或明确宽度，Row 本身要设 width('100%')。

7.4 @Builder + layoutWeight 无效

在 @Builder 组件外部包装一层 Row/Column 再设 layoutWeight，或在 @Builder 内部完成弹性布局。

7.5 ForEach 不更新 UI

确保 keyGenerator 返回唯一标识符，修改数组时创建新引用（this.list = [...this.list, item]）。

7.6 Blank 不生效

检查父容器是否有明确尺寸约束（width('100%') 或 height('100%')），否则 Blank 无剩余空间可填充。

7.7 性能建议

• Column 嵌套不超过 5 层，过深影响布局计算
• 频繁复用的布局段封装为 @Builder
• ForEach 必须指定 keyGenerator 以避免全量刷新
• 固定尺寸子组件加 flexShrink(0) 防止意外压缩

---

八、总结

本文通过"用户个人中心"案例完整展示了 Column 嵌套弹性布局的核心技术：

知识点	应用方式
固定头尾 + 弹性中部	flexShrink(0) + flexGrow(0) 锁定头尾
多级弹性分配	外层 Column 按 2:3:4:3 分配，内部 Row 再次分配
横向均分	layoutWeight(1) 或 JustifyContent.SpaceAround
Blank 占位伸缩	标题栏两端撑开，卡片间隙
@Builder 封装	statCard、menuCell、tabItem 复用

同样的布局模式可推广到新闻详情页、商品详情页、设置页面等场景。下一篇将讲解 Row 嵌套弹性布局——水平滚动的标签栏与自适应卡片流。

---