概述
Wrap好似Row和Column的结合，在横轴的表现和Row一致，而竖轴的表现和Column一致，比如当’this.direction = Axis.horizontal’时，横轴()的child放置不下时就会在竖轴自动扩展一行。
构造函数
Wrap({
Key key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List children = const [],
})
direction 扩展方式 比如横向堆砌
alignment 对齐方式
spacing 主轴空隙间距
runAlignment run的对齐方式
runSpacing run空隙间距
crossAxisAlignment 交叉轴对齐方式
textDirection 文本对齐方向
verticalDirection 确定垂直放置子元素的顺序，以及如何在垂直方向上解释开始和结束，默认down
children 需要放置的组件列表
实例代码
// Wrap
import 'package:flutter/material.dart';
class WrapLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text('Wrap')),
// 创建换行布局
body: Wrap(
// 扩展方式，横向堆砌
direction: Axis.horizontal,
// 对齐方式
alignment: WrapAlignment.start,
// 主轴空隙间距
spacing: 0,
// run的对齐方式
runAlignment: WrapAlignment.center,
// run空隙间距
runSpacing: 10,
// 交叉轴对齐方式
crossAxisAlignment: WrapCrossAlignment.end,
// 文本对齐方向
textDirection: TextDirection.ltr,
// 确定垂直放置子元素的顺序，以及如何在垂直方向上解释开始和结束。 默认down
verticalDirection: VerticalDirection.down,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: Chip(
label: Container(
padding: EdgeInsets.all(2),
constraints: BoxConstraints(
// maxHeight: 30,
// maxWidth: 100,
minHeight: 10,
minWidth: 10),
decoration: BoxDecoration(
// color: Colors.blueAccent
),
child: Text(
'hello',
style: TextStyle(color: Colors.blueAccent, fontSize: 30),
overflow: TextOverflow.fade,
)),
)),
Container(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: Chip(
label: Container(
padding: EdgeInsets.all(2),
constraints: BoxConstraints(
// maxHeight: 30,
// maxWidth: 100,
minHeight: 10,
minWidth: 10),
decoration: BoxDecoration(
// color: Colors.blueAccent
),
child: Text(
'hello',
style: TextStyle(color: Colors.blueAccent, fontSize: 30),
overflow: TextOverflow.fade,
)),
)),
Container(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: Chip(
label: Container(
padding: EdgeInsets.all(2),
constraints: BoxConstraints(
// maxHeight: 30,
// maxWidth: 100,
minHeight: 10,
minWidth: 10),
decoration: BoxDecoration(
// color: Colors.blueAccent
),
child: Text(
'hello',
style: TextStyle(color: Colors.blueAccent, fontSize: 30),
overflow: TextOverflow.fade,
)),
)),
Container(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: Chip(
label: Container(
padding: EdgeInsets.all(2),
constraints: BoxConstraints(
// maxHeight: 30,
// maxWidth: 100,
minHeight: 10,
minWidth: 10),
decoration: BoxDecoration(
// color: Colors.blueAccent
),
child: Text(
'hello',
style: TextStyle(color: Colors.blueAccent, fontSize: 30),
overflow: TextOverflow.fade,
)),
)),
Container(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: Chip(
label: Container(
padding: EdgeInsets.all(2),
constraints: BoxConstraints(
// maxHeight: 30,
// maxWidth: 100,
minHeight: 10,
minWidth: 10),
decoration: BoxDecoration(
// color: Colors.blueAccent
),
child: Text(
'hello',
style: TextStyle(color: Colors.blueAccent, fontSize: 30),
overflow: TextOverflow.fade,
)),
)),
],
),
);
}
}
示例图片：
