Flutter Wrap 组件实现流布局
Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainAxis 上空 间不足时,则向 crossAxis 上去扩展显示。
属性 |
说明 |
direction |
主轴的方向,默认水平 |
alignment |
主轴的对其方式 |
spacing |
主轴方向上的间距 |
textDirection |
文本方向 |
verticalDirection |
定义了 children 摆放顺序,默认是 down,见 Flex 相关属性介绍。 |
runAlignment |
run 的对齐方式。run 可以理解为新的行或者 列,如果是水平方向布局的话,run 可以理解 为新的一行 |
runSpacing |
run 的间距 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('FlutterDemo')), body: LayoutDemo(), )); } } class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( height: 600, width: 400, color: Colors.pink, padding: EdgeInsets.all(10), child: Wrap( spacing:10, runSpacing: 10, direction: Axis.vertical, // alignment:WrapAlignment.spaceEvenly, // runAlignment: WrapAlignment.center, children: <Widget>[ MyButton("第1集"), MyButton("第2集"), MyButton("第3集"), MyButton("第4集"), MyButton("第5集"), MyButton("第6集"), MyButton("第7集"), MyButton("第8集"), MyButton("第9集"), MyButton("第10集"), MyButton("第11集"), MyButton("第13集"), MyButton("第14集"), MyButton("第15集"), MyButton("第16集"), MyButton("第17集"), MyButton("第18集"), MyButton("第19集"), MyButton("第20集"), MyButton("第21集"), ], ), ); } } class MyButton extends StatelessWidget{ final String text; const MyButton(this.text,{Key key}) : super(key: key); @override Widget build(BuildContext context) { // TODO: implement build return RaisedButton( child: Text(this.text), textColor:Theme.of(context).accentColor, onPressed: (){ } ); } }
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!