玖叶教程网

概述

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<Widget> children = const <Widget>[],
 })

• 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: <Widget>[
 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,
 )),
 )),
 ],
 ),
 );
 }
}

示例图片：