[Flutter Widget] Wrap
[Flutter Widget] Wrap
前言
在前面的文章中我们讲了很多Widget的用法，包括简单的Widget和复杂一点的布局，其实归根到底都是为了解决我们在界面布局上的需求，最近很多童鞋私信我Flutter中有没有类似Ios，Android上的流式布局，答案是肯定的啊，既然都说到这里了，今天我们就来看下Flutter中强大的流式布局吧。
流式布局是什么
其实理解起来很简单，无论在终端还是Web端每个屏幕都有自己的尺寸，当然每个存在于屏幕上的组件也会有自己的尺寸。
当然在我们知道每个组件尺寸或者屏幕尺寸固定的情况下我们可以很好地来布局我们的组件来达到最合适的显示效果。
但是如果我们的组件的尺寸是不固定的呢？在这种情况下我们的组件就很有可能会超出屏幕的范围，或者达不到我们预期的效果。
所以，我们就需要借助于流式布局来解决这个问题。流式布局会根据当前屏幕的尺寸和当前组件尺寸来看是否进行换行显示。
如:
当我们想要在一行显示多个Button时就会出现如图的问题，超出屏幕的Widget并不会显示。
但是，我们其实想要的是这样的效果
所以，今天我们来看下Flutter中的流式布局
Wrap
Wrap的中文意思就是包裹的意思，真直接，哈哈，用起来也是很直接的。
好吧还是看构造方法：
Wrap({
Key key,
this.direction = Axis.horizontal,//方向
this.alignment = WrapAlignment.start,//内容排序方式
this.spacing = 0.0,//两个widget之间横向的间隔
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,两个widget之间纵向的间隔，当为纵向时则为横向间隔
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,//文字排序方向
this.verticalDirection = VerticalDirection.down,//direction为Vertical时排序顺序
List<Widget> children = const <Widget>[],//widgets
})好吧还是来举个简单的例子：
void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap"),
centerTitle: true,
),
body:
Wrap(
spacing: 10.0,
direction: Axis.horizontal,
alignment: WrapAlignment.start,
children: <Widget>[
MyButton("第1集"),
MyButton("第2集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
MyButton("第9集"),
MyButton("第10集"),
MyButton("第11集"),
],
),
);
}
}
class MyButton extends StatelessWidget {
final text;
MyButton(this.text);
@override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
onPressed: () {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text(text),
action: new SnackBarAction(
label: "撤回",
onPressed: () {},
),
));
},
child: Text(text),
));
}
}我们自定义了一个MyButton，然后让Wrap来包裹住这些Button，设置水平间隔为10像素（垂直方向默认有大约10像素的间隔）
运行出来的效果如下：
接下来我，我们尝试修改alignment属性来看下效果
当然，我们也可以更改direction为纵向来看下效果：
我们设置spacing为10.0，设置runSpacing为10.0，设置direction为vertical
Wrap(
spacing: 10.0,
runSpacing: 10.0,
direction: Axis.vertical,
alignment: WrapAlignment.start,
children: <Widget>[
MyButton("第1集"),
MyButton("第2集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
MyButton("第9集"),
MyButton("第10集"),
MyButton("第11集"),
],
)嗯，来看下效果：
修改 textDirection: TextDirection.rtl属性，让它从右往左排序，再来看下效果
话说显示效果还是真的奇怪呢！
当然，我们现在的效果还不是很好看，我们可以根据以前讲到的知识来给优化下啊。
小结
- 使用Wrap可以很轻松的实现流式布局效果
- Wrap支持设置流式布局是纵向显示或者是横向显示
- 可以使用alignment属性来控制widgets的布局方式
试一试
根据以前讲到的Widget知识，实现如上的效果。