Flutter 按宽高自动换行布局

Flutter 按宽高自动换行布局(Wrap)，Wrap使用了Flex中的一些概念，某种意义上说与Row、Column更加相似。单行的Wrap与Row表现几乎一致，单列的Wrap则与Column表现几乎一致。但Row与Column都是单行单列的，Wrap却突破了这个限制，主轴上空间不足时，则向次轴上扩展显示，适用于需要按宽度或高度让child自动换行布局的场景。

Wrap组件属性见表:

接下来编写一个例子，在容器里放一些头像。使用Wrap组件包装以后，头像可以按从左到右和从上到下的顺序排列。Wrap布局的完整示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Wrap按宽高自动换行布局示例',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap按宽高自动换行布局示例'),
      ),
      // 自动换行布局组件
      body: Wrap(
        spacing: 8.0, //Chip之间的间距大小
        runSpacing: 4.0, //行之间的间距大小
        children: <Widget>[
          Chip(
              // 添加圆形头像
              avatar: CircleAvatar(
                  backgroundColor: Colors.lightGreen.shade800, child: Text('西门', style: TextStyle(fontSize: 10.0),)),
              label: Text('西门吹雪'),
          ),
          Chip(
              avatar: CircleAvatar(
                    backgroundColor: Colors.lightBlue.shade700, child: Text('司空', style: TextStyle(fontSize: 10.0),)),
              label: Text('司空摘星'),
          ),
              Chip(
                avatar: CircleAvatar(
                      backgroundColor: Colors.orange.shade800, child: Text('婉清',style:TextStyle(fontSize: 10.0),)),
                label: Text('木婉清'),
              ),
              Chip(
                avatar: CircleAvatar(
                        backgroundColor:  Colors.blue.shade900,  child:  Text('一郎',style: TextStyle(fontSize: 10.0),)),
                label: Text('萧十一郎'),
              ),
            ],
          ),
        );
      }
    }

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 控制是否显示组件
• Flutter 基准线布局
• Flutter 矩阵转换
• Flutter Table