Flutter開發（八）—— 五種佈局之Column Widget垂直佈局組件

代碼示例：
在Flutter中 Row（水平） 和 Column（垂直），就屬性而言基本都是相同的，只是屬性控制的方向不同。以下代碼中有其常用的屬性，具體的多說無益，跑代碼來的更直觀。

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row 佈局',
      home: Scaffold(
        appBar: new AppBar(title: new Text('Column 垂直佈局')),
        body: Center( //將Column整體佈局居中
          child: new Column(  //Column 垂直佈局
            crossAxisAlignment: CrossAxisAlignment.end, //控制 children: <Widget> 中的子View靠左（start）中(center)右(end)
            mainAxisAlignment: MainAxisAlignment.end, //控制 子View 相對於 整體父佈局位置 上（start）中(center)下(end)
            children: <Widget>[ //其子Widget 用children: <Widget>[ ] 包裹
              new RaisedButton(
                onPressed: () {},
                color: Colors.blueGrey,
                child: Text('blueGrey'),
                textColor: Color(0xffff0000),
              ),

              new RaisedButton( //  沒有Expanded  則子Widget展示自身大小
                onPressed: () {},
                color: Colors.orangeAccent, //RaisedButton默認顏色
                highlightColor: Color(0xff00ff00), //RaisedButton點擊顏色
                child: Text('orangeAccent'), //Text內容
                textColor: Color(0xffff0000), //Text 內容字體顏色
              ),

              new RaisedButton(
                onPressed: () {},
                color: Colors.lightBlueAccent,
                child: Text('lightBlueAccent'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

示例圖：