一、前言

在移动端 UI 开发中，等分布局是最常见也最基础的需求之一。无论是导航栏的菜单项、表单的输入框组、还是商品列表的卡片排列，我们往往需要将多个子组件在水平方向上均匀排列，使它们各占相同的宽度。

传统的做法是手动计算每个子项的宽度百分比——如果有 4 个子项，每个宽度设为 25%；如果变成 5 个，就要改为 20%。这种方式不仅繁琐，而且在子项数量动态变化时几乎不可维护。

HarmonyOS ArkTS 提供的 layoutWeight 属性完美解决了这个问题。它采用权重分配的思想，让 Row 容器的子项按指定的权重比例自动计算宽度，开发者只需告诉系统"这个子项的重要性是其他子项的几倍"，系统就会自动完成宽度计算，无需任何手动百分比。

本文将通过实际可运行的代码和丰富的演示场景，深入剖析 layoutWeight 的使用方法、底层原理、常见陷阱和最佳实践。

---

二、layoutWeight 核心概念

2.1 什么是 layoutWeight？

layoutWeight 是 ArkTS 中 Row 和 Column 容器子组件的一个属性。它表示该子组件在主轴方向上占据的权重值。当父容器的尺寸确定后，系统会根据所有子组件的权重值按比例分配可用空间。

对于 Row 容器而言，主轴方向是水平方向，因此 layoutWeight 决定的是子组件的宽度。

2.2 核心公式

子项宽度 = (该子项权重 ÷ 所有权重之和) × 父容器可用宽度

例如，Row 容器宽度为 360px，其中有 3 个子项，权重分别为 1、2、1，那么：

• 权重和 = 1 + 2 + 1 = 4
• A 宽度 = (1 ÷ 4) × 360 = 90px
• B 宽度 = (2 ÷ 4) × 360 = 180px
• C 宽度 = (1 ÷ 4) × 360 = 90px

2.3 与 CSS Flexbox 的对比

如果你有 Web 开发背景，可以类比 CSS Flexbox 中的 flex-grow 属性。两者都基于权重分配剩余空间，但有两个关键区别：

特性	CSS flex-grow	ArkTS layoutWeight
作用范围	仅分配剩余空间（flex-basis 之后的空间）	直接分配全部可用空间
权重基础	基于 flex-basis 计算	基于权重值直接按比例分配
混合固定宽度	支持（flex-basis 固定 + flex-grow 分配剩余）	支持（固定宽度子项先占，余下按权重分配）
默认值	0（不扩展）	无默认值，必须显式设置

简单来说，CSS 的 flex-grow 是在满足子项最小宽度需求后平分剩余空间，而 ArkTS 的 layoutWeight 更直接——所有子项的宽度完全由权重值决定。

2.4 layoutWeight 的基本语法

Row() {
  Column() { Text('A') }.layoutWeight(1)
  Column() { Text('B') }.layoutWeight(2)
  Column() { Text('C') }.layoutWeight(1)
}
.width('100%')
.height(60)

每一行代码的含义：

• .layoutWeight(1) —— 声明当前子项在主轴上权重为 1
• .layoutWeight(2) —— 权重为 2，占据的空间是权重为 1 的子项的 2 倍
• .width('100%') —— Row 容器必须有明确宽度，否则 layoutWeight 无法计算

关键前提： layoutWeight 生效的前提是 Row 容器本身具有明确的宽度。通常使用 .width('100%') 或 .width(360) 等方式指定。

---

三、等权平分 — 所有子项相同权重

3.1 基础用法

最简单的场景是让所有子项的 layoutWeight 值相等，此时各子项宽度完全相同。

// 等权平分 — 4 个子项各占 25%
Row() {
  Column() { Text('A') }.layoutWeight(1)
  Column() { Text('B') }.layoutWeight(1)
  Column() { Text('C') }.layoutWeight(1)
  Column() { Text('D') }.layoutWeight(1)
}
.width('100%')
.height(60)

由于 4 个子项的权重都是 1，权重和为 4，每个子项分得父容器宽度的 1/4。

3.2 等分数量动态变化

