Row、Column的介绍

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

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

Column控件主要有以下几个属性

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

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

3. crossAxisAlignment：横轴对齐方式；

4. textDirection：文字方向；

5. verticalDirection：垂直方向；

6. children：子控件。

Row控件主要有以下几个属性

• MainAxisAlignment：主轴对齐方式，可以设置start、end、center、spaceBetween、spaceAround等；
• CrossAxisAlignment：交叉轴对齐方式，可以设置start、end、center、stretch等；
• VerticalDirection：垂直方向；
• TextDirection：文本方向；
• TextBaseline：文本基线；
• MainAxisSize：主轴尺寸；
• CrossAxisCount：交叉轴子元素个数；
• Children：子元素列表；
• TextBaseline：文本基线；
• onTap：点击事件；
• onLongPress：长按事件；
• onHorizontalDragUpdate：横向拖动事件；
• onVerticalDragUpdate：纵向拖动事件；
• onHorizontalDragEnd：横向拖动结束事件；
• onVerticalDragEnd：纵向拖动结束事件；
• onHorizontalDragCancel：横向拖动取消事件；
• onVerticalDragCancel：纵向拖动取消事件；

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的使用类似。 效果如图