P14. Flutter 垂直布局Column组件

Column组件即垂直布局控件，能够将子组件垂直排列。其实你学会了Row组件就基本掌握了Column组件，里边的大部分属性都一样，我们还是以文字为例子，来看看Column布局。

Column 基本用法

写一段代码，在 column 里加入三行文字，然后看一下效果。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Text('I am Mybj'),
              Text('my website is mybj123.com'),
              Text('I love coding')
            ],
          )),
    );
  }
}

这时候你会发现文字是以最长的一段文字居中对齐的，看起来很别扭。那如果想让文字以左边开始对齐，只需要加入一个对齐属性。

左对齐只要在column组件下 body 加入下面的代码，就可以让文字左对齐。

crossAxisAlignment: CrossAxisAlignment.start,

• CrossAxisAlignment.star：居左对齐。
• CrossAxisAlignment.end：居右对齐。
• CrossAxisAlignment.center：居中对齐。

body: Column(
  children: [
    Text('I am Mybj'),
    Text('my website is mybj123.com'),
    Text('I love coding')
  ],
  crossAxisAlignment: CrossAxisAlignment.start,
)),

主轴和副轴的辨识

在设置对齐方式的时候你会发现右mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是副轴那。

• main轴：如果你用 column 组件，那垂直就是主轴，如果你用 Row 组件，那水平就是主轴。
• cross轴：cross 轴我们称为幅轴，是和主轴垂直的方向。比如 Row 组件，那垂直就是副轴，Column 组件的副轴就是水平方向的。

主轴和副轴我们搞清楚，才能在实际工作中随心所欲的进行布局。

比如现在我们要把上面的代码，改成垂直方向居中。因为用的是 Column 组件，所以就是主轴方向，这时候你要用的就是主轴对齐了。

mainAxisAlignment: MainAxisAlignment.center,

现在全部的代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Text('I am Mybj'),
              Text('my website is mybj123.com'),
              Text('I love coding')
            ],
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
          )),
    );
  }
}

水平方向相对屏幕居中

让文字相对于水平方向居中，我们如何处理？其实只要加入 Center 组件就可以轻松解决。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Center(child: Text('I am Mybj')),
              Center(child: Text('my website is mybj123.com')),
              Center(child: Text('I love coding'))
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          )),
    );
  }
}

Expanded 属性的使用

其实在学习水平布局的时候我们对Expanded有了深刻的理解，它就是灵活布局。比如我们想让中间区域变大，而头部区域和底部根据文字所占空间进行显示。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Center(child: Text('I am Mybj')),
              Expanded(child: Center(child: Text('my website is mybj123.com'))),
              Center(child: Text('I love coding'))
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          )),
    );
  }
}

在 Flutter 里的布局个人觉得是很灵活的，但这就和我们写 Html+CSS 是一样的，我们需要些练习去熟悉它。动手练习一下吧，理论上我们学会了水平和垂直布局，已经可以布出我们想要的任何界面了。