Column

Column 将子组件沿垂直方向排列。

构造函数

Column({
  Key? key,                                          // 组件标识
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,  // 主轴（垂直）对齐方式
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉轴（水平）对齐方式
  MainAxisSize mainAxisSize = MainAxisSize.max,      // 主轴尺寸：max=撑满父组件，min=包裹内容
  VerticalDirection verticalDirection = VerticalDirection.down, // 排列方向：down=从上到下，up=从下到上
  TextDirection? textDirection,                       // 文本方向（影响 start/end 的判断）
  TextBaseline? textBaseline,                         // 文本基线（用于对齐文本）
  List<Widget> children = const [],                   // 子组件列表
})

属性速查

属性	类型	默认值	说明
mainAxisAlignment	MainAxisAlignment	start	子组件在垂直方向的分布方式
crossAxisAlignment	CrossAxisAlignment	center	子组件在水平方向的对齐方式
mainAxisSize	MainAxisSize	max	Column 自身高度策略
verticalDirection	VerticalDirection	down	子组件排列顺序
textDirection	TextDirection?	null	文本方向
textBaseline	TextBaseline?	null	文本基线
children	List<Widget>	[]	子组件列表

常用值速查

mainAxisAlignment — 主轴对齐（垂直方向）

值	效果
start	顶部对齐（默认）
center	居中
end	底部对齐
spaceBetween	两端对齐，中间均匀分布
spaceAround	均匀分布，两端留半间距
spaceEvenly	完全均匀分布

start:          center:         end:
┌───┐           ┌───┐           ┌───┐
│ A │           │   │           │   │
│ B │           │ A │           │   │
│ C │           │ B │           │ A │
│   │           │ C │           │ B │
│   │           │   │           │ C │
└───┘           └───┘           └───┘

spaceBetween:   spaceAround:    spaceEvenly:
┌───┐           ┌───┐           ┌───┐
│ A │           │ A │           │ A │
│   │           │   │           │   │
│ B │           │ B │           │ B │
│   │           │   │           │   │
│ C │           │ C │           │ C │
└───┘           └───┘           └───┘

crossAxisAlignment — 交叉轴对齐（水平方向）

值	效果
start	左对齐
center	居中（默认）
end	右对齐
stretch	水平撑满

mainAxisSize — 主轴尺寸

值	行为
MainAxisSize.max	Column 尽可能撑满父组件的高度（默认）
MainAxisSize.min	Column 高度 = 所有子组件高度之和

快速示例

以下示例都需要在文件顶部添加 import 'package:flutter/material.dart';

垂直排列 + 左对齐

import 'package:flutter/material.dart';

class ColumnStartExample extends StatelessWidget {
  const ColumnStartExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Column 左对齐')),
      body: const Padding(
        padding: EdgeInsets.all(16),
        // ─── ★ Column 垂直排列 ──────────────
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('标题', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            Text('副标题', style: TextStyle(color: Colors.grey)),
            SizedBox(height: 16),
            Text('详细内容'),
          ],
        ),
        // ─── ☆ Column 垂直排列 ──────────────
      ),
    );
  }
}

两端分布 + 固定底部

import 'package:flutter/material.dart';

class ColumnBottomButtonExample extends StatelessWidget {
  const ColumnBottomButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Column 底部按钮')),
      body: Column(
        children: [
          // ─── ★ Expanded 占剩余 ──────────────
          const Expanded(child: Center(child: Text('主要内容'))),
          // ─── ☆ Expanded 占剩余 ──────────────
          Padding(
            padding: const EdgeInsets.all(16),
            child: SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text('确认按钮'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Column 内使用 Expanded

import 'package:flutter/material.dart';

class ColumnExpandedExample extends StatelessWidget {
  const ColumnExpandedExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Column + Expanded')),
      body: Column(
        children: [
          Container(height: 100, color: Colors.red),
          // ─── ★ Expanded 占满剩余 ──────────────
          Expanded(
            child: Container(color: Colors.blue, child: const Center(child: Text('占满剩余空间', style: TextStyle(color: Colors.white)))),
          ),
          // ─── ☆ Expanded 占满剩余 ──────────────
          Container(height: 50, color: Colors.green),
        ],
      ),
    );
  }
}

常见错误

Column 溢出（像素溢出）

════════ Exception caught by rendering library ════════
A RenderFlex overflowed by 32 pixels on the bottom.

原因： Column 中子组件的总高度超过了可用空间。

解决方案：

// 方案 1：用 Expanded 包裹可变高度的子组件
Column(
  children: [
    const Text('固定内容'),
    Expanded(child: longContentWidget),  // 自动填充剩余空间
  ],
)

// 方案 2：用 SingleChildScrollView 包裹
SingleChildScrollView(
  child: Column(
    children: [
      const Text('内容1'),
      const Text('内容2'),
      // ... 很多内容
    ],
  ),
)

// 方案 3：设置 mainAxisSize: MainAxisSize.min
Column(
  mainAxisSize: MainAxisSize.min,
  children: [...],
)

下一步

• Row — 水平布局
• Expanded / Flexible — 弹性布局
• Stack — 层叠布局