Flutter的Row和Column简介

Row、Column的介绍

Row：水平布局，在水平方向上排列子widget的列表。
Column：垂直布局，在垂直方向上排列子widget的列表。

说明：Row和Column是多子节点空间，他们不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

属性

1. mainAxisAlignment：主轴对齐方式，可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly；

2. mainAxisSize：主轴大小，可以选择min、max；

3. crossAxisAlignment：横轴对齐方式；

4. textDirection：文字方向；

5. verticalDirection：垂直方向；

6. children：子控件。

Expanded

这个是Row/Column的内的小控件，可以用来实现权重的布局，这个很有用。它必须是Row、Column或Flex的后代，并且从Expanded到其封闭行、列或Flex的路径必须仅包含StatelessWidget或StatefulWidget（而不是其他类型的小部件，如RenderObjectWidget）。

实例

Container(
          color: Colors.grey,
          padding: EdgeInsets.only(top: 10, bottom: 10),
          margin: EdgeInsets.only(top: 10),
          child: Row(
            children: [
              Expanded(
                child: Text(
                  'Deliver features faster',
                  textAlign: TextAlign.center,
                ),
                flex: 1,
              ),
              Expanded(
                flex: 1,
                child: Text(
                  'Craft beautiful UIs',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(
                child: FlutterLogo(),
                flex: 1,
              ),
              Expanded(child: FlutterLogo(),
                flex: 1,
              ),
              FlutterLogo(),
              Expanded(
                  child:FittedBox(
                    fit: BoxFit.contain,
                    child: FlutterLogo(),
                  )
              ),
              Expanded(
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: FlutterLogo(),
                ),
              )
            ],
          ),
        ),

这里举了一个Row的例子，Column的使用类似。
效果如图