Flutter笔记（11）flutter中wrap按宽高自动换行布局

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

更多文章资源，欢迎关注：开发者阵线联盟