Row是水平方向展示多个Widget集合的控件

Row

    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,// 主轴对齐方式
    MainAxisSize mainAxisSize = MainAxisSize.max,//主轴展示的区域
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//交叉轴对齐方式
    TextDirection textDirection,//文本方向
    List<Widget> children = const <Widget>[],//子容器

• children:横向展示多个widget集合的属性

return Row(
      children: <Widget>[
        Text('hello world'),
        FlatButton(
          color: Colors.red,
          // textColor: Colors.amber,
          onPressed: (){},
          child: Text('click me'),
        ),
        Container(
          color: Colors.cyan,
          padding: EdgeInsets.symmetric(horizontal: 5, vertical: 2),
          child: Text('inside container'),
        )
      ],
    );

image.png

mainAxisAlignment:主轴(水平)对齐方式

• start：左对齐

  
  image.png

• end：右对齐

  
  image.png

  • center：居中

    
    image.png

• spaceBetween：两端对齐，控件之间的间隔都相等

  
  image.png

• spaceAround：每个控件两侧的间隔相等。中间控件的间距是控件与边框的间距大一倍

  
  image.png

• spaceEvenly：每个控件之间的间隔相等。

  
  image.png

crossAxisAlignment:交叉轴对齐方式

• start:交叉轴的起点对齐
  

  image.png

• end:交叉轴的终点对齐
  

  image.png

• center:交叉轴的中点对齐
  

  image.png

• stretch:如果未设置高度会占满整个屏幕
  

  image.png

• baseline:项目文字对齐，需要设置textBaseline属性一起使用
  image.png

mainAxisSize:主轴展示区域大小

以横向多个控件为例说明

• max:主轴方向占满屏幕
  image.png

• 'min`：子控件的子控件宽度大小之和,子控件会紧挨着布局

  
  image.png

Column是垂直方向展示多个Widget集合的控件

    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],

Column的属性和Row的属性一致。区别在于，Column的主轴是垂直方向，交叉轴在水平方向，Column的布局方向是纵向的，可以类比Row理解各个属性。

实现九宫格

Row横向添加3个格子，在使用Column在纵向重复添加3次
注：读者可以自己使用另外一种(先纵向，在横向)实现9宫格，此文章不在赘述。

// 9宫格
class NineGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        RowItem(),

        RowItem(),
        RowItem(),

      ],
    );
  }
}


class RowItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 100,
          height: 100,
          child: RaisedButton(
            color: Colors.cyan,
            onPressed: (){},
            child: Text('icons1'),
          ),
        ),
        Container(
          width: 100,
          height: 100,
          child: RaisedButton(
            onPressed: (){},
            color: Colors.red,
            child: Text('icons2'),
          ),
        ),
        Container(
          width: 100,
          height: 100,
          child: RaisedButton(
            color: Colors.amber,
            onPressed: (){},
            child: Text('icons3'),
          ),
        ),
      ],
    );
  }
}

具体详情请查看demo