线性布局

线性布局指的是沿水平或者垂直方向排布子组件。Flutter中通过row和column来实现线性布局。row和column都继承于flex。

Row({
  ...  
  TextDirection textDirection,    
  MainAxisSize mainAxisSize = MainAxisSize.max,    
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,  
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[],
})

的

Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度,另外row和column都只有一行/一列，如果超出了范围就会报overflow错误。

超出屏幕会自动折行的布局称为流式布局，Flutter中可以使用wrap和flow来处理流式布局。

一个例子：一个column里只有两个text，设置了column的一些选项，建议可以调整一下各个选项的值，就知道它们各自都是干什么了 

class CenterColumnRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(  //以列的形式排列
      textDirection: TextDirection.ltr,//文本方向是右（right）往左（left）的
      crossAxisAlignment: CrossAxisAlignment.start, //纵轴（由于是column，主轴是竖直方向，纵轴就是水平方向），即水平方向的对齐方式，start：以起始处对齐
      //这里由于textDirection设置为了rtl，从右到左，所以start在右面，故以右方对齐
      verticalDirection: VerticalDirection.down,  //textDirection的垂直方向,即竖直方向。比如.up就是从下往上排列，最下面是第一个组件，往上是第二个，以此类推。
      mainAxisAlignment: MainAxisAlignment.end,  //column的主轴是竖直方向，而由于verticalDirection设置为了up，方向是下到上的，所以end指的就是上，start则是下。如果
      //vertivalDirection设置为了down，则竖直方向是从上到下，那么start指的就是上，end指的是下
      children: <Widget>[
        Text("hi"),
        Text("world"),
      ],
    );
  }
}

运行截图：

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //Flex的两个子widget按1：2来占据水平空间
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,    //1红
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,    //2绿
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 100.0),
          child: SizedBox(
            height: 100.0,
            //Flex的三个子widget，在垂直方向按2：1：1来占用100像素的空间
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,      //2红
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
                Spacer(
                  flex: 1,      //1黑
                ),
                Expanded(
                  flex: 1,      //1绿
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

edgeInsets: