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

示例图片：