欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年08月06日 15:27:32   作者：Rocky_ruan  
這篇文章主要為大家介紹了Flutter彈性布局Flex水平排列Row垂直排列Column使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一：彈性布局（Flex）

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

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);

1. direction設置主軸方向

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

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

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

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

默認MainAxisAlignment.start，可設置的方式如下：

MainAxisAlignment.start：左對齊，默認值;

MainAxisAlignment.end：右對齊;

MainAxisAlignment.center：居中對齊;

MainAxisAlignment.spaceBetween：兩端對齊;

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

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

3. mainAxisSize設置主軸的大小

默認 MainAxisSize.max，可設置的值如下：

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

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

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

默認 CrossAxisAlignment.center，可設置的方式如下：

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

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

CrossAxisAlignment.center：居中對齊；

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

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

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

默認為 VerticalDirection.down，設置方式如下：

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

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

6. textBaseline設置文字對齊的基線類型

可設置的值如下：

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

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

栗子：

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('我是第三列'),
            )
          ],
        ),
      ),
    );

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

以上就是Flutter彈性布局Flex水平排列Row垂直排列Column使用示例的詳細內容，更多關于Flutter彈性布局水平垂直排列的資料請關注腳本之家其它相關文章！

相關文章

最新評論