Flutter 基础布局Widgets之Wrap详解

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,
      )),
)),
 ],
      ),
    );
  }
}

示例图片：