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

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

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

一：彈性布局（Flex）

彈性布局允許子組件按照一定比例來(lái)分配父容器空間。彈性布局的概念在其它UI系統(tǒng)中也都存在，如H5中的彈性盒子布局，Android中的FlexboxLayout等。Flutter中的彈性布局主要通過(guò)Flex和Expanded來(lái)配合實(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è)置文字對(duì)齊的基線(xiàn)類(lèi)型
    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ū)別就是多一個(gè)direction。
  • (2).當(dāng)direction的值為Axis.horizontal的時(shí)候，則是Row。
  • (3).當(dāng)direction的值為Axis.vertical的時(shí)候，則是Column

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

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

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

MainAxisAlignment.end：右對(duì)齊;

MainAxisAlignment.center：居中對(duì)齊;

MainAxisAlignment.spaceBetween：兩端對(duì)齊;

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

MainAxisAlignment.spaceEvently：平均分布各個(gè) 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：與交叉軸的起始位置對(duì)齊；

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

CrossAxisAlignment.center：居中對(duì)齊；

CrossAxisAlignment.stretch：填充整個(gè)交叉軸；

CrossAxisAlignment.baseline：按照第一行文字基線(xiàn)對(duì)齊。

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

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

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

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

6. textBaseline設(shè)置文字對(duì)齊的基線(xiàn)類(lèi)型

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

TextBaseline.alphabetic：與字母基線(xiàn)對(duì)齊；

TextBaseline.ideographic：與表意字符基線(xiàn)對(duì)齊；

栗子：

return Scaffold(
      body: Center(
        child: Flex(
          direction: Axis.vertical,////彈性布局的方向, Row默認(rèn)為水平方向，Column默認(rèn)為垂直方向
          mainAxisAlignment: MainAxisAlignment.spaceBetween,//主軸兩端對(duì)齊
          mainAxisSize: MainAxisSize.max,//父類(lèi)容器大小
          crossAxisAlignment: CrossAxisAlignment.center,//交叉軸居中對(duì)齊
          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,//主軸兩端對(duì)齊
          mainAxisSize: MainAxisSize.max,//父類(lèi)容器大小
          crossAxisAlignment: CrossAxisAlignment.center,//交叉軸居中對(duì)齊
          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,//主軸兩端對(duì)齊
          mainAxisSize: MainAxisSize.max,//父類(lèi)容器大小
          crossAxisAlignment: CrossAxisAlignment.start,//交叉軸居中對(duì)齊
          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使用示例的詳細(xì)內(nèi)容，更多關(guān)于Flutter彈性布局水平垂直排列的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論