Flutter布局Widget--弹性布局、线性布局、流式布局和层叠布局

前言 本文咱们要介绍 Flutter 中布局 Widget，包括弹性布局、线性布局 流式布局和层叠布局。 1、弹性布局--Flex Flex 相似 Android 中的 FlexboxLayout，和 Expanded 配合使用能够实现子Widget 按照必定比例来分配父容器空间。

使用：

Flex( direction: Axis.horizontal, children: [ ... ], )

其中direction：主轴的方向，是必选参数，它的类型是 Axis，有如下两种值： （1）Axis.horizontal：主轴方向为水平方向，那么子Widget 就会沿水平方向排列，交叉方向是垂直方向。 （2）Axis.vertical：主轴方向为垂直方向，那么子Widget 就会沿垂直方向排列，交叉方向是水平方向。

Flex 的构造函数及参数说明

class Flex extends MultiChildRenderObjectWidget { Flex({ Key key, @required this.direction,//必选；类型 Axis；主轴的方向 this.mainAxisAlignment = MainAxisAlignment.start,//可选；类型 MainAxisAlignment；表示子Widget在主轴的对齐方式 this.mainAxisSize = MainAxisSize.max,//可选；类型 MainAxisSize；表示主轴应该占用多大的空间，分为mix 和 max this.crossAxisAlignment = CrossAxisAlignment.center,//可选；类型 CrossAxisAlignment；表示子Widget在交叉轴的对齐方式 this.textDirection,//可选；类型 TextDirection；表示子Widget在主轴方向上的布局顺序，分为rtl：从右到左 和 ltr：从左到右 this.verticalDirection = VerticalDirection.down,//可选；类型 VerticalDirection；表示子Widget在交叉轴方向上的布局顺序 this.textBaseline,//可选；类型 TextBaseline；排列子Widget 时使用哪一个基线 List children = const [],//可选；类型 List< Widget>；Flex布局 里排列的内容 }) : assert(direction != null), assert(mainAxisAlignment != null), assert(mainAxisSize != null), assert(crossAxisAlignment != null), assert(verticalDirection != null), assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null), super(key: key, children: children); ... }

Flexible 与 Expanded 为了不子Widget 在 Row、Column、Flex中超届，就可使用 Flexible 和 Expanded，当子Widget 要超过主轴的大小时，会自动换行。其中 Expanded 是 Flexible 的子类。

Flexible( child: Text('内容'), ) //或 Expanded( child: Text('内容'), )

（1）Flexible 的构造函数及参数说明： class Flexible extends ParentDataWidget { const Flexible({ Key key, this.flex = 1, //可选；类型 int；此 Widget的弹性因子 this.fit = FlexFit.loose,//可选；类型 FlexFit；如何分配弹性Widget在可用空间里的大小 @required Widget child,//必选；类型 Widget；要显示的Widget }) : super(key: key, child: child); ... }

（2）Expanded 的构造函数及参数说明： class Expanded extends Flexible { /// Creates a widget that expands a child of a [Row], [Column], or [Flex] /// expand to fill the available space in the main axis. const Expanded({ Key key, int flex = 1, @required Widget child, }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child); }

（3）Flexible 与 Expanded 的区别： fit 参数不一样，Expanded 用的是默认的，当还有剩余空间的时候，会占满剩余的所有空间。而 Flexible 用的是 FlexFit.loose，只占用自身大小的空间。 （4）flex 弹性系数： 当 flex 为0或null，则 child 是没有弹性的，称为非弹性子Widget，非弹性子Widget的大小就是其自己的大小，不会被扩展去占用多余的空间 。 当 flex 大于0时，child 是有弹性的，称为弹性子Widget，首先会计算出第一步全部 flex 为0或null的子Widget 的大小，而后会按照弹性子Widget的flex占全部弹性子Widget的flex总和的比例分割主轴的空闲空间。 2、线性布局 Flutter 的线性布局和 Android 中的同样分为水平方向的线性布局Row和垂直方向的线性布局Column。

1. Row

使用：

Row( children: [ Text("Hello Flutter"), Image.asset( "images/flutter.png", width: 200, ) ], )

Row 的构造函数及参数说明：

class Row extends Flex { Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//可选；类型 MainAxisAlignment；表示子Widget 在主轴的对齐方式 MainAxisSize mainAxisSize = MainAxisSize.max,//可选；类型 MainAxisSize；表示主轴应该占用多大的空间 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//可选；类型 CrossAxisAlignment；表示子Widget在交叉轴的对齐方式 TextDirection textDirection,//可选；类型TextDirection；表示子Widget在主轴方向上的布局参数 VerticalDirection verticalDirection = VerticalDirection.down,//可选；类型VerticalDirection；表示子Widget在交叉轴方向上的布局顺序 TextBaseline textBaseline,//可选；类型TextBaseline；排列子Widget时使用哪一个基线 List children = const [],//可选；类型List< Widget>；Flex布局里排列的内容 }) : super( children: children, key: key, direction: Axis.horizontal, mainAxisAlignment: mainAxisAlignment, mainAxisSize: mainAxisSize, crossAxisAlignment: crossAxisAlignment, textDirection: textDirection, verticalDirection: verticalDirection, textBaseline: textBaseline, ); }

2. Column

使用：

Column( children: [ Text("Hello Flutter"), Image.asset( "images/flutter.png", width: 200, ) ], )

Column 的构造函数及参数说明： 和 Row 的参数同样

注意：若是 Row 嵌套 Row，或者 Column 嵌套 Column，那么只有最外面的 Row 或 Column 会占用尽量大的空间，里面 Row 或 Column 所占用的空间为实际的大小。

3、流式布局--Wrap 页面元素的宽度能够按照屏幕分辨率进行适配调整，把超出屏幕显示范围的控件自动换行。

使用：

Wrap( direction: Axis.horizontal, children: [ ... ] )

代码示例：

import 'package:flutter/material.dart';

class WrapWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'WrapWidget', home: new Scaffold( appBar: new AppBar( title: new Text('WrapWidget'), ), body: Wrap( direction: Axis.horizontal, spacing: 10.0, runSpacing: 5.0, children: [ new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text('1'), ), label: new Text('AAAAAAAAAA')), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text('1'), ), label: new Text('BBBBB')), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text('1'), ), label: new Text('CCCCCCCCCCC')), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text('2'), ), label: new Text('DDDDDDDD')), new Chip( avatar: new CircleAvatar( backgroundColor: Colors.blue, child: new Text('2'), ), label: new Text('EEEEEE')), ], ), ), ); } }

