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 是一样的，我们需要些练习去熟悉它。动手练习一下吧，理论上我们学会了水平和垂直布局，已经可以布出我们想要的任何界面了。

以上关于P14. Flutter 垂直布局Column组件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。