等权平分的最大优势在于：当子项数量动态增减时，无需修改任何宽度值。假设有一个标签栏，可以根据用户配置显示 3~6 个标签：

@State tabCount: number = 4;

build() {
  Row() {
    ForEach(this.rangeArray(this.tabCount), (idx: number) => {
      Column() {
        Text(`标签 ${idx + 1}`)
          .fontSize(14)
          .fontColor('#FFFFFF')
      }
      .layoutWeight(1)    // 始终等权
      .height(50)
    })
  }
  .width('100%')
}

在这个例子中，无论 tabCount 是 3、4、5 还是 6，每个标签都会自动平分 Row 的宽度，开发者完全不需要关心具体的宽度百分比。

3.3 等分 vs 百分比手动计算

对比两种方式：

方式一：手动计算百分比

// 4 项时写 25%，如果变成 5 项要改为 20%
Column().width('25%')   // 不灵活，数量变化时需手动改
Column().width('25%')
Column().width('25%')
Column().width('25%')

方式二：layoutWeight 自动平分

// 无论几项，始终 layoutWeight(1)，数量变化自动适应
Column().layoutWeight(1)  // 自动计算百分比
Column().layoutWeight(1)
Column().layoutWeight(1)
Column().layoutWeight(1)

结论： 只要子项之间需要水平均匀分布，优先使用 layoutWeight(1)，而非手动计算 width。

---

四、比例分配 — 不同权重值

4.1 为什么需要不同权重？

在实际应用中，子项并不总是需要等宽。常见场景包括：

• 搜索栏：搜索框占大部分宽度，搜索按钮占小部分
• 表单字段：标签占 1/3，输入框占 2/3
• 导航菜单：主菜单项宽，辅助菜单项窄
• 数据展示：数值大的列宽于数值小的列

layoutWeight 支持为不同子项设置不同的权重值，系统会根据权重之比自动分配宽度。

4.2 场景一：1:2:1 比例

这是经典的三段式布局——中间内容区是两侧的两倍宽。

// 1:2:1 — 中间项宽度是两侧项的两倍
Row() {
  Column() { Text('A') }.layoutWeight(1)  // 占 25%
  Column() { Text('B') }.layoutWeight(2)  // 占 50%
  Column() { Text('C') }.layoutWeight(1)  // 占 25%
}
.width('100%')
.height(60)

权重和 = 1 + 2 + 1 = 4，因此：

• A 宽度 = 1/4 = 25%
• B 宽度 = 2/4 = 50%
• C 宽度 = 1/4 = 25%

这种布局在仪表盘、文章详情页（左侧目录、中间正文、右侧广告）中非常常见。

4.3 场景二：1:2:3:4 比例

这是递增权重布局，视觉上呈现渐变加宽的效果。

// 1:2:3:4 — 递增权重
Row() {
  Column() { Text('A') }.layoutWeight(1)  // 占 10%
  Column() { Text('B') }.layoutWeight(2)  // 占 20%
  Column() { Text('C') }.layoutWeight(3)  // 占 30%
  Column() { Text('D') }.layoutWeight(4)  // 占 40%
}
.width('100%')
.height(60)

权重和 = 1 + 2 + 3 + 4 = 10，因此：

• A 占 10%，B 占 20%，C 占 30%，D 占 40%

这种布局适合在统计展示中突出权重较大的数据列，或者做渐变的进度指示器。

4.4 场景三：3:1:2 比例

非对称权重分配——某一项明显占主导。

// 3:1:2 — 主导项 + 两个次要项
Row() {
  Column() { Text('A') }.layoutWeight(3)  // 占 50%
  Column() { Text('B') }.layoutWeight(1)  // 占 16.67%
  Column() { Text('C') }.layoutWeight(2)  // 占 33.33%
}
.width('100%')
.height(60)

这种布局适合搜索页面（输入框占 3、搜索按钮占 1、筛选按钮占 2），或者人物访谈页（头像区小、对话区大、互动区中）。

4.5 场景四：1:1:2:2 比例

权重分组——两组宽窄对比。

