Flutter

线性布局指的是沿水平或者垂直方向排布子组件。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:

进击的小🐴农