Flutter开发（八）—— 五种布局之Column Widget垂直布局组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RedKeyer/article/details/89552083

代码示例：
在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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

示例图：