关于flutter:Flutter学习第十二课弹性布局Flex和水平排列Row和垂直排列Column

Flutter 学习第十二课：弹性布局 Flex 和程度排列 Row 和垂直排列 Column

一：弹性布局（Flex）
弹性布局容许子组件依照肯定比例来调配父容器空间。弹性布局的概念在其它 UI 零碎中也都存在，如 H5 中的弹性盒子布局，Android 中的 FlexboxLayout 等。Flutter 中的弹性布局次要通过 Flex 和 Expanded 来配合实现

 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 属性次要的区别就是多一个 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 列'),
            )
          ],

        ),

      ),

    );