P14. Flutter 垂直布局Column组件

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197093.html

1. Column 基本用法
2. 主轴和副轴的辨识
3. 水平方向相对屏幕居中
4. Expanded 属性的使用

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')
            ],
          )),
    );
  }
}

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

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

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/