Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,但Row与Column都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时,则向crossAxis上扩展显示。
常用属性:
属性 | 说明 |
direction | 横向纵向的排序方式 默认横向 |
spacing | 横轴的间距 |
runSpacing | 纵轴的间距 |
verticalDirection | 用来设置child子元素的排放顺序,默认是dow |
runAlignment | 纵轴对齐方式 |
alignment | 横轴对齐方式 |
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("Wrap"),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 400,
height: 600,
color: Colors.blue,
child: Wrap(
spacing: 10,
runSpacing: 10,
verticalDirection: VerticalDirection.up,
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.end,
children: <Widget>[
MyButton("鬼堡"),
MyButton("天龙八部"),
MyButton("超级兵王"),
MyButton("金刚不死诀"),
MyButton("西游记精选孙悟空"),
MyButton("爱你是最好的时光"),
MyButton("爱情的开关"),
],
),
);
}
}
class MyButton extends StatelessWidget {
final String text;
const MyButton(this.text, {Key key});
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
print('你点击了:$text');
},
textColor: Theme.of(context).accentColor,
child: Text(this.text),
);
}
}