Wrap 可以实现流布局(自动换行),当子元素在一行排列空间不足时,会自动换行排列显示。
参数详解
属性 | 说明 |
direction | 排列方向(垂直和水平) |
alignment | 主轴(x)对齐方式 |
spacing | 主轴(x)子元素间距 |
runAlignment | 纵轴(y)对齐方式 |
runSpacing | 纵轴(y)子元素间距 |
crossAxisAlignment | 交叉轴(crossAxis)方向上的对齐方式。 |
textDirection | 正反序 排列 |
verticalDirection | 文本方向。 |
children | 子元素集合 |
alignment
WrapAlignment.start,
WrapAlignment.end,
WrapAlignment.center,
WrapAlignment.spaceAround,//左右对齐 间距与控件 同时平分空间
WrapAlignment.spaceBetween,//左右对齐 间距平分 两边没间隙
WrapAlignment.spaceEvenly,//左右对齐 间距平分 两边有间隙
代码示例
class MyBodyA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
color: Colors.red[200],
width: 400,
height: 500,
child: Wrap(
//水平间距
spacing: 8.0,
//垂直间距
runSpacing: 10.0,
//对齐方式
alignment: WrapAlignment.spaceBetween,
children: <Widget>[
MyView('A'),
MyView('widget'),
MyView('that'),
MyView('displays'),
MyView('its'),
MyView('children'),
MyView('int'),
MyView('multiple'),
MyView('horizontal'),
MyView('vertical'),
MyView('runs'),
],
)
);
}
}
//定义一个 公共类 返回view
class MyView extends StatelessWidget {
String text;
MyView(this.text);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(8, 5, 8, 5),
decoration: BoxDecoration(
border:Border.all(
color: Colors.blue,
width: 1,
),
borderRadius: BorderRadius.all(
Radius.circular(8),
),
),
child: Text(this.text),
);
}
}