Flutter-Flex的使用说明

Flutter-Flex的使用说明

flex也属于一种布局方式，在使用上有点类似于Row、Column；不仅可以进行水平方向的布局，还可以进行垂直方向的布局；布局方式的改变通过direction这个属性。

flex的定义

flex的定义：

Flex({
    Key key,
    @required this.direction,//设置flex是在水平方向上设置
    List<Widget> children = const <Widget>[],//一组子widgets
    
    <!--剩余这些定义请查看有关Row和Column的相似定义描述-->
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline,
})

Flutter-Row的使用说明

Flutter-Column的使用说明

Flex的演示代码

这里创建四个Container类型的widgets，宽高分别为90。0、100.0，然后左右间距分别设置为6.0，并且设置direction：Axis.horizontal水平方向放置

class FlexDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Flex(
        direction: Axis.horizontal,
//    direction: Axis.vertical,
      children: <Widget>[
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.redAccent,
        ),
        SizedBox(width: 6,),
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.greenAccent,
        ),
        SizedBox(width: 6,),
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.blue,
        ),
        SizedBox(width: 6,),
        Container(
          width: 90.0,
          height: 100.0,
          color: Colors.orange,
        ),

      ],
    );
  }
}

运行代码，效果如下：