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

更新時間：2023年08月06日 15:27:32 作者：Rocky_ruan

這篇文章主要為大家介紹了Flutter彈性布局Flex水平排列Row垂直排列Column使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

1. direction設(shè)置主軸方向
2. mainAxisAlignment設(shè)置子 Widget沿著主軸方向的排列方式
3. mainAxisSize設(shè)置主軸的大小
4. crossAxisAlignment設(shè)置子 Widget 沿著交叉軸方向的排列方式
5. verticalDirection設(shè)置垂直方向上的子 Widget 的排列順序
6. textBaseline設(shè)置文字對齊的基線類型

二：Flutter組件之Row水平排列

三：Flutter組件之垂直排列Column

一：彈性布局（Flex）

彈性布局允許子組件按照一定比例來分配父容器空間。彈性布局的概念在其它UI系統(tǒng)中也都存在，如H5中的彈性盒子布局，Android中的FlexboxLayout等。Flutter中的彈性布局主要通過Flex和Expanded來配合實(shí)現(xiàn)

Flex({
    Key? key,
    required this.direction,//Axis.vertical,Axis.horizontal,/彈性布局的方向, Row默認(rèn)為水平方向，Column默認(rèn)為垂直方向
    this.mainAxisAlignment = MainAxisAlignment.start,//主軸排列方式
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,//交叉軸排列方式
    this.textDirection,//
    this.verticalDirection = VerticalDirection.down,//設(shè)置垂直方向上的子 Widget 的排列順序，默認(rèn)為 VerticalDirection.down
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be//設(shè)置文字對齊的基線類型
    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);

1. direction設(shè)置主軸方向

可設(shè)置的值為 Axis.horizontal 和 Axis.vertical，交叉軸與主軸方向垂直。

在Flutter中，Row組件和Column組件都繼承自Flex組件

(1).Flex組件和Row、Column屬性主要的區(qū)別就是多一個direction。
(2).當(dāng)direction的值為Axis.horizontal的時候，則是Row。
(3).當(dāng)direction的值為Axis.vertical的時候，則是Column

2. mainAxisAlignment設(shè)置子 Widget沿著主軸方向的排列方式

默認(rèn)MainAxisAlignment.start，可設(shè)置的方式如下：

MainAxisAlignment.start：左對齊，默認(rèn)值;

MainAxisAlignment.end：右對齊;

MainAxisAlignment.center：居中對齊;

MainAxisAlignment.spaceBetween：兩端對齊;

MainAxisAlignment.spaceAround：每個 Widget 兩側(cè)的間隔相等，與屏幕邊緣的間隔是其他 Widget 之間間隔的一半;

MainAxisAlignment.spaceEvently：平均分布各個 Widget，與屏幕邊緣的間隔與其他 Widget 之間的間隔相等.

3. mainAxisSize設(shè)置主軸的大小

默認(rèn) MainAxisSize.max，可設(shè)置的值如下：

MainAxisSize.max：主軸的大小是父容器的大??；

MainAxisSize.min：主軸的大小是其子 Widget 大小之和。

4. crossAxisAlignment設(shè)置子 Widget 沿著交叉軸方向的排列方式

默認(rèn) CrossAxisAlignment.center，可設(shè)置的方式如下：

CrossAxisAlignment.start：與交叉軸的起始位置對齊；

CrossAxisAlignment.end：與交叉軸的結(jié)束位置對齊；

CrossAxisAlignment.center：居中對齊；

CrossAxisAlignment.stretch：填充整個交叉軸；

CrossAxisAlignment.baseline：按照第一行文字基線對齊。

5. verticalDirection設(shè)置垂直方向上的子 Widget 的排列順序

默認(rèn)為 VerticalDirection.down，設(shè)置方式如下：

VerticalDirection.down：start 在頂部，end 在底部；

VerticalDirection.up：start 在底部，end 在頂部。

6. textBaseline設(shè)置文字對齊的基線類型

可設(shè)置的值如下：

TextBaseline.alphabetic：與字母基線對齊；

TextBaseline.ideographic：與表意字符基線對齊；

栗子：

return Scaffold(
      body: Center(
        child: Flex(
          direction: Axis.vertical,////彈性布局的方向, Row默認(rèn)為水平方向，Column默認(rèn)為垂直方向
          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('我是第三列'),
            )
          ],
        ),
      ),
    );

二：Flutter組件之Row水平排列

//水平排列
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('我是第三行'),
            )
          ],
        ),
      ),
    );

三：Flutter組件之垂直排列Column

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列'),
            )
          ],
        ),
      ),
    );