Wrap概述
Warp
使用了Flex中的一些概念,某种意义上说跟Row
、Column
更加相似,单行的Wrap
和Row
表现几乎是一样的,单列的Wrap
和Column
表现几乎是一致的,但是Row
和Column
都是单行单列的,Wrap
就突破了这个极限,当主轴上的空间不足的时候,则自动向次轴上去扩展显示。对于一些需要按宽度或者高度让child
自动换行的布局的场景,可以使用Wrap
。
Wrap属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
direction | Axis | Axis.horizontal | 主轴(mainAxis)的方向,默认为水平方向 |
alignment | WrapAlignment | 主轴方向上的对齐方式,默认为start | |
spacing | double | 0.0 | 主轴方向的间距 |
runAlignment | WrapAlignment | WrapAlignment.start | run的对齐方式。run可以理解为新的行或者列,如果在水平方向布局的话,run可以理解为新的一行 |
runSpacing | double | 0.0 | run的间距 |
crossAxisAlignment | WrapCrossAlignment | WrapCrossAlignment.start | 主轴(crossAxis)方向上的对齐 |
textDirection | TextDirection | 文本方向 | |
verticalDirection | VerticalDirection | 定义了childen摆放的顺序,默认是down。见Flex相关的属性介绍 |
Wrap示例代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'wrap按宽高自动换行示例',
home: new WrapUse(),
));
}
class WrapUse extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('wrap按宽高自动换行示例'),
),
body: Wrap(
spacing: 8.0, //chip之间的间隙大小
runSpacing: 4.0, //行之间的间隙大小
children: <Widget>[
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade800,
child: new Text(
'武大郎',
style: new TextStyle(
fontSize: 10.0,
),
),
),
label: Text('武大郎脆饼'),
),
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade700,
child: new Text(
'西毒',
style: new TextStyle(
fontSize: 10.0,
),
),
),
label: Text('东邪西毒'),
),
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade900,
child: new Text(
'杨6郎',
style: new TextStyle(
fontSize: 10.0,
),
),
),
label: Text('杨6郎扛枪'),
),
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade700,
child: new Text(
'武松',
style: new TextStyle(
fontSize: 10.0,
),
),
),
label: Text('武松打虎'),
),
],
),
);
}
}