Flutter弹性布局Flex水平排列Row垂直排列Column使用示例

Flex({
    Key? key,
    required this.direction,//Axis.vertical,Axis.horizontal,/弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
    this.mainAxisAlignment = MainAxisAlignment.start,//主轴排列方式
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,//交叉轴排列方式
    this.textDirection,//
    this.verticalDirection = VerticalDirection.down,//设置垂直方向上的子 Widget 的排列顺序，默认为 VerticalDirection.down
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be//设置文字对齐的基线类型
    this.clipBehavior = Clip.none,
    List<Widget> children = const <Widget>[],//子组件
  }) : assert(direction != null),
       assert(mainAxisAlignment != null),
       assert(mainAxisSize != null),
       assert(crossAxisAlignment != null),
       assert(verticalDirection != null),
       assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null, 'textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline'),
       assert(clipBehavior != null),
       super(key: key, children: children);

return Scaffold(
      body: Center(
        child: Flex(
          direction: Axis.vertical,////弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
          mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴两端对齐
          mainAxisSize: MainAxisSize.max,//父类容器大小
          crossAxisAlignment: CrossAxisAlignment.center,//交叉轴居中对齐
          children: [
            Container(
              width: 200,
              height: 20,
              color: Colors.purple,
              child: Text('我是第一列'),
            ),
            Container(
              width: 150,
              height: 20,
              color: Colors.orange,
              child: Text('我是第二列'),
            ),
            Container(
              width: 100,
              height: 20,
              color: Colors.red,
              child: Text('我是第三列'),
            )
          ],
        ),
      ),
    );

//水平排列
Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴两端对齐
          mainAxisSize: MainAxisSize.max,//父类容器大小
          crossAxisAlignment: CrossAxisAlignment.center,//交叉轴居中对齐
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.purple,
              child: Text('我是第一行'),
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.orange,
              child: Text('我是第二行'),
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.red,
              child: Text('我是第三行'),
            )
          ],
        ),
      ),
    );

Column({
    Key? key,
    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>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,//主轴两端对齐
          mainAxisSize: MainAxisSize.max,//父类容器大小
          crossAxisAlignment: CrossAxisAlignment.start,//交叉轴居中对齐
          children: [
            Container(
              width: 150,
              height: 100,
              color: Colors.purple,
              child: Text('我是第一Column列'),
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.orange,
              child: Text('我是第二Column列'),
            ),
            Container(
              width: 200,
              height: 30,
              color: Colors.red,
              child: Text('我是第三Column列'),
            )
          ],
        ),
      ),
    );