将列居中

本课属于 Coddy Flutter 学习旅程的“你的第一个应用”单元。第 22 课，共 32 课。

Column 的高度与分配给它的空间一样高，并从顶部开始排列子元素。它的 mainAxisAlignment: 用来设置子元素沿着这个高度，也就是列的主轴，排列在什么位置：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.start 表示顶部，center 表示中间，end 表示底部。spaceEvenly 会让子元素之间的间隔相等。Row 也有相同的设置，只不过是沿着宽度排列。

在屏幕上，这个列的宽度仅与最宽的子元素一样宽，所以它会停留在左侧。下一课会介绍这个方向。

挑战

简单

这三个数字位于屏幕顶部。使用列的 mainAxisAlignment:，将它们移到屏幕中间。

亲手试试

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}