// 1:1:2:2 — 前两项窄，后两项宽
Row() {
  Column() { Text('A') }.layoutWeight(1)  // 占 16.67%
  Column() { Text('B') }.layoutWeight(1)  // 占 16.67%
  Column() { Text('C') }.layoutWeight(2)  // 占 33.33%
  Column() { Text('D') }.layoutWeight(2)  // 占 33.33%
}
.width('100%')
.height(60)

这种布局适合对称式页面设计，例如两两一组的表单字段，或者图标+文本交替排列。

4.6 权重值的选取建议

选择权重值时，遵循以下原则：

1. 使用小整数：尽量选用 1、2、3、4 等小整数，避免使用 100、200 这类大权重。小整数能让比例关系一目了然。
2. 保持比例清晰：权重之比应直观反映视觉比例。如 1:2 表示"一个占 33%，另一个占 66%"。
3. 避免权重值过大：权重总和过大会导致各子项宽度计算结果的浮点数精度问题。
4. 考虑可扩展性：如果将来可能增加子项，尽量使用较小的权重值，避免总和膨胀。

---

五、混合模式 — 固定宽度 + 权重分配

5.1 混合模式的基本原理

在实际 UI 开发中，并非所有子项都适合用权重分配宽度。某些组件需要固定尺寸——比如图标按钮、头像、开关等。在这种情况下，可以将固定宽度的子项与使用 layoutWeight 的子项混合排列。

混合模式的工作机制如下：

1. Row 容器的总宽度确定后，优先扣除所有固定宽度子项的尺寸
2. 剩余宽度再根据各子项的 layoutWeight 值按比例分配

5.2 典型场景：搜索栏

// 搜索栏：固定搜索图标 + 权重搜索框 + 固定搜索按钮
Row() {
  // 固定宽度的搜索图标
  Column() {
    Text('🔍')
      .fontSize(18)
  }
  .width(40)        // 固定宽度 40px
  .height(40)
  .justifyContent(FlexAlign.Center)

  // 权重分配的搜索输入框
  Column() {
    TextInput({ placeholder: '搜索...' })
  }
  .layoutWeight(1)  // 占据剩余所有可用空间

  // 固定宽度的搜索按钮
  Column() {
    Text('搜索')
      .fontSize(14)
      .fontColor('#FFFFFF')
  }
  .width(60)        // 固定宽度 60px
  .height(40)
  .backgroundColor('#4D96FF')
  .borderRadius(8)
  .justifyContent(FlexAlign.Center)
}
.width('100%')
.height(48)

在这个搜索栏中：

• 左侧搜索图标占 40px（固定）
• 右侧搜索按钮占 60px（固定）
• 中间搜索输入框使用 layoutWeight(1)，占据剩余全部宽度

如果 Row 容器宽度为 360px，则中间搜索框宽度 = 360 - 40 - 60 = 260px。

5.3 典型场景：导航栏

// 导航栏：返回按钮固定 + 标题居中 + 右侧操作固定
Row() {
  // 返回按钮（固定宽度）
  Column() {
    Text('←')
      .fontSize(20)
  }
  .width(44)
  .height(44)
  .justifyContent(FlexAlign.Center)

  // 标题（权重分配，居中）
  Column() {
    Text('页面标题')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
  }
  .layoutWeight(1)   // 占据剩余空间
  .alignItems(HorizontalAlign.Center)

  // 右侧操作按钮（固定宽度）
  Column() {
    Text('···')
      .fontSize(20)
  }
  .width(44)
  .height(44)
  .justifyContent(FlexAlign.Center)
}
.width('100%')
.height(50)

5.4 固定宽度项的动态调节

在我们的演示代码中，混合模式还添加了一个滑动条，用于动态调节固定宽度项的尺寸：

@State fixedWidthItem: number = 80;

// ... UI 中提供一个 Slider ...
Slider({
  value: this.fixedWidthItem,
  min: 50,
  max: 200,
  step: 10,
  style: SliderStyle.OutSet
})
.onChange((val: number) => {
  this.fixedWidthItem = val;  // 实时更新固定宽度
})

当用户拖动滑块时，固定宽度项在 50px~200px 之间变化，右侧的权重项会自动重新计算剩余宽度，实时展示动态效果。这能直观地说明"固定项占优先、权重项分剩余"的分配机制。

