Flutter中wrap按宽高自动换行布局

Wrap概述

Warp使用了Flex中的一些概念，某种意义上说跟Row、Column更加相似，单行的Wrap和Row表现几乎是一样的，单列的Wrap和Column表现几乎是一致的，但是Row和Column都是单行单列的，Wrap就突破了这个极限，当主轴上的空间不足的时候，则自动向次轴上去扩展显示。对于一些需要按宽度或者高度让child自动换行的布局的场景，可以使用Wrap。

Wrap属性

属性

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('武松打虎'),
          ),
        ],
      ),
    );
  }
}