自学成才Flutter 弹性布局、线性布局

本文我们要介绍 Flutter 中布局 Widget,包括弹性布局、线性布局
流式布局和层叠布局。

Flutter中文网

Flutter开发


一、弹性布局--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总和的比例分割主轴的空闲空间。
二、线性布局
Flutter 的线性布局和 Android 中的一样分为水平方向的线性布局Row和垂直方向的线性布局Column。

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

Column

使用:
Column(
children: [
Text("Hello Flutter"),
Image.asset(
"images/flutter.png",
width: 200,
)
],
)
Column 的构造函数及参数说明:
和 Row 的参数一样
注意:如果 Row 嵌套 Row,或者 Column 嵌套 Column,那么只有最外面的 Row 或 Column 会占用尽可能大的空间,里面 Row 或 Column 所占用的空间为实际的大小。
三、流式布局--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);
...
}
四、层叠布局--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 来确定自己在父容器里的位置。

你可能感兴趣的:(flutter,flutter)