5.5 混合模式的关键规则

规则： 固定宽度的子项不使用 .layoutWeight()，而是使用 .width(fixedValue)；使用 .layoutWeight() 的子项则不要同时设置 .width()，否则宽度属性会被权重覆盖。

验证代码：

Row() {
  Column() { Text('固定') }
    .width(100)         // 固定 100px

  Column() { Text('等分') }
    .layoutWeight(1)    // 自动分配剩余空间

  Column() { Text('等分') }
    .layoutWeight(1)    // 自动分配剩余空间
}
.width('100%')
.height(60)
// 假设 Row 宽度 = 360px
// 固定项 = 100px
// 两个等分项各 = (360 - 100) / 2 = 130px

---

六、自定义权重 — 交互式调节

6.1 为什么需要自定义模式？

预设的场景虽然能覆盖最常见的比例需求，但开发过程中往往需要不断微调权重值以找到最合适的视觉比例。自定义模式提供了一组滑动条，让开发者可以实时调整每个子项的权重值，即刻看到布局变化。

6.2 实现原理

自定义模式的核心是一个 @State 装饰的数组：

@State customWeights: number[] = [1, 1, 1];

数组中每个元素对应一个子项的权重值，初始为 1:1:1 的等分模式。为每个子项绑定一个 Slider 滑动条，当滑块值改变时更新对应的权重值：

ForEach(this.customWeights, (w: number, idx: number) => {
  Row() {
    Text('A = ')
    Slider({
      value: w,
      min: 1,
      max: 8,
      step: 1,
      style: SliderStyle.OutSet
    })
    .onChange((val: number) => {
      this.customWeights[idx] = val;
      this.customWeights = [...this.customWeights];  // 触发状态更新
    })

    Text(`${w}`)
  }
})

6.3 状态更新的关键细节

注意上面代码中的一行：this.customWeights = [...this.customWeights]。由于 ArkTS 的 @State 装饰器对数组的浅比较机制，直接修改数组元素的值（this.customWeights[idx] = val）不会触发 UI 重新渲染。必须创建一个新数组赋值给状态变量，状态系统才能检测到变化。

这是 ArkTS 状态管理中的一个重要细节，与 React 中不可变数据更新（immutable update）的理念一致。

6.4 动态增减子项

自定义模式还支持动态添加和删除子项，以模拟实际开发中内容动态变化的场景：

// 删除最后一个子项
if (this.customWeights.length > 2) {
  this.customWeights = this.customWeights.slice(0, -1);
}

// 添加一个新子项（权重为1）
if (this.customWeights.length < 8) {
  this.customWeights = [...this.customWeights, 1];
}

限制最少 2 个、最多 8 个子项，以保持演示的合理性。

---

七、权重比例可视化

7.1 柱状图展示

为了让权重分配的比例关系更直观，我们在演示页面中添加了一个柱状图组件。每根柱子的高度与对应子项的权重值成正比。

@Builder
renderWeightChart(weights: number[], labels: string[]) {
  const total: number = weights.reduce((a, b) => a + b, 0);
  const maxW: number = Math.max(...weights);

  Column() {
    Row() {
      ForEach(weights, (w: number, idx: number) => {
        const barHeight: number = 20 + (w / maxW) * 80;
        const pct: string = ((w / total) * 100).toFixed(0);

        Column() {
          // 百分比数值
          Text(`${pct}%`)
            .fontSize(12)
            .fontWeight(FontWeight.Bold)

          // 柱体
          Column() {
            Text(`${w}`)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .fontColor('#FFFFFF')
          }
          .width('100%')
          .height(barHeight)
          .backgroundColor(ITEM_COLORS[idx] + 'CC')
          .borderRadius(6)

          // 标签
          Text(labels[idx])
            .fontSize(12)
        }
        .layoutWeight(1)   // 柱体在图表中等宽排列
        .alignItems(HorizontalAlign.Center)
      })
    }
  }
}

柱状图本身也使用了 layoutWeight(1) 来等分各个柱体的宽度，这正是"用 layoutWeight 演示 layoutWeight"的一种巧妙设计。

