Flutter学习之Padding，Row,Column,Expanded组件

Padding组件

因为Flutter中有很多Widget没有padding属性，所以我们可以使用Padding组件处理容器与子元素直接的间隔。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

Row水平布局组件

Column垂直布局组件

Row和Column默认会在主轴方向取最大，Row相对应LinearLayout的layout_width为match_parent，Column相对应LinearLayout的layout_height为match_parent。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

属性图解

mainAxisAlignment图解

在讲解mainAxisAlignment时，我们一样树立这个一个概念：主轴和交叉轴。如果是Column，主轴是竖直轴，交叉轴是水平轴；如果是Row，主轴是水平轴，交叉轴是竖直轴。
接下来我们看一下mainAxisAligment的几个属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

enum MainAxisAlignment {
 start,
 end,
 center,
 spaceBetween,
 spaceAround,
 spaceEvenly,
}

start:

end:

center:居中显示
spaceBetween:将空闲空间均匀地放在子’Widget’之间

spaceAround:将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2

spaceEvenly:将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

mainAxisSize图解

MainAxisSize的取值有两种：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

max：根据传入的布局约束条件，最大化主轴方向的可用空间；
min：与max相反，是最小化主轴方向的可用空间；
从这里可以看出来这两个属性与我们接触过的Android的match_parent和wrap_content相似。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

这里值得注意的是如果我们将mainAxisSize设置为min,还设置了mainAxisAlignment可能会导致其效果展示不出来。
主轴方向默认取最大，可以设置为取最小文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

class WidgetTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: ,
        ),Container(
          width: 100,
          height: 100,
          color: ,
        ),Container(
          width: 100,
          height: 100,
          color: ,
        )
      ],
    );
  }
}

效果如下，可以从图中看出，主轴并没有像我们想的那样出现间隙。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

关于textDirection和verticalDirection我们不必死记硬背Row中是谁控制谁，在Column中是谁控制谁文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

我们只需要记住
textDirection就是用来控制水平方向的起始位置和排列方向
verticalDirection就是用来控制垂直方向的起始位置和排列方向文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

然后记住
MainAxisAlignment（主轴）就是与当前控件方向一致的轴
CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

Expanded 布局

可以把Expanded布局中的flex看作Android中xml属性中的android:layout_weight这个属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

flex：如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间
接下来，为了熟练掌握进行demo的书写：大致效果为：
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17876.html

void main() => runApp(WidggetTestApp());

class WidggetTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row,Column学习'),
        ),
        body: WidgetTest(),
      ),
    );
  }
}

class WidgetTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: (5),
      child: Column(
        children: <Widget>[
          Container(
            height: 200,
            color: ,
          ),
          SizedBox(
            height: 5,
          ),
          Container(
            height: 200,
            child:  Row(
              children: <Widget>[
                Expanded(
                    flex: 2,
                    child: Container(
                      height: 200,
                      child: (""
                        ,fit: ,
                      ),
                    )
                ),
                SizedBox(
                  width: 5,
                  
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: ('' ,fit: ,) ,
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Expanded(
                        flex: 1,
                        child: ('' ,fit: ,) ,
                      ),

                    ],
                  ) ,
                ),

              ],
            ),
          )
        ],
      ),
    );
  }
}