flutter基础（布局Row 、Column）- 五

Row（水平布局控件）、Column（垂直布局控件）

Row、Column子控件有灵活与不灵活两种，灵活控件通过flex属性确定的比例在可用控件中列出灵活的子控件。

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "flutter控件-水平布局",
    home: new LayoutDemo(),
  ));
}

class LayoutDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('水平方向布局'),
      ),
      body: new Row(
          children: [
            new RaisedButton(
              onPressed: () {
                print('按钮一');
              },
              color: const Color(0xffcc0000),
              child: new Text('按钮一'),
            ),
            Expanded(
              flex: 1,
              child: new RaisedButton(
                onPressed: () {
                  print('按钮二');
                },
                color: const Color(0xfff1c232),
                child: new Text('按钮二'),
              ),
            ),
            new RaisedButton(
              onPressed: () {
                print('按钮三');
              },
              color: const Color(0xffea9999),
              child: new Text('按钮三'),
            ),
          ]
      ),
    );
  }
}

源码解析：

Row构造函数：

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List children = const [],
})

MainAxisAlignment:主轴方向上的对齐方式，会对child位置起作用，默认是start；

center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首位child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等。首位child都靠近首位，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首位child；
start：将children放置在主轴的起点；

MainAxissSize：在主轴方向占有空间的值，默认是max。（max、min）；

CrossAxisAlignment：children在交叉轴方向的对齐方式，

baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；

TextDirection：兼容设置，一般不做处理；

VerticalDirection：定义children摆放顺序，默认是down（从top到bottom进行布局），up（从bottom到top进行布局）

TextBaseline：使用TextBaseline的方式；

Row和Column源码就一个够着函数，具体的实现全部都是在他们的父类Flex中

Flex构造函数：

Flex({
  Key key,
  @required this.direction,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
  List children = const [],
})

其中direction是控制水平还是垂直的，当为Axis.horizontal的时候，则是Row，当为Axis.vertical的时候，则是Column。