7.2 进度条明细

除了柱状图，我们还提供了一个进度条形式的明细表，逐行展示每个子项的权重值、百分比和进度条：

A  w=1  ████████████░░░░░░░░░  25.0%
B  w=2  ██████████████████████  50.0%
C  w=1  ████████████░░░░░░░░░  25.0%

这种"柱状图 + 进度条"的双重可视化方式，确保用户无论从宏观比例还是微观数值上都能准确理解权重分配的结果。

---

八、页面完整代码架构分析

8.1 文件结构概览

LayoutWeightDemo.ets 总共建了 868 行，分为以下几个主要部分：

部分	行号范围	内容
常量定义	1-53	颜色、预设权重、标签等常量
ColorBox 组件	55-90	带颜色和权重标签的子项方块
页面主组件	92-868	主结构、状态变量、Builder 方法、build()

8.2 关键状态变量

@State currentDemoIndex: number = 0;          // 当前演示模式（0-6）
@State customWeights: number[] = [1, 1, 1];   // 自定义模式下的权重数组
@State fixedWidthItem: number = 80;           // 混合模式下的固定宽度值

这三个状态变量分别控制演示模式的切换、自定义权重调节和固定宽度调节。

8.3 演示模式枚举

private readonly demoModes: string[] = [
  '等权平分（1:1:1:1）',
  '比例分配（1:2:1）',
  '比例分配（1:2:3:4）',
  '比例分配（3:1:2）',
  '比例分配（1:1:2:2）',
  '混合模式（固定80+权重）',
  '自定义权重'
];

共 7 种模式，每种模式对应一组预设的权重数组，除了最后两个——混合模式和自定义模式允许用户交互调节。

8.4 预设权重

private readonly presetWeightSets: number[][] = [
  [1, 1, 1, 1],     // 模式0: 等分
  [1, 2, 1],         // 模式1: 1:2:1
  [1, 2, 3, 4],     // 模式2: 1:2:3:4
  [3, 1, 2],         // 模式3: 3:1:2
  [1, 1, 2, 2],     // 模式4: 1:1:2:2
  [1, 1, 1],         // 模式5: 混合
  [1, 1, 1]          // 模式6: 自定义
];

8.5 Builder 方法详解

为了灵活渲染不同模式的 Row，我们使用了 @Builder renderDemoRow(modeIdx: number) 方法。这个方法通过 if-else 分支根据 modeIdx 渲染不同的 Row 内容。每种模式对应一个独立的分支，这样代码结构清晰，易于扩展。

@Builder
renderDemoRow(modeIdx: number) {
  if (modeIdx === 0) {
    // 等权平分 1:1:1:1
    Row() {
      Column() { ColorBox({...}) }.layoutWeight(1)
      Column() { ColorBox({...}) }.layoutWeight(1)
      Column() { ColorBox({...}) }.layoutWeight(1)
      Column() { ColorBox({...}) }.layoutWeight(1)
    }
    .width('100%')
    // ...
  } else if (modeIdx === 1) {
    // 1:2:1
    Row() { ... }
    // ...
  }
  // ... 其他模式
}

8.6 子组件 ColorBox

ColorBox 是一个独立的 @Component，用于渲染带颜色背景和权重标签的子项方块：

@Component
struct ColorBox {
  private label: string = '';        // 子项标签（A/B/C/D）
  private weight: number = 1;        // 权重值
  private color: string = '#FF6B6B'; // 背景色
  private height: number = 50;       // 高度
  private showWeight: boolean = true; // 是否显示权重值

  build() {
    Column() {
      if (this.showWeight) {
        Text(`w=${this.weight}`)
          .fontSize(13)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
      }
      Text(this.label)
        .fontSize(this.showWeight ? 11 : 14)
        .fontColor('#FFFFFFDD')
    }
    .width('100%')
    .height(this.height)
    .backgroundColor(this.color)
    .borderRadius(8)
    .justifyContent(FlexAlign.Center)
  }
}

---

九、常见问题与避坑指南

9.1 问题：layoutWeight 不生效

