鸿蒙原生 ArkTS 布局深度解析：ColumnStart 顶部起始分布模式（API 24）
鸿蒙原生 ArkTS 布局深度解析：ColumnStart 顶部起始分布模式（API 24）
作者：AtomCode
版本：HarmonyOS NEXT API 24（6.1.1 Release）
源码：本仓库ColumnStartDemo.ets
字数：约 10000 字
一、引言
1.1 从"对齐"到"排列"——布局维度的跃迁
在鸿蒙原生 ArkTS 布局体系中，Column 是最基础的纵向布局容器。此前我们分别探讨了 ColumnCenter、ColumnEnd、ColumnBaseline、ColumnStretch 四种模式——它们都聚焦于 alignItems 属性，即交叉轴（水平方向）的对齐方式。
本文将视角从"交叉轴"转向"主轴"，深入剖析 justifyContent(FlexAlign.Start)——即 ColumnStart 纵向顶部起始分布模式。这是 Column 的默认排列行为，也是所有纵向布局中最自然、最直观、最基础的模式。
这里有一个关键的思想转变：
| 对比维度 | 前四篇文章（ColumnCenter 等） | 本文（ColumnStart） |
|---|---|---|
| 核心属性 | alignItems | justifyContent |
| 控制方向 | 交叉轴（水平） | 主轴（垂直） |
| 控制效果 | 子组件在水平方向的对齐 | 子组件在垂直方向的排列 |
| 类比 | 摆放在货架上的左右位置 | 货架层间距的分布策略 |
简单来说，alignItems 管"左中右"，justifyContent 管"上中下"。理解这一区分，是掌握鸿蒙 ArkTS 布局体系的基石。
1.2 为什么 ColumnStart 值得深入理解
justifyContent(FlexAlign.Start) 是 Column 的默认值，这意味着即使不写这行代码，Column 的子组件也会从顶部开始排列。但"默认"不等于"简单"，恰恰相反，Start 模式背后涉及了 Flexbox 布局中最核心的几个概念：
- 主轴剩余空间的分配策略：当子组件总高度小于容器高度时，多余空间如何处理？
- 内容压缩与溢出：当子组件总高度超过容器高度时，是溢出还是裁剪？
- 与 alignItems 的协同：当主轴排列和交叉轴对齐同时设置时，如何协调工作？
- 嵌套容器的布局传递：在多层嵌套的 Column 中，Start 模式如何影响子布局？
这些技术细节在日常开发中很容易被忽略，但一旦遇到复杂的布局需求（如自适应屏幕、动态内容、多端适配），这些底层原理就会成为解决问题的关键。
1.3 本文的示例应用
为了更好地阐释 ColumnStart 的工作原理，我们构建了一个待办事项（Todo List） 演示应用：
ColumnStartDemo.ets
├── 顶部状态栏 ← 导航 + 标题
├── 进度概览卡片 ← 已完成/总数/完成率 + 进度条
├── 新增待办输入区 ← 输入框 + 添加按钮
├── 待办事项列表 ← 可选中、可删除的列表项
├── 底部操作栏 ← 标记完成 / 重置 / 全部完成
└── 布局说明区 ← 六大 justifyContent 对比表格
这个应用虽然简单，却涵盖了日常开发中 90% 的纵向布局场景。通过它，我们将一步步剖析 ColumnStart 的每一个细节。
二、justifyContent 深度原理
2.1 主轴与交叉轴的再思考
在深入 justifyContent 之前，我们有必要重新审视一下 主轴（Main Axis） 和 交叉轴（Cross Axis） 这两个概念。
对于 Column 组件：
┌─────────────────────────────────────┐
│ 交叉轴（水平方向） │
│ ←─────── 对齐 ────────→ │
│ │
│ ┌──────────────────────────────┐ │
│ │ 子组件 A │ │ ↑
│ └──────────────────────────────┘ │ │
│ ↑ margin 间距 │ 主
│ ┌──────────────────────────────┐ │ 轴
│ │ 子组件 B │ │ （
│ └──────────────────────────────┘ │ 垂
│ ↑ margin 间距 │ 直
│ ┌──────────────────────────────┐ │ 方
│ │ 子组件 C │ │ 向
│ └──────────────────────────────┘ │ ）
│ │ ↓
│ ←── alignItems 控制 ──→ │
└─────────────────────────────────────┘
关键理解：
- 主轴（Main Axis）：垂直方向，控制的是子组件的排列顺序和间距，由
justifyContent管理。 - 交叉轴（Cross Axis）：水平方向，控制的是子组件的对齐位置，由
alignItems管理。 - 两个轴是正交的：修改主轴属性不会影响交叉轴的行为，反之亦然。
这一正交性意味着：ColumnStart 模式（主轴 Start）可以与任意 alignItems 组合，形成不同的布局效果：
| 组合模式 | justifyContent | alignItems | 视觉效果 |
|---|---|---|---|
| Start + Start | FlexAlign.Start | HorizontalAlign.Start | 左上角起始，自然阅读流 |
| Start + Center | FlexAlign.Start | HorizontalAlign.Center | 顶部居中，表单常用 |
| Start + End | FlexAlign.Start | HorizontalAlign.End | 顶部靠右，操作面板 |
本文演示的正是 Start + Start 组合，即"左上角起始"的阅读布局。
2.2 FlexAlign 六大枚举值详解
FlexAlign 是 ArkTS 中控制主轴排列策略的枚举，包含六个值。我们将逐一分析其行为：
Column() {
ChildA()
ChildB()
ChildC()
}
为了便于理解，我们假设容器高度为 600vp，三个子组件各占 100vp，总高度为 300vp，剩余空间为 300vp。
FlexAlign.Start（默认）
┌──────────────────────────────┐
│ ┌─────── Child A ────────┐ │
│ ├─────────────────────────┤ │
│ ├─────── Child B ────────┤ │
│ ├─────────────────────────┤ │
│ ├─────── Child C ────────┤ │
│ │ │ │
│ │ 剩余空间（300vp） │ │
│ │ 全部留在底部 │ │
│ │ │ │
│ │ │ │
│ │ │ │
└──────────────────────────────┘
行为：子组件从容器顶部开始紧密排列，所有剩余空间保留在容器底部。
特点：这是最自然的排列方式——内容从上到下依次展示，阅读顺序与代码顺序一致。
FlexAlign.Center
┌──────────────────────────────┐
│ │ │ │
│ │ 剩余空间（150vp） │ │
│ │ │ │
│ ├─────── Child A ────────┤ │
│ ├─────────────────────────┤ │
│ ├─────── Child B ────────┤ │
│ ├─────────────────────────┤ │
│ ├─────── Child C ────────┤ │
│ │ │ │
│ │ 剩余空间（150vp） │ │
│ │ │ │
└──────────────────────────────┘
行为：子组件整体在容器垂直方向居中，剩余空间均匀分配在顶部和底部。
特点：适合内容较少、需要视觉聚焦的场景（如启动页、弹窗内容）。
FlexAlign.End
┌──────────────────────────────┐
│ │ │ │
│ │ │ │
│ │ │ │
│ │ 剩余空间（300vp） │ │
│ │ │ │
│ ├─────── Child A ────────┤ │
│ ├─────────────────────────┤ │
│ ├─────── Child B ────────┤ │
│ ├─────────────────────────┤ │
│ ├─────── Child C ────────┤ │
└──────────────────────────────┘
行为：子组件整体在容器底部排列，所有剩余空间保留在顶部。
特点：适合底部操作栏、聊天输入框等场景。
FlexAlign.SpaceBetween
┌──────────────────────────────┐
│ ├─────── Child A ────────┤ │
│ │ │ │
│ │ 剩余空间（150vp） │ │
│ │ │ │
│ ├─────── Child B ────────┤ │
│ │ │ │
│ │ 剩余空间（150vp） │ │
│ │ │ │
│ ├─────── Child C ────────┤ │
└──────────────────────────────┘
行为：子组件均匀分布，两端无间距，中间间距相等。
特点：适合需要分散排列、但不需要两端留白的长列表。
FlexAlign.SpaceAround
┌──────────────────────────────┐
│ │ 间距（75vp） │ │
│ ├─────── Child A ────────┤ │
│ │ 间距（150vp） │ │
│ ├─────── Child B ────────┤ │
│ │ 间距（150vp） │ │
│ ├─────── Child C ────────┤ │
│ │ 间距（75vp） │ │
└──────────────────────────────┘
行为：子组件均匀分布，两端间距为中间间距的一半。
特点：适合需要两端留白但又不想留白太多的场景。
FlexAlign.SpaceEvenly
┌──────────────────────────────┐
│ │ 间距（100vp） │ │
│ ├─────── Child A ────────┤ │
│ │ 间距（100vp） │ │
│ ├─────── Child B ────────┤ │
│ │ 间距（100vp） │ │
│ ├─────── Child C ────────┤ │
│ │ 间距（100vp） │ │
└──────────────────────────────┘
行为：子组件均匀分布，所有间距（包括两端）相等。
特点：间距最均匀，适合需要精确等距排列的场景。
2.3 一个关键前提：容器高度约束
justifyContent 的效果有一个重要前提：容器必须有明确的高度约束。
如果 Column 没有设置高度（即默认由内容撑开），那么子组件的总高度刚好等于容器高度，剩余空间为 0，所有 justifyContent 分布策略的效果都一样：
// ❌ 错误示范：容器高度由内容撑开，justifyContent 无效
Column() {
Text('A').height(100)
Text('B').height(100)
Text('C').height(100)
}
// 容器高度 = 300（内容撑开），剩余空间 = 0
// justifyContent 无论设置什么值，视觉上都是 Start 效果
// ✅ 正确示范：容器高度明确，justifyContent 生效
Column() {
Text('A').height(100)
Text('B').height(100)
Text('C').height(100)
}
.height('100%') // 或 .height(600)
// 容器高度 = 屏幕高度（假设 800vp），剩余空间 = 500vp
// justifyContent 的效果才能体现
这就是为什么在 ColumnStart 的根容器中，我们必须设置 .height('100%')——不设置，justifyContent 就失去了发挥的空间。
2.4 justifyContent 与 alignItems 的协同工作
当 justifyContent 和 alignItems 同时设置时，它们在两个正交的维度上协同工作：
Column() {
ChildA()
ChildB()
ChildC()
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start) // 主轴：垂直方向，从顶部排列
.alignItems(HorizontalAlign.Start) // 交叉轴：水平方向，靠左对齐
可以将其想象为在二维坐标系中分配位置：
- Y 轴（垂直）：由
justifyContent决定每个子组件的 Y 坐标 - X 轴（水平）：由
alignItems决定每个子组件的 X 坐标
两者互不干扰，但共同决定了子组件的最终位置。这种正交性使得开发者可以独立地调整两个方向的对齐策略，而无需担心相互影响。
三、ColumnStart 实战：待办事项应用
3.1 应用架构总览
演示应用包含两个关键文件：
entry/src/main/ets/pages/
├── Index.ets # 首页 — 导航入口
└── ColumnStartDemo.ets # 演示页 — ColumnStart 布局示例（809 行）
以及路由注册文件：
entry/src/main/resources/base/profile/
└── main_pages.json # 添加 "pages/ColumnStartDemo" 路由
3.2 状态管理设计
在 ColumnStartDemoPage 结构体中，我们定义了五个 @State 状态变量：
// ---------- 状态变量 ----------
/* 待办事项输入框文本 */
@State todoText: string = '';
/* 待办事项列表 */
@State todoList: string[] = [
'学习 ColumnStart 布局',
'编写 ArkTS 示例代码',
'运行测试 — 验证效果',
'撰写技术博客',
];
/* 当前选中的待办项索引，-1 表示未选中 */
@State selectedIndex: number = -1;
/* 已完成事项数量 */
@State completedCount: number = 0;
/* 模拟加载状态 */
@State isLoading: boolean = false;
状态粒度的设计原则：
这里将 todoText（字符串）、todoList（数组）、selectedIndex（数字）、completedCount（数字）和 isLoading（布尔值）拆分为五个独立的 @State 变量，而非合并为一个对象。这样做的好处是：
- 精准重渲染：修改
selectedIndex时，只有依赖选中状态的 UI 片段会重新渲染，其他部分保持不变。 - 类型安全：每个变量都有明确的类型，TypeScript 编译器可以在编译期捕获类型错误。
- 代码可读性：变量名本身即文档，读者一眼就能看出每个状态的用途。
数组状态的不可变性：
值得注意的是，todoList 的修改方式遵循了不可变更新原则：
// 添加待办：使用展开运算符创建新数组
this.todoList = [text, ...this.todoList];
// 删除待办：使用 filter 创建新数组
this.todoList = this.todoList.filter(
(_: string, i: number) => i !== index
);
// 重置：直接赋新数组
this.todoList = [
'学习 ColumnStart 布局',
'编写 ArkTS 示例代码',
'运行测试 — 验证效果',
'撰写技术博客',
];
这是 ArkTS 响应式系统的要求——@State 装饰的数组通过引用比较来判断是否变化，只有赋新数组才能触发 UI 更新。直接调用 push、splice 等方法修改原数组不会触发重渲染。
3.3 根级 Column 容器的配置
整个演示页面的根容器是 ColumnStart 布局的核心：
build() {
Column() {
this.buildTopBar() // 区域一：顶部状态栏
this.buildProgressCard() // 区域二：进度概览卡片
this.buildInputSection() // 区域三：新增待办输入区
this.buildTodoListSection() // 区域四：待办事项列表
this.buildBottomActions() // 区域五：底部操作栏
this.buildLayoutNote() // 区域六：布局说明文字
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start) // ⬅️ ColumnStart 核心
.alignItems(HorizontalAlign.Start) // 交叉轴左对齐
.padding({
left: 16,
right: 16,
top: 0,
bottom: 0,
})
.backgroundColor('#F8F9FA')
}
关键配置解读：
1. justifyContent(FlexAlign.Start) — 本模式的核心
这行代码设置了主轴（垂直方向）的排列策略为"从顶部起始"。这意味着：
- 六个
buildXxx区域按代码顺序从顶部依次向下排列 - 区域之间只有通过
margin手动设置的间距 - 没有任何自动分配的额外间距
- 如果内容总高度不足一屏，底部会留有空白
2. alignItems(HorizontalAlign.Start) — 辅助配置
这行代码设置了交叉轴（水平方向）的对齐方式为"左对齐"：
- 所有子组件在水平方向上靠左对齐
- 这与主轴 Start 配合，形成了"左上角起始"的阅读布局
- 可以改为
Center或End观察水平对齐的变化，不影响垂直排列
3. height('100%') — 必要前提
如前所述，justifyContent 需要容器有明确的高度约束才能生效。height('100%') 确保容器填满父容器高度，为 justifyContent 的分布策略提供可分配的空间。
3.4 @Builder 拆分 UI 片段
与之前几篇文章一致，我们使用 @Builder 装饰器将 UI 拆分为独立的构建方法。每个 @Builder 方法只负责一个视觉区域：
@Builder
buildTopBar(): void {
// 顶部状态栏：返回按钮 + 标题
}
@Builder
buildProgressCard(): void {
// 进度概览卡片：已完成/总数/完成率
}
@Builder
buildInputSection(): void {
// 新增待办输入区：输入框 + 添加按钮
}
@Builder
buildTodoListSection(): void {
// 待办事项列表：可选中、可删除
}
@Builder
buildBottomActions(): void {
// 底部操作栏：标记完成 / 重置 / 全部完成
}
@Builder
buildLayoutNote(): void {
// 布局说明区：justifyContent 对比表格
}
每个区域的构建方法内部可能还有自己的 Column / Row 布局，但作为根 Column 的子节点时，它们都受 justifyContent(FlexAlign.Start) 和 alignItems(HorizontalAlign.Start) 的约束。
3.5 辅助 Builder 的抽象
对于重复出现的 UI 模式，我们进一步抽象为 @Builder 方法：
/**
* 构建说明列表项（内部辅助 Builder）
* @param title 要点标题
* @param desc 要点描述
*/
@Builder
buildNoteItem(title: string, desc: string): void {
Column() {
Text(title)
.fontSize(12)
.fontColor('#6C5CE7')
.fontWeight(FontWeight.Medium)
Text(desc)
.fontSize(11)
.fontColor('#636E72')
.margin({ top: 2 })
.lineHeight(15)
}
.alignItems(HorizontalAlign.Start)
.width('100%')
.margin({ top: 6, bottom: 2 })
}
/**
* 构建对比表格数据行
* @param mode 排列模式名称
* @param desc 效果描述
*/
@Builder
buildTableRow(mode: string, desc: string): void {
Row() {
Text(mode)
.fontSize(11)
.fontColor('#2D3436')
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
Text(desc)
.fontSize(11)
.fontColor('#636E72')
.layoutWeight(2)
}
.width('100%')
.padding({ top: 5, bottom: 5, left: 8, right: 8 })
.border({
width: { bottom: 1 },
color: '#F0F0F0',
})
}
@Builder 方法支持参数这一特性（API 24 增强）显著提升了 UI 代码的复用能力。一次定义，多处调用，且保持类型安全。
四、六大区域的设计与实现
4.1 区域一：顶部状态栏
状态栏采用 Row 水平布局，实现"返回按钮靠左 + 标题靠右"的经典导航模式：
@Builder
buildTopBar(): void {
Row() {
// 返回按钮
Row() {
Text('←').fontSize(18).fontColor('#2D3436')
Text(' 返回').fontSize(14).fontColor('#2D3436')
.margin({ left: 4 })
}
.alignItems(VerticalAlign.Center)
.onClick(() => { router.back() })
Blank() // 弹性空白
// 页面标题
Text('ColumnStart 布局')
.fontSize(17).fontWeight(FontWeight.Bold)
.fontColor('#2D3436')
}
.width('100%').height(48)
.alignItems(VerticalAlign.Center)
.padding({ left: 0, right: 4 })
.margin({ top: 8, bottom: 4 })
}
布局要点：
Row作为子组件，在父 Column(Start) 中从顶部排列Row内部的Blank()组件将左右两部分推开（Blank是弹性空间填充器）router.back()调用路由返回功能，需要导入import router from '@ohos.router'
4.2 区域二：进度概览卡片
进度卡片展示了三个统计维度（已完成、总事项、完成率），通过 layoutWeight 实现三等分：
@Builder
buildProgressCard(): void {
Column() {
// 卡片标题行
Row() {
Text('📋').fontSize(18)
Text('今日待办').fontSize(16)
.fontWeight(FontWeight.Bold).fontColor('#2D3436')
.margin({ left: 8 })
}
.alignItems(VerticalAlign.Center).width('100%')
// 进度信息行（三等分）
Row() {
// 已完成
Column() {
Text(`${this.completedCount}`)
.fontSize(28).fontWeight(FontWeight.Bold)
.fontColor('#6C5CE7')
Text('已完成').fontSize(11)
.fontColor('#B2BEC3').margin({ top: 2 })
}
.alignItems(HorizontalAlign.Center).layoutWeight(1)
// 总事项
Column() {
Text(`${this.todoList.length}`)
.fontSize(28).fontWeight(FontWeight.Bold)
.fontColor('#2D3436')
Text('总事项').fontSize(11)
.fontColor('#B2BEC3').margin({ top: 2 })
}
.alignItems(HorizontalAlign.Center).layoutWeight(1)
// 完成率
Column() {
Text(
this.todoList.length > 0
? `${Math.round((this.completedCount / this.todoList.length) * 100)}%`
: '0%'
)
.fontSize(28).fontWeight(FontWeight.Bold)
.fontColor('#00B894')
Text('完成率').fontSize(11)
.fontColor('#B2BEC3').margin({ top: 2 })
}
.alignItems(HorizontalAlign.Center).layoutWeight(1)
}
.alignItems(VerticalAlign.Center).width('100%')
.margin({ top: 16 })
// 进度条
Progress({
value: this.todoList.length > 0
? (this.completedCount / this.todoList.length) * 100 : 0,
total: 100, type: ProgressType.Linear,
})
.width('100%').height(6).color('#6C5CE7')
.backgroundColor('#E8E8E8').borderRadius(3)
.margin({ top: 12 })
}
.width('100%').padding(16)
.backgroundColor('#FFFFFF').borderRadius(12)
.margin({ top: 8 })
.shadow({ radius: 6, color: 'rgba(0, 0, 0, 0.06)', offsetX: 0, offsetY: 2 })
}
布局要点：
layoutWeight(1)在Row中实现等宽分布，三个 Column 各占三分之一宽度- 卡片使用
shadow属性添加阴影，增加视觉层次感 Progress组件的value动态绑定计算后的完成率百分比- 卡片在 Column(Start) 中作为第二子组件，紧跟在状态栏下方
4.3 区域三：新增待办输入区
输入区采用 Row 水平布局，输入框和按钮并排显示：
@Builder
buildInputSection(): void {
Column() {
Text('✏️ 新增待办')
.fontSize(15).fontWeight(FontWeight.Medium)
.fontColor('#2D3436').margin({ bottom: 8 })
Row() {
TextInput({ placeholder: '输入待办事项...', text: this.todoText })
.layoutWeight(1).height(44)
.backgroundColor('#FFFFFF').borderRadius(8)
.padding({ left: 12 }).fontSize(14)
.placeholderColor('#B2BEC3')
.onChange((value: string) => { this.todoText = value })
Button('添加')
.fontSize(14).fontColor('#FFFFFF')
.backgroundColor('#6C5CE7').borderRadius(8)
.height(44).padding({ left: 20, right: 20 })
.margin({ left: 10 })
.onClick(() => { this.addTodoItem() })
}
.alignItems(VerticalAlign.Center).width('100%')
}
.alignItems(HorizontalAlign.Start).width('100%')
.margin({ top: 16 })
}
布局要点：
TextInput使用layoutWeight(1)占据剩余宽度，Button固定宽度- 输入框的
text属性双向绑定到@State todoText onChange回调更新状态，触发 UI 自动重渲染- 点击"添加"按钮调用
addTodoItem()方法，将新项添加到列表顶部
添加逻辑：
addTodoItem(): void {
const text: string = this.todoText.trim()
if (text.length > 0) {
// 使用展开运算符将新项添加到数组开头
this.todoList = [text, ...this.todoList]
this.todoText = ''
}
}
这里特意使用 [text, ...this.todoList] 将新项添加到数组开头，而非 push 到末尾。这体现了 Start 的"顶部"语义——新添加的事项出现在列表顶部，视觉上"从顶部开始"。
4.4 区域四：待办事项列表
列表区域是 ColumnStart 中最复杂的部分，展示了 List + ForEach 的组合使用：
@Builder
buildTodoListSection(): void {
Column() {
// 区域标题（含事项数量统计）
Row() {
Text('📌 待办列表')
.fontSize(15).fontWeight(FontWeight.Medium)
.fontColor('#2D3436')
Blank()
Text(`共 ${this.todoList.length} 项`)
.fontSize(11).fontColor('#B2BEC3').margin({ right: 4 })
}
.alignItems(VerticalAlign.Center).width('100%')
.margin({ bottom: 10 })
// 待办事项列表
List({ space: 8 }) {
ForEach(this.todoList, (item: string, index: number) => {
ListItem() {
Row() {
// 选中状态圆点
Circle()
.width(20).height(20)
.fill(this.selectedIndex === index ? '#6C5CE7' : '#FFFFFF')
.stroke(this.selectedIndex === index ? '#6C5CE7' : '#CCCCCC')
.strokeWidth(2).margin({ right: 12 })
.onClick(() => { this.toggleSelect(index) })
// 待办文字
Text(item).fontSize(14)
.fontColor(this.selectedIndex === index ? '#6C5CE7' : '#2D3436')
.fontWeight(this.selectedIndex === index
? FontWeight.Medium : FontWeight.Normal)
.layoutWeight(1)
// 删除按钮
Text('✕').fontSize(14).fontColor('#E17055')
.padding({ left: 10, right: 6 })
.onClick(() => { this.removeTodoItem(index) })
}
.width('100%').height(48)
.padding({ left: 14, right: 6 })
.backgroundColor(this.selectedIndex === index
? 'rgba(108, 92, 231, 0.06)' : '#FFFFFF')
.borderRadius(10)
.alignItems(VerticalAlign.Center)
.onClick(() => { this.toggleSelect(index) })
}
}, (item: string) => item)
}
.width('100%').height(280).borderRadius(8)
.padding({ top: 4, bottom: 4 })
.divider({
strokeWidth: 1, color: '#F0F0F0',
startMargin: 46, endMargin: 10,
})
// 空状态提示
if (this.todoList.length === 0) {
Text('🎉 所有待办事项已完成！')
.fontSize(13).fontColor('#B2BEC3')
.margin({ top: 20, bottom: 10 })
.width('100%').textAlign(TextAlign.Center)
}
}
.alignItems(HorizontalAlign.Start).width('100%')
.margin({ top: 16 })
}
列表布局要点：
1. List 组件的 space 属性
List({ space: 8 }) 设置了列表项之间的间距为 8vp。与 margin 不同，space 是 List 的内置属性，只能控制列表项之间的间距，不能控制首尾间距。
2. divider 属性
.divider({ strokeWidth: 1, color: '#F0F0F0', startMargin: 46, endMargin: 10 }) 为列表项之间添加了分隔线，startMargin 和 endMargin 控制分隔线的左右缩进，避免分隔线从列表项的最左侧开始。
3. ForEach 的 key 生成器
ForEach 的第三个参数是 key 生成器(item: string) => item，使用每个待办事项的文本内容作为唯一标识。这有助于 List 在增删操作时正确复用组件实例，避免 UI 闪烁或状态丢失。
4. 空状态处理
当 todoList.length === 0 时，显示提示文字。这个条件渲染使用 ArkTS 的 if 语句直接在组件树中编写，清晰直观。
4.5 区域五：底部操作栏
操作栏包含三个按钮，演示了 ColumnStart 中"按钮从顶部依次排列"的效果：
@Builder
buildBottomActions(): void {
Column() {
// 按钮一：标记完成
Button() {
Row() {
Text('✅').fontSize(14)
Text(' 标记完成').fontSize(14)
.fontColor('#FFFFFF').fontWeight(FontWeight.Medium)
.margin({ left: 4 })
}
.alignItems(VerticalAlign.Center)
}
.width('100%').height(44).backgroundColor('#00B894')
.borderRadius(10)
.onClick(() => {
if (this.selectedIndex >= 0) {
this.completedCount++
this.removeTodoItem(this.selectedIndex)
this.selectedIndex = -1
}
})
// 按钮二：重置样例
Button() {
Row() {
Text('🔄').fontSize(14)
Text(' 重置样例').fontSize(14)
.fontColor('#FFFFFF').fontWeight(FontWeight.Medium)
.margin({ left: 4 })
}
.alignItems(VerticalAlign.Center)
}
.width('100%').height(44).backgroundColor('#6C5CE7')
.borderRadius(10).margin({ top: 10 })
.onClick(() => { this.resetSampleData() })
// 按钮三：全部完成
Button() {
Row() {
Text('⚡').fontSize(14)
Text(' 全部完成').fontSize(14)
.fontColor('#FFFFFF').fontWeight(FontWeight.Medium)
.margin({ left: 4 })
}
.alignItems(VerticalAlign.Center)
}
.width('100%').height(44).backgroundColor('#E17055')
.borderRadius(10).margin({ top: 10 })
.onClick(() => {
this.completedCount += this.todoList.length
this.todoList = []
this.selectedIndex = -1
})
}
.alignItems(HorizontalAlign.Start).width('100%')
.margin({ top: 16 })
}
布局要点：
- 三个按钮在 Column(Start) 中从顶部依次排列
- 每个按钮之间通过
margin({ top: 10 })保持 10vp 间距 - 按钮使用
width('100%')撑满父容器宽度，在alignItems(Start)下靠左对齐 - 每个按钮内部使用
Row实现图标和文字的水平排列
4.6 区域六：布局说明区
最后一个区域包含完整的 justifyContent 对比表格，作为学习参考：
@Builder
buildLayoutNote(): void {
Column() {
Divider().width('100%').height(1).color('#E0E0E0')
Text('ColumnStart 布局核心')
.fontSize(13).fontWeight(FontWeight.Medium)
.fontColor('#2D3436').margin({ top: 12 }).width('100%')
// 关键点列表
Column() {
this.buildNoteItem(
'① justifyContent(FlexAlign.Start)',
'子组件从容器顶部紧密排列，是 Column 的默认行为'
)
this.buildNoteItem(
'② 与 Center 的区别',
'Center 将所有子组件整体垂直居中，上下空白均匀；Start 则顶部无空白'
)
this.buildNoteItem(
'③ 与 End 的区别',
'End 将所有子组件整体靠底部排列，底部无空白；Start 则顶部无空白'
)
this.buildNoteItem(
'④ 组合 alignItems',
'配合 Start / Center / End 控制水平对齐，灵活适应不同场景'
)
}
.alignItems(HorizontalAlign.Start).width('100%')
.margin({ top: 8 })
// 对比表格
Text('justifyContent 对比一览')
.fontSize(12).fontWeight(FontWeight.Medium)
.fontColor('#636E72').margin({ top: 14, bottom: 8 }).width('100%')
// 表格标题行
Row() {
Text('排列模式').fontSize(11).fontWeight(FontWeight.Bold)
.fontColor('#2D3436').layoutWeight(1)
Text('效果').fontSize(11).fontWeight(FontWeight.Bold)
.fontColor('#2D3436').layoutWeight(2)
}
.width('100%').padding({ top: 6, bottom: 6, left: 8, right: 8 })
.backgroundColor('rgba(108, 92, 231, 0.06)').borderRadius(6)
// 表格数据行
this.buildTableRow('Start', '顶部开始排列，无额外间距 ← 当前')
this.buildTableRow('Center', '整体垂直居中，上下空白均匀')
this.buildTableRow('End', '整体靠底部，底部无空白')
this.buildTableRow('SpaceAround', '均匀分布，两端间距为中间的一半')
this.buildTableRow('SpaceBetween', '均匀分布，两端无间距')
this.buildTableRow('SpaceEvenly', '均匀分布，所有间距相等')
Text('提示：修改根容器 justifyContent 的值即可切换排列模式')
.fontSize(10).fontColor('#B2BEC3')
.margin({ top: 12 }).width('100%').textAlign(TextAlign.Center)
Text('HarmonyOS NEXT · ArkTS ColumnStart 布局示例')
.fontSize(10).fontColor('#CCCCCC')
.margin({ top: 10, bottom: 16 })
.width('100%').textAlign(TextAlign.Center)
}
.alignItems(HorizontalAlign.Start).width('100%')
.margin({ top: 20 })
.backgroundColor('#FFFFFF').borderRadius(12).padding(16)
.shadow({ radius: 6, color: 'rgba(0, 0, 0, 0.04)', offsetX: 0, offsetY: 1 })
}
布局要点：
- 这个区域本身也是一个 Column，在根 Column(Start) 中作为最后一个子组件
- 对比表格使用
Row+layoutWeight模拟两列布局 - 表格标题行使用紫色背景高亮，与数据行形成视觉区分
- 当前使用的
Start模式在数据行中标注了"← 当前"，方便读者对照
五、布局调试与常见问题
5.1 justifyContent 不生效的排查
如果在开发中遇到 justifyContent 设置后没有效果的情况，可以按以下步骤排查：
第一步：检查容器高度
// ❌ 高度由内容撑开，justifyContent 无效
Column() { /* ... */ }
// 等价于 .height(Content)
// ✅ 显式设置高度，justifyContent 生效
Column() { /* ... */ }
.height('100%') // 或固定高度
诊断方法：在 Column 的父容器上设置 backgroundColor，观察 Column 的实际高度范围。如果 Column 的高度刚好等于子组件总高度，说明没有剩余空间可供分配。
第二步：检查是否有其他布局约束
// ❌ 子组件使用了 layoutWeight 占据了所有空间
Column() {
Text('A').layoutWeight(1)
Text('B').layoutWeight(1)
}
.justifyContent(FlexAlign.SpaceBetween) // 无效，因为没有剩余空间
// ✅ 子组件使用固定高度，留下剩余空间
Column() {
Text('A').height(100)
Text('B').height(100)
}
.height(500)
.justifyContent(FlexAlign.SpaceBetween) // 生效
当子组件使用了 layoutWeight 或 flexGrow 等弹性属性时，它们会占据所有可用空间，导致 justifyContent 没有剩余空间可分配。
第三步：检查是否使用了 Scroll
// ❌ Scroll 包裹下，Column 的高度可能无限
Scroll() {
Column() {
// 子组件
}
.height('100%') // 在 Scroll 中，这个高度相对于 Scroll 的内容高度
}
// ✅ 需要给 Scroll 设置固定高度
Scroll() {
Column() { /* ... */ }
}
.height('100%')
Scroll 会扩展其内容区域的高度，导致 Column 的 height('100%') 可能超出预期。在这种情况下，需要给 Scroll 本身设置高度约束。
5.2 alignItems 与 justifyContent 的混淆
最常見的布局错误是混淆 alignItems 和 justifyContent 的作用方向：
// ❌ 混淆：想要子组件靠右，却设置了 justifyContent
Column() {
Text('靠右').width(100)
}
.height('100%')
.justifyContent(FlexAlign.End) // 这是垂直方向靠下，不是水平方向靠右
// ✅ 正确：水平靠右使用 alignItems
Column() {
Text('靠右').width(100)
}
.height('100%')
.alignItems(HorizontalAlign.End) // 水平方向靠右
记忆技巧：“justify” 与 “align” 的区别
justifyContent：管"排列"（沿着主轴的方向）alignItems：管"对齐"（在交叉轴的方向上）
5.3 嵌套 Column 的布局传递
当 Column 嵌套时，justifyContent 和 alignItems 不会自动从父容器传递到子容器：
Column() {
// 父 Column 的 justifyContent(Start) 控制这个 Column 子组件的位置
Column() {
// 子 Column 有自己的 justifyContent，默认也是 Start
// 这个子 Column 内部的子组件不受父 Column 的影响
Text('内部')
}
.alignItems(HorizontalAlign.Center) // 子 Column 自己的对齐方式
}
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
每个 Column 独立控制其直接子组件的布局。父 Column 的 alignItems 控制的是"子 Column 这个整体"的水平对齐，而不是子 Column 内部的子组件。
5.4 常见错误对照表
| 症状 | 可能原因 | 解决方案 |
|---|---|---|
| justifyContent 没有效果 | 容器高度由内容撑开，无剩余空间 | 设置 .height('100%') 或固定高度 |
| 子组件不靠左 | alignItems 设置为了 Center 或 End | 改为 HorizontalAlign.Start |
| 子组件间距不均匀 | 误用了 SpaceBetween 但期望 SpaceEvenly | 确认每种 FlexAlign 的间距分布规则 |
| 列表项状态不对齐 | ForEach 的 key 生成器返回了重复值 | 确保 key 唯一，如使用 item.id.toString() |
| 状态变更不刷新 | 直接修改了数组原内容，未赋新数组 | 使用展开运算符或 filter/map 创建新数组 |
| 页面跳转 404 | 路由未在 main_pages.json 注册 | 在 “src” 数组中添加页面路径 |
| @Builder 方法不更新 | 方法内部使用了非 @State 变量 | 依赖的变量必须使用 @State 装饰 |
| 阴影不显示 | 阴影颜色 alpha 值过低 | 使用 RGBa 格式，alpha 至少 0.04 |
六、性能优化与最佳实践
6.1 列表性能优化
在待办事项应用中，列表是性能优化的重点。以下是几个关键优化点：
1. 为 ForEach 提供稳定的 key 生成器
// 推荐：使用唯一标识
ForEach(items, item => ListItem() { /* UI */ },
(item: ItemType) => item.id.toString())
// 避免：使用下标索引（默认行为）
ForEach(items, (item, index) => ListItem() { /* UI */ })
稳定的 key 帮助框架在列表项增删时复用已有的组件实例，而不是全部销毁重建。在我们的示例中，使用待办文本作为 key（(item: string) => item），在文本唯一的情况下也是稳定的。
2. 控制 List 的高度
List 的高度设置需要权衡：固定的高度（如 height(280)）可以让 List 内部滚动，但外部 Column 的 justifyContent 会将 List 作为一个整体对待。如果 List 的高度不固定，它会随内容扩展，影响 Column 的排列。
3. 避免在 ListItem 中嵌套过深
// ❌ 嵌套过深，影响渲染性能
ListItem() {
Column() {
Row() {
Column() { /* ... */ }
}
}
}
// ✅ 尽量扁平化
ListItem() {
Row() {
// 减少不必要的包裹容器
}
}
6.2 @State 粒度的最佳实践
如前所述，细粒度的 @State 有助于减少不必要的重渲染。但粒度过细也会带来代码维护成本的增加。以下是推荐的粒度策略：
// 太粗（一个对象包含所有状态）
@State pageState: { text: string, list: string[], index: number } = {
text: '', list: [], index: -1
}
// 修改 text 会触发所有依赖 pageState 的 UI 重渲染
// 适中（推荐）
@State todoText: string = ''
@State todoList: string[] = []
@State selectedIndex: number = -1
// 太细（不必要的拆分）
@State selectedIndex: number = -1
@State isItemSelected: boolean = false // 可以从 selectedIndex 推导
// 增加维护成本，且没有带来性能收益
原则：当状态变量之间存在推导关系时，不应同时将它们作为独立的状态。例如，isItemSelected 完全可以从 selectedIndex >= 0 推导出来，不需要额外的状态变量。
6.3 @Builder 与 @Component 的选择
在 ArkTS 中，@Builder 和 @Component 都可以用于封装 UI 片段，但两者有不同的适用场景：
| 对比维度 | @Builder | @Component |
|---|---|---|
| 创建开销 | 低（轻量方法） | 高（独立组件实例） |
| 状态访问 | 直接访问结构体成员 | 通过 @Prop / @Link 传递 |
| 复用范围 | 当前结构体内部 | 全局可复用 |
| 性能影响 | 无额外开销 | 有组件实例化开销 |
| 适用场景 | 页面内 UI 拆分 | 跨页面复用的组件 |
选择建议：
- 在单个页面内部拆分 UI → 使用
@Builder - 需要在多个页面复用的 UI → 使用
@Component - 需要独立状态管理的 UI → 使用
@Component
在我们的 ColumnStart 示例中，所有 UI 拆分都使用 @Builder，因为这些片段只在当前页面中使用，无需跨页面复用。
6.4 百分比宽度与 layoutWeight 的选择
在 Column 布局中，子组件的宽度控制有多种方式：
// 方式一：百分比宽度（推荐用于卡片、按钮）
ChildComponent().width('90%')
// 方式二：layoutWeight 等分（推荐用于 Tab、等分布局）
Row() {
Column().layoutWeight(1)
Column().layoutWeight(1)
Column().layoutWeight(1)
}
// 方式三：固定宽度（推荐用于图标、小按钮）
ChildComponent().width(48)
// 方式四：不设宽度（默认拉伸，Stretch 模式）
ChildComponent() // 自动拉伸填满
选择原则：
- 需要适应屏幕宽度 → 使用百分比宽度或
layoutWeight - 需要固定尺寸 → 使用固定宽度
- 需要通栏效果 → 不设宽度（Stretch 默认行为）或
width('100%')
6.5 颜色与样式的一致性管理
在 ArkTS 中，建议将颜色值定义为常量，避免在多个地方使用魔法字符串：
// 不推荐：多处重复使用魔法字符串
.backgroundColor('#6C5CE7')
.fontColor('#6C5CE7')
// 推荐：使用常量（或定义在资源文件中）
const COLORS = {
primary: '#6C5CE7',
success: '#00B894',
danger: '#E17055',
textPrimary: '#2D3436',
textSecondary: '#636E72',
textTertiary: '#B2BEC3',
background: '#F8F9FA',
cardBackground: '#FFFFFF',
} as const
// 使用
.backgroundColor(COLORS.primary)
.fontColor(COLORS.primary)
对于更大型的项目，建议将颜色定义在 resources/base/element/color.json 中，通过资源引用访问。
七、ColumnStart 与其他布局模式的对比
7.1 ColumnStart vs ColumnCenter
| 对比维度 | ColumnStart | ColumnCenter |
|---|---|---|
| 核心属性 | justifyContent(FlexAlign.Start) | alignItems(HorizontalAlign.Center) |
| 控制方向 | 主轴（垂直）排列 | 交叉轴（水平）对齐 |
| 视觉特征 | 内容从顶部开始，底部留白 | 内容水平居中，垂直方向自定义 |
| 典型场景 | 列表、信息流、Feed | 表单、登录页、卡片 |
| 阅读习惯 | 自上而下，自然阅读流 | 对称、聚焦注意力 |
| 底部留白 | 有（内容不足时） | 取决于 justifyContent |
结论：两者不冲突，可以组合使用。ColumnStart 控制垂直排列，ColumnCenter 控制水平对齐。实际开发中经常同时使用：
Column() {
// 子组件
}
.justifyContent(FlexAlign.Start) // 垂直从顶部排列
.alignItems(HorizontalAlign.Center) // 水平居中对齐
7.2 ColumnStart vs ColumnEnd
ColumnStart 和 ColumnEnd 在垂直方向上是对称的：
ColumnStart ColumnEnd
┌────────────────────┐ ┌────────────────────┐
│ ┌────── A ──────┐ │ │ │
│ ├────────────────┤ │ │ │
│ ├────── B ──────┤ │ │ │
│ ├────────────────┤ │ │ │
│ ├────── C ──────┤ │ │ ┌────── A ──────┐ │
│ │ (空白) │ │ │ ├────────────────┤ │
│ │ │ │ │ ├────── B ──────┤ │
│ │ │ │ │ ├────────────────┤ │
│ │ │ │ │ ├────── C ──────┤ │
└────────────────────┘ └────────────────────┘
选择建议：
- 内容需要从上到下阅读 → 使用
ColumnStart（绝大多数场景） - 内容需要从底部开始（如聊天输入框、浮窗操作）→ 使用
ColumnEnd
7.3 ColumnStart vs ColumnStretch
ColumnStart 和 ColumnStretch 控制的是完全不同的维度：
- ColumnStart（
justifyContent）→ 控制垂直排列 - ColumnStretch（
alignItems）→ 控制水平拉伸
两者可以组合使用：
Column() {
// 子组件从顶部排列，且自动拉伸至全宽
}
.justifyContent(FlexAlign.Start) // 垂直从顶部排列
.alignItems(ItemAlign.Stretch) // 水平拉伸填满
这种组合非常常见，因为大多数列表页面既需要内容从顶部排列，又希望子组件通栏显示。
7.4 实际开发中的组合模式
在实际的鸿蒙应用开发中，很少单独使用某一种模式。以下是一些常见的组合模式：
// 模式一：列表页面（Start + Stretch）
Column() {
ListItem() // 通栏，从顶部排列
ListItem() // 通栏，从顶部排列
ListItem() // 通栏，从顶部排列
}
.justifyContent(FlexAlign.Start)
.alignItems(ItemAlign.Stretch)
// 模式二：居中表单（Center + Center）
Column() {
TextInput() // 居中，宽度 90%
Button() // 居中，宽度 90%
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
// 模式三：底部操作栏（End + Stretch）
Column() {
Blank() // 弹性填充
Button() // 通栏，在底部
}
.justifyContent(FlexAlign.End)
.alignItems(ItemAlign.Stretch)
八、API 24 布局特性总结
8.1 API 24 的重要变化
从 API 23 到 API 24，与 Column 布局相关的关键变化包括：
1. HorizontalAlign 和 VerticalAlign 的严格区分
在 API 24 中，Column.alignItems() 明确接受 HorizontalAlign 枚举，Row.alignItems() 接受 VerticalAlign 枚举。这一变化在编译期就阻止了混淆：
// API 24 编译错误
Column() { /* ... */ }
.alignItems(VerticalAlign.Center) // ❌ 类型错误！
// Argument of type 'VerticalAlign' is not assignable to
// parameter of type 'HorizontalAlign'.
2. @Builder 参数支持增强
@Builder 方法现在支持更灵活的参数传递，包括可选参数和默认值：
@Builder
buildNoteItem(title: string, desc: string = ''): void {
// desc 现在有默认值，调用时可以省略第二个参数
}
3. shadow 属性全面取代 elevation
新的阴影系统支持精确的 RGBa 颜色控制和偏移量设置，不再依赖系统默认的阴影颜色。
4. 更严格的类型检查
ForEach 的 key 生成器返回值类型由 string 扩展为 string | number，但要求返回的值必须稳定。
8.2 从 ColumnStart 看鸿蒙布局设计哲学
ColumnStart 模式虽然简单，但它的设计体现了鸿蒙原生布局体系的几个核心哲学：
哲学一：默认行为即最佳实践
justifyContent(FlexAlign.Start) 是 Column 的默认值，这本身就是一种设计选择——在绝大多数场景下，开发者需要的正是"从顶部开始排列"的行为。不需要额外的配置，布局就能正常工作。
哲学二：正交的属性设计
justifyContent 和 alignItems 控制两个正交的维度，互不干扰。这种设计让开发者可以独立地思考和调整每个方向上的布局策略，降低了认知负担。
哲学三：声明式优于命令式
在 ArkTS 中，布局是"声明"出来的，而非"操作"出来的。开发者描述"最终状态"，框架负责"如何达到"。这种范式让 UI 代码更接近设计师的视觉稿，减少了"翻译"过程中的心智损耗。
哲学四：渐进式复杂度
ColumnStart 是最简单的模式，当需要更复杂的布局时，可以渐进地引入 SpaceBetween、SpaceAround 等分布策略，而无需重写整个布局。这种渐进式复杂度设计让开发者可以从简单开始，按需深入。
九、总结
本文通过一个完整的待办事项（Todo List）示例应用，深入剖析了 HarmonyOS NEXT API 24 中 ColumnStart 顶部起始分布布局的原理与实践。核心要点可以概括为以下七点：
1. justifyContent 控制主轴排列，alignItems 控制交叉轴对齐
这是 Column 布局的底层逻辑。justifyContent(FlexAlign.Start) 将子组件从容器顶部开始排列，是所有 FlexAlign 值中最自然、最符合阅读习惯的模式。
2. 容器高度是 justifyContent 生效的前提
没有明确的高度约束，justifyContent 就没有剩余空间可供分配。务必在 Column 上设置 height('100%') 或固定高度。
3. FlexAlign 六大枚举值各有适用场景
| 值 | 最佳场景 |
|---|---|
| Start | 列表、信息流、Feed（默认） |
| Center | 启动页、弹窗内容 |
| End | 底部操作栏、聊天输入框 |
| SpaceAround | 需要两端留白的列表 |
| SpaceBetween | 需要均匀分布、无两端留白的列表 |
| SpaceEvenly | 需要精确等距排列的场景 |
4. @Builder 是 UI 拆分的高效手段
在单个页面内部，使用 @Builder 拆分 UI 片段比创建 @Component 更轻量、更高效。@Builder 方法可以直接访问结构体成员，无需参数传递。
5. @State 的粒度影响渲染性能
细粒度的 @State 变量可以减少不必要的重渲染。但粒度过细会增加维护成本，需要在性能和可维护性之间找到平衡。
6. 列表性能优化需要关注 key 生成器
ForEach 的 key 生成器直接影响列表的更新性能。稳定的 key 帮助框架复用组件实例，避免 UI 闪烁。
7. ColumnStart 是纵向布局的基石
理解 ColumnStart 是掌握鸿蒙 ArkTS 布局体系的第一步。从 Start 开始，到 Center、End、SpaceAround、SpaceBetween、SpaceEvenly，逐步深入，就能应对绝大多数纵向布局需求。
附录：完整代码清单
文件一：Index.ets（首页）
@Entry
@Component
struct Index {
build() {
Column() {
Text('🏠 布局示例首页')
.fontSize(24).fontWeight(FontWeight.Bold)
.fontColor('#1A1A2E')
Text('选择一个布局模式进行查看')
.fontSize(14).fontColor('#888888').margin({ top: 8 })
Button('▶ ColumnStart 顶部起始布局')
.width('85%').height(50)
.backgroundColor('#6C5CE7').fontColor('#FFFFFF')
.fontSize(15).fontWeight(FontWeight.Medium)
.borderRadius(12).margin({ top: 32 })
.onClick(() => {
router.pushUrl({ url: 'pages/ColumnStartDemo' })
})
Text('Column + justifyContent(FlexAlign.Start)')
.fontSize(12).fontColor('#AAAAAA').margin({ top: 12 })
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.backgroundColor('#F5F5F5').padding(16)
}
}
文件二：ColumnStartDemo.ets（演示页）
完整代码见本仓库 entry/src/main/ets/pages/ColumnStartDemo.ets，共 809 行。
文件三：main_pages.json（路由注册）
{
"src": [
"pages/Index",
"pages/ColumnStartDemo"
]
}
本文是"鸿蒙原生 ArkTS 布局深度解析"系列文章之一。该系列覆盖 Column 的五大布局模式（Center / End / Start / Stretch / Baseline），旨在帮助开发者系统性地掌握鸿蒙 NEXT 的原生布局能力。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
6
0- 0
已为社区贡献9条内容
所有评论(0)