一、概念说明

Column 百分比宽度是指将 Column 容器的宽度设置为相对于父容器内容区宽度的百分比值（如 '50%'、'80%'、'100%'）。百分比宽度是响应式布局的基础，让容器宽度随父容器自动缩放。

父容器宽度 100%
┌─────────────────────────────────────────┐
│  ┌──────────────────────────────────┐   │
│  │  width("100%") → 占满父容器       │   │
│  └──────────────────────────────────┘   │
│  ┌───────────────────────┐              │
│  │  width("75%")         │              │
│  └───────────────────────┘              │
│  ┌──────────────┐                      │
│  │  width("50%") │                      │
│  └──────────────┘                      │
│  ┌──────┐                              │
│  │  25%  │                              │
│  └──────┘                              │
└─────────────────────────────────────────┘

---

二、核心属性对照

属性/方法	作用对象	取值示例	效果
width("50%")	Column 容器	'25%' / '50%' / '75%' / '100%'	相对于父容器内容区宽度的百分比
constrainSize({})	Column 容器	{ minWidth: 200, maxWidth: 400 }	在百分比基础上增加范围约束
layoutWeight(n)	Column 子组件	1 / 2	按比例分配空间，优先级高于百分比

---

三、常见百分比布局模式

25% + 75%（侧边栏+主内容）    50% + 50%（双栏对称）       33% + 33% + 33%（三等分）
┌────────┬────────────┐     ┌─────────┬─────────┐     ┌──────┬──────┬──────┐
│        │            │     │         │         │     │      │      │      │
│ 25%    │   75%      │     │  50%    │  50%    │     │ 33%  │ 33%  │ 33%  │
│ 侧边栏  │  主内容    │     │ 左栏    │ 右栏    │     │  A   │  B   │  C   │
│        │            │     │         │         │     │      │      │      │
└────────┴────────────┘     └─────────┴─────────┘     └──────┴──────┴──────┘

---

四、代码结构（.ets 文件）

ColumnPercentWidthDemo.ets
├── import 语句
├── @Entry @Component struct ColumnPercentWidthDemo
│   ├── @State 状态变量
│   └── build()
│       ├── Scroll 全屏滚动容器
│       │   └── Column({ space: 24 })
│       │       ├── [区域1] TitleSection ── 标题 + 布局要点说明
│       │       ├── [区域2] 基础百分比对比 ── 25% / 50% / 75% / 100%
│       │       ├── [区域3] 百分比分栏布局
│       │       │   ├── 3.1 两栏 50%+50%
│       │       │   ├── 3.2 三栏 33%+33%+33%
│       │       │   └── 3.3 非对称 30%+70%
│       │       ├── [区域4] 百分比 + constrainSize
│       │       ├── [区域5] 嵌套百分比
│       │       └── [区域6] 宽度设置方式总结表
│       └── 底部留白
├── [子组件] TitleSection
└── [子组件] SectionTitle

---

五、核心代码片段

5.1 基础百分比宽度

Column({ space: 6 }) {
  Column() { Text('width("25%")') }.width('25%').height(36).backgroundColor('#3b82f6')
  Column() { Text('width("50%")') }.width('50%').height(36).backgroundColor('#8b5cf6')
  Column() { Text('width("75%")') }.width('75%').height(36).backgroundColor('#f59e0b')
  Column() { Text('width("100%")') }.width('100%').height(36).backgroundColor('#10b981')
}
.width('100%').padding(12).backgroundColor('#f1f5f9').borderRadius(8)

5.2 两栏布局 50% + 50%

Row({ space: 8 }) {
  Column() {
    Text('左栏 50%').fontSize(13).fontColor('#ffffff').textAlign(TextAlign.Center)
  }
  .width('50%').height(48).backgroundColor('#3b82f6').borderRadius(6)
  .justifyContent(FlexAlign.Center)

  Column() {
    Text('右栏 50%').fontSize(13).fontColor('#ffffff').textAlign(TextAlign.Center)
  }
  .width('50%').height(48).backgroundColor('#8b5cf6').borderRadius(6)
  .justifyContent(FlexAlign.Center)
}
.width('100%')

5.3 非对称分栏 30% + 70%

