乐趣区

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

        ),

      ),

    );
退出移动版