症状： 设置了 .layoutWeight(x) 但子项宽度没有变化。

排查步骤：

1. 检查 Row 容器是否设置了宽度

   // ❌ 错误：Row 没有设置 width，layoutWeight 无法计算
   Row() {
     Column().layoutWeight(1)
   }
   // ✅ 正确：Row 必须有明确宽度
   Row() {
     Column().layoutWeight(1)
   }
   .width('100%')
   

2. 检查是否所有子项都设置了 layoutWeight

   // ❌ 混合模式中误操作：第一个子项没有 layoutWeight 也没有固定宽度
   Row() {
     Column() { Text('A') }           // 没有 width 也没有 layoutWeight → 宽度为0
     Column() { Text('B') }.layoutWeight(1)
   }
   // ✅ 正确：要么给固定宽度，要么给 layoutWeight
   Row() {
     Column() { Text('A') }.width(80) // 固定宽度
     Column() { Text('B') }.layoutWeight(1) // 占据剩余
   }
   

3. 检查是否同时设置了 width 和 layoutWeight

   // ⚠️ 两者都设置时，width 被忽略
   Column() { Text('A') }
     .width(200)        // 被忽略
     .layoutWeight(1)   // 实际生效
   

9.2 问题：权重总和过大

症状： 子项宽度计算出现微小偏差或视觉上不精确。

原因： 权重总和过大时，浮点数精度可能导致宽度计算结果出现 1~2px 的偏差。例如权重 100:200:100 与 1:2:1 在数学上等价，但整数除法结合浮点数表示时，大数值的精度损失更明显。

建议： 将权重约分为最小整数比。例如 100:200:100 应改为 1:2:1。

9.3 问题：子项内容被截断

症状： 子项内的文本或图标显示不全。

原因： 当权重分配的空间小于子项内容所需的最小宽度时，内容会被裁剪。

解决方案：

1. 调整权重比例，给包含较长内容的子项分配更大的权重
2. 使用 Text 的 .textOverflow({ overflow: TextOverflow.Ellipsis }) 添加省略号
3. 确保 Row 容器有足够的最小宽度

Column() {
  Text('较长的文本内容')
    .maxLines(1)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
}
.layoutWeight(1)

9.4 问题：子项高度不一致

注意： layoutWeight 只控制主轴方向（水平方向）的宽度分配，不影响交叉轴（垂直方向）的对齐。如果需要控制垂直方向的对齐方式，需要在 Row 上设置 alignItems 属性。

Row() {
  Column() { /* 内容 */ }.layoutWeight(1).height(50)
  Column() { /* 内容 */ }.layoutWeight(2).height(80)
  Column() { /* 内容 */ }.layoutWeight(1).height(60)
}
.width('100%')
.alignItems(VerticalAlign.Center)  // 控制垂直居中对齐

9.5 性能注意事项

• 避免过于复杂的权重计算： 虽然 layoutWeight 是原生计算，效率很高，但如果有数十甚至上百个子项都在使用 layoutWeight，建议考虑改用 List 容器或 LazyForEach。
• 合理使用 @State： 当权重值频繁变化时（如自定义模式中的拖动滑块），注意状态更新的性能。单次拖动期间权重值的变化不应太频繁，Slider 默认的 onChange 频率通常是合适的。
• 嵌套布局要克制： 在一个 Row 内部再嵌套使用 layoutWeight 的复杂层级时，权重计算会逐层进行，层级过深可能影响布局性能。

9.6 layoutWeight 与其他布局属性的配合

属性	与 layoutWeight 的关系	建议
width	同时设置时 width 被忽略	不要同时设置，选其一
height	完全独立，互不影响	可按需分别设置
alignItems	控制交叉轴对齐，与主轴宽度无关	配合使用实现完美布局
justifyContent	当所有子项都有 layoutWeight 时失效	混合模式下对固定项有效
padding / margin	影响子项内容区域，不改变权重分配	注意 padding 后的视觉占比

---

十、最佳实践总结

10.1 设计原则