Row({ space: 8 }) {
  // 侧边栏 30%
  Column({ space: 4 }) {
    Text('侧边栏').fontSize(12).fontColor('#ffffff')
    Text('30%').fontSize(11).fontColor('#bfdbfe')
  }
  .width('30%').height(80)             // ★ 父容器宽度的 30%
  .backgroundColor('#3b82f6').borderRadius(6)
  .justifyContent(FlexAlign.Center)
  .alignItems(ItemAlign.Center)

  // 主内容区 70%
  Column({ space: 4 }) {
    Text('主内容区').fontSize(12).fontColor('#ffffff')
    Text('70%').fontSize(11).fontColor('#e9d5ff')
  }
  .width('70%').height(80)             // ★ 父容器宽度的 70%
  .backgroundColor('#8b5cf6').borderRadius(6)
  .justifyContent(FlexAlign.Center)
  .alignItems(ItemAlign.Center)
}
.width('100%')

5.4 百分比 + constrainSize 组合

// 百分比 80% + 最小 200vp、最大 400vp 约束
Column() {
  Text('width("80%") + constrainSize({ min:200, max:400 })')
    .fontSize(11).fontColor('#1e293b')
    .textAlign(TextAlign.Center).width('100%')
}
.width('80%')
.constrainSize({ minWidth: 200, maxWidth: 400 })
.height(32).backgroundColor('#fef3c7').borderRadius(4)
.border({ width: 1, color: '#f59e0b' })
.justifyContent(FlexAlign.Center)

5.5 嵌套百分比

// 外层 80% → 内层 50%（实际为父容器宽度 × 80% × 50% = 40%）
Column({ space: 6 }) {
  Text('外层 width("80%")')
  Row() {
    Column() { Text('内层 50%').fontSize(11).fontColor('#ffffff') }
      .width('50%').height(36)          // ★ 内层 50% = 外层宽度的 50%
      .backgroundColor('#3b82f6').borderRadius(4)
      .justifyContent(FlexAlign.Center)
  }.width('100%')
}
.width('80%').padding(12).backgroundColor('#f1f5f9').borderRadius(6)

---

六、子组件详解

6.1 TitleSection（标题区域）

显示页面大标题、副标题（属性说明）和布局要点文字说明，涵盖百分比基准、常用值、组合用法等信息。

6.2 SectionTitle（段落小标题）

轻量级可复用组件，接收 @Prop label 属性，fontSize: 16 中等粗细文字。

---

七、适用场景

场景	百分比组合	说明
✅ 两栏对称布局	50% + 50%	左右对称分栏
✅ 侧边栏 + 主内容	25% + 75% 或 30% + 70%	经典管理后台布局
✅ 三栏网格	33% + 33% + 33%	卡片/功能等分
✅ 响应式容器	width("80%") + constrainSize	居中容器，有最小/最大限制
✅ 表单布局	width("100%")	表单项占满表单容器
✅ 嵌套卡片	外层 80% + 内层 50%	多层百分比嵌套

---

八、注意事项

1. 百分比基准是直接父容器：width("50%") 指父容器内容区宽度的 50%。嵌套时，内层百分比基于外层 Column 的实际计算宽度。

2. 百分比 + 数值不能混用：width("50%") 和 width(200) 是两种不同的赋值方式，字符串表示百分比，数字表示 vp 固定值。

3. layoutWeight 优先级高于百分比：如果子组件同时设置了 layoutWeight 和百分比宽度，layoutWeight 会覆盖百分比宽度。

4. 百分比布局在父容器宽度变化时自动适应，是实现响应式布局的核心手段。配合 constrainSize 可设置自适应范围，避免过窄或过宽。

---

九、相关资源

• 代码文件：entry/src/main/ets/pages/ColumnPercentWidthDemo.ets
• 入口页面：entry/src/main/ets/pages/Index.ets（点击玫红色按钮跳转）
• 姊妹布局：
  • ColumnFixedWidth — ColumnFixedWidth_layout_guide.md
  • ColumnAdaptiveWidth — ColumnAdaptiveWidth_layout_guide.md
  • ColumnStart — ColumnStart_layout_guide.md
  • ColumnCenter — ColumnCenter_layout_guide.md
  • ColumnEnd — ColumnEnd_layout_guide.md

---

文档生成日期：2026-06-23