Flutter 中的 Column 小部件：全面指南

Flutter 中的 Column 小部件：全面指南

在 Flutter 中，Column 是一个垂直布局的小部件，用于将子控件沿着垂直轴排列。Column 与 Row 相对，Row 是水平布局，而 Column 则是垂直布局。它非常适合用来创建列式布局，如表单、列表项、导航栏等。

基础用法

Column 最基本的用法是将多个控件垂直排列：

Column(
  children: <Widget>[
    Container(height: 50.0, color: Colors.red),
    Container(height: 50.0, color: Colors.blue),
    // ... 更多的控件
  ],
)

主轴对齐

Column 的 mainAxisAlignment 属性用于控制子控件在主轴（垂直轴）上的对齐方式：

顶部对齐

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  // ... 子控件
)

居中对齐

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  // ... 子控件
)

底部对齐

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  // ... 子控件
)

空间均匀分布

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  // ... 子控件
)

交叉轴对齐

Column 的 crossAxisAlignment 属性用于控制子控件在交叉轴（水平轴）上的对齐方式：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  // ... 子控件
)

间距和边距

通过 mainAxisSize 属性，可以设置 Column 的大小是否应该占据所有可用空间：

Column(
  mainAxisSize: MainAxisSize.min,
  // ... 子控件
)

通过 padding 属性，可以为 Column 添加内边距：

Column(
  padding: EdgeInsets.all(8.0),
  // ... 子控件
)

子控件间距

使用 spacing 属性来设置子控件之间的垂直间距：

Column(
  spacing: 10.0,
  children: List<Widget>.generate(5, (index) {
    return Container(height: 50.0, color: Colors.primaries[index % Colors.primaries.length]);
  }).toList(),
)

子控件大小调整

使用 flex 属性来设置子控件在 Column 中的弹性比例：

Column(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
  ],
)

实例：垂直表单

下面是一个使用 Column 创建垂直表单的实例：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    TextField(
      decoration: InputDecoration(
        labelText: 'Username',
        border: OutlineInputBorder(),
      ),
    ),
    SizedBox(height: 16.0),
    TextField(
      decoration: InputDecoration(
        labelText: 'Password',
        border: OutlineInputBorder(),
      ),
      obscureText: true,
    ),
    SizedBox(height: 16.0),
    ElevatedButton(
      onPressed: () {},
      child: Text('Login'),
    ),
  ],
)

实例：导航栏

使用 Column 创建一个垂直排列的导航栏：

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: List<Widget>.generate(3, (index) {
    return ElevatedButton(
      onPressed: () {},
      child: Text('Nav Item $index'),
    );
  }).toList(),
)

结语

Column 是 Flutter 中处理垂直布局的核心小部件，它提供了丰富的对齐和间距选项，使得在 Flutter 应用中实现各种垂直布局变得简单而高效。掌握 Column 的使用，可以帮助你创建出既美观又实用的布局界面。