1. 优先使用 layoutWeight 而非百分比：当需要子项按比例分配宽度时，始终优先使用 layoutWeight，它的语义更清晰，适应性更强。
2. 使用小整数权重：权重值最好在 1~10 之间，比例关系一目了然。
3. 固定宽度 + 权重的组合模式：对于工具栏、导航栏等既有固定项又有弹性项的布局，混合模式是最佳选择。
4. 适度使用：3~6 个子项是 layoutWeight 的最佳适用范围，过多子项建议改用 List。

10.2 代码编写规范

// ✅ 推荐写法：语义清晰，容易维护
Row() {
  Column() { /* 主区域 */ }.layoutWeight(3)
  Column() { /* 侧边栏 */ }.layoutWeight(1)
}

// ❌ 不推荐：使用大整数，比例不直观
Row() {
  Column() { /* 主区域 */ }.layoutWeight(300)
  Column() { /* 侧边栏 */ }.layoutWeight(100)
}

10.3 实际项目中的应用场景

场景	推荐权重策略
底部导航栏（3 项）	等分：layoutWeight(1) × 3
底部导航栏（5 项）	等分：layoutWeight(1) × 5
搜索栏（图标 + 输入框 + 按钮）	图标固定 40px + 输入框 layoutWeight(1) + 按钮固定 60px
数据表格列头	按列内容宽度需求分配权重（如 1:2:3:1）
标签页	等分：layoutWeight(1) × N，N 可变
个人资料页（头像 + 信息 + 操作）	头像固定 60px + 信息 layoutWeight(1) + 操作固定 80px
表单（标签 + 输入框）	标签固定 80px + 输入框 layoutWeight(1)
商品卡片（图片 + 详情 + 价格）	图片固定 120px + 详情 layoutWeight(1) + 价格固定 80px

---

十一、完整 demo 运行指南

11.1 文件清单

确保项目包含以下文件：

entry/src/main/ets/pages/
├── Index.ets                  # 首页导航
├── RowAlignItemsDemo.ets      # 交叉轴对齐演示（编号023）
└── LayoutWeightDemo.ets       # 等分布局演示（编号024） ← 本文核心

以及路由配置文件：

entry/src/main/resources/base/profile/
└── main_pages.json            # 注册了 pages/LayoutWeightDemo 路由

11.2 页面功能速览

运行后在首页看到"Row 等分布局（layoutWeight）"卡片，点击进入，页面包含以下功能区域：

1. 概念说明卡 — layoutWeight 的核心公式和规则说明
2. 模式选择器 — 横向滚动的 7 种演示模式按钮
3. 主演示区 — 当前模式的实际布局效果展示
4. 可视化图表 — 权重比例的柱状图
5. 宽度分配明细 — 每个子项的进度条和百分比
6. 代码示例 — 当前模式的代码片段
7. 注意事项 — 5 条关键注意事项

11.3 交互操作说明

• 点击模式标签切换不同的权重策略
• 在混合模式下拖动滑块调整固定宽度（50~200px）
• 在自定义模式下拖动每个子项的滑块调整权重（1~8）
• 在自定义模式下点击「+ 添加」或「− 移除」增减子项数量

---

十二、结语

layoutWeight 是 HarmonyOS ArkTS 布局系统中一个极其实用且精妙的属性。它用最简洁的整数权重描述，解决了前端开发中最常见的"等分与比例分配"问题。相比手动计算百分比或使用复杂的嵌套布局，layoutWeight 提供了一种声明式、自适应、易维护的解决方案。

通过本文的 7 种演示模式，我们从最简单等权平分，到复杂的不等比分配，再到混合固定+权重的组合模式，结合交互式的自定义调节和可视化工具，全方位展示了 layoutWeight 的能力边界和最佳实践。

在实际项目开发中，建议开发者将 layoutWeight 作为水平比例分配的首选方案——它不仅让代码更简洁，也让布局逻辑更清晰，更重要的是，当需求变化时（增加/删除子项、调整比例），你只需要修改一个数字，系统会自动完成剩余工作。

---

下一篇预告： Column 容器中的 layoutWeight 应用——垂直方向上的权重分配，以及与 Row 中使用的区别与联系。

---

本文所有代码均可在 HarmonyOS NEXT 6.1.1（API 24）环境上直接运行。