Flutter 中 Column

在Flutter中，Column是一个布局控件，用于在垂直方向上排列其子组件。Column通常用于在垂直方向上显示多个子组件，这些子组件会依次从顶部向底部排列。

以下是一个简单的示例代码，演示如何在Flutter应用中使用Column布局控件：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column Example'),
        ),
        body: Column(
          // crossAxisAlignment用于设置子组件在横轴（水平方向）上的对齐方式，默认为start（左对齐）
          crossAxisAlignment: CrossAxisAlignment.center,
          // mainAxisAlignment用于设置子组件在主轴（垂直方向）上的对齐方式，默认为start（顶部对齐）
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Item 1'),
            Text('Item 2'),
            Text('Item 3'),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个带有标题的AppBar和一个Column布局控件。Column中包含了三个文本组件，分别显示为“Item 1”，“Item 2”和“Item 3”。这三个文本组件在垂直方向上依次排列，因为Column默认是垂直布局的。

除了示例中提到的属性之外，Column还有许多其他属性，例如mainAxisSize用于设置主轴（垂直方向）上的空间大小，verticalDirection用于设置子组件的排列方向（从上到下还是从下到上）等。Column非常灵活，可以根据应用程序的需要进行定制。