某些时候在显示行或者列时,由于宽度或者高度超过了屏幕,多余的部分无法显示,并且还会报出错误.
使用Wrap来替代Row或者Column,就可以自适应的进行新增行或者列来进行显示.还可以设置对齐方式alignment,runAlignment;间距spacing,runspacing等.
import 'package:flutter/material.dart';
class GoogleWarp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.orange,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.blueGrey,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.red,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.green,
height: 50.0,
width: 100.0,
),
],
),
SizedBox(
height: 10.0,
),
Divider(height: 1.0, color: Colors.red,),
SizedBox(
height: 10.0,
),
Wrap(
alignment: WrapAlignment.center,
spacing: 10.0,
runSpacing: 20.0,
runAlignment: WrapAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.orange,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.blueGrey,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.red,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.green,
height: 50.0,
width: 100.0,
),
],
),
SizedBox(
height: 10.0,
),
Divider(height: 1.0, color: Colors.red,),
SizedBox(
height: 10.0,
),
Wrap(
alignment: WrapAlignment.spaceAround,
spacing: 10.0,
direction: Axis.vertical,
runSpacing: 20.0,
runAlignment: WrapAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.orange,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.blueGrey,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.red,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.green,
height: 50.0,
width: 100.0,
),
],
),
SizedBox(
height: 10.0,
),
Divider(height: 1.0, color: Colors.red,),
SizedBox(
height: 10.0,
),
Wrap(
spacing: 10.0,
runSpacing: 20.0,
textDirection: TextDirection.rtl,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.orange,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.blueGrey,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.red,
height: 50.0,
width: 100.0,
),
Container(
color: Colors.green,
height: 50.0,
width: 100.0,
),
],
)
],
);
}
}
基本属性
- alignment 主轴对齐
- crossAixsAligment 横轴对齐
- direction 子控件排序方向,垂直或者水平
- runAligment 横轴显示方向
- runSpacing 垂直间距
- spacing 横向间距
- textDirection 横向顺序,从左到右,从右到左
- vericalDirection 垂直顺序