运行结果：

Wrap 的构造函数及参数说明：

class Wrap extends MultiChildRenderObjectWidget { Wrap({ Key key, this.direction = Axis.horizontal,//可选；类型 Axis；主轴的方向，默认是 Axis.horizontal this.alignment = WrapAlignment.start,//可选；类型 WrapAlignment；子Widget在主轴上的对齐方式，默认值为WrapAlignment.start，和MainAxisAlignment的同样 this.spacing = 0.0,//可选；类型 double；主轴的方向间距 this.runAlignment = WrapAlignment.start,//可选；类型 WrapAlignment；Wrap 会自动换成或换列，runAlignment 就是每行或每列的对齐方式，若是主轴为水平方向，就是每行，若是主轴为竖直方向，就是每列，默认值为WrapAlignment.start，WrapAlignment 的值和 MainAxisAlignment 的同样 this.runSpacing = 0.0,//可选；类型 double；每行或每列之间的间距，默认是0.0 this.crossAxisAlignment = WrapCrossAlignment.start,//可选；类型 WrapCrossAlignment；子Widget 在交叉轴上的对齐方式，WrapCrossAligment.start,WrapCrossAligment的值和MainAxisAligment的同样 this.textDirection,//可选；类型 TextDirection；表示子Widget在主轴方向上的布局顺序 this.verticalDirection = VerticalDirection.down,//可选；类型 VerticalDirection；表示子Widget在交叉轴方向上的布局顺序 List children = const [],//可选；类型 List；Wrap布局里排序的内容 }) : super(key: key, children: children); ... }

4、层叠布局--Stack Flutter 中的层叠布局相似 Android 中的 FrameLayout，其子Widget 会按照添加顺序肯定显示层级，后面添加的会覆盖在前面添加的 Widget 上面。

使用：

Stack( children: [ Image.asset( "images/flutter.png", width: 200, fit: BoxFit.cover, ), Text('Hello Flutter',style: TextStyle(fontSize: 50.0),), ], )

Stack 的构造函数及参数说明：

class Stack extends MultiChildRenderObjectWidget { Stack({ Key key,//可选；类型 Key；Widget的标识 this.alignment = AlignmentDirectional.topStart,//可选；类型AlignmentDirectional this.fit = StackFit.loose,//可选；类型 StackFit；此参数用于决定 non-positioned 子Widget 如何去适应Stack的大小 this.overflow = Overflow.clip,//可选；类型 Overflow；决定如何显示超出 Stack显示空间的子Widget List children = const [],//可选；类型 List；Stack布局里排序的内容 }) : super(key: key, children: children); ... }

（1）alignment 参数： 决定如何对齐 non-positioned 子Widget 和部分 position 子Widget，默认值为Alignment.topStart，部分 positioned 子Widget，在某一个轴上没有定义的，这个轴就使用 alignment 的值，好比left、right为横轴，left 和right 都没有定义，就是横轴没有定义，只要这两个一个有值，这个轴就算有值；top、bottom为纵轴，同理。 AlignmentDirectional 的值： AlignmentDirectional.topStart：上边 start 对齐 AlignmentDirectional.topCenter：上边 居中 对齐 AlignmentDirectional.topEnd：上边 end 对齐 AlignmentDirectional.centerStart：中间 start 对齐 AlignmentDirectional.center：中间对齐 AlignmentDirectional.centerEnd：中间 end 对齐 AlignmentDirectional.bottomStart：下边 start 对齐 AlignmentDirectional.bottomCenter：下边 居中 对齐 AlignmentDirectional.bottomEnd：下边 end 对齐 （2）fit 参数： 用于决定 non-positioned 子Widget 如何去适应Stack的大小。 StackFit 的值： StackFit.loose：使用子Widget 自身的大小 StackFit.expand：子Widget 扩伸到 Stack 的大小 StackFit.passthrough：Stack 的父Widget 的约束无修改的传递给 Stack 的子Widget （3）overflow 参数： 决定如何显示超出 Stack显示空间的子Widget。 overflow 的值： Overflow.visible：超出部分仍能看见 Overflow.clip：超出部分会被剪裁

Stack 的子Widget 为了肯定子Widget 到父容器四个角的位置，Stack将子Widget 分为两类：positioned 子Widget 和 non-positioned 子Widget。 （1）Positioned positioned 子Widget 是指被 Positioned 嵌套起来的 Widget，Positioned 能够控制子Widget 到父容器四个边的距离。

使用： Stack( fit: StackFit.expand, children: [ Positioned( left: 50, top: 100, child: Image.asset( "images/flutter.png", width: 200, fit: BoxFit.cover, ), ), Text('Hello Flutter'), ], ),

Positioned 的构造函数及参数说明： class Positioned extends ParentDataWidget { const Positioned({ Key key,//可选；类型 Key；Widget的标识 this.left,//可选；类型 double；离Stack左边的距离 this.top,//可选；类型 double；离Stack上边的距离 this.right,//可选；类型 double；离Stack右边的距离 this.bottom,//可选；类型 double；离Stack底边的距离 this.width,//可选；类型 double；指定Widget的宽度 this.height,//可选；类型 double；指定Widget的高度 @required Widget child, }) : assert(left == null || right == null || width == null), assert(top == null || bottom == null || height == null), super(key: key, child: child); ... }

注意：此处的width、height 是用于配合 left、top、right、bottom 来定位 Widget 的。而且在水平方向上，只能指定 left、right、width 三个属性中的两个，若是三个都指定就会报错；垂直方向同理。

（2）non-positioned子Widget non-positioned 子Widget 就是不用 Positioned 嵌套起来的 Widget，non-positioned 子Widget 使用 Stack 设置的 alignment 来肯定本身在父容器里的位置。

小编这呢，给你们推荐一个优秀的iOS交流平台，平台里的伙伴们都是很是优秀的iOS开发人员，咱们专一于技术的分享与技巧的交流，你们能够在平台上讨论技术，交流学习。欢迎你们的加入（想要进入的可加小编微信）。

微信号：17336563535

来源：本文为第三方转载，若有侵权请联系小编删除。