Wrap Widget

某些时候在显示行或者列时,由于宽度或者高度超过了屏幕,多余的部分无法显示,并且还会报出错误.
使用Wrap来替代Row或者Column,就可以自适应的进行新增行或者列来进行显示.还可以设置对齐方式alignment,runAlignment;间距spacing,runspacing等.

import 'package:flutter/material.dart';

class GoogleWarp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.blueGrey,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.red,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.green,
              height: 50.0,
              width: 100.0,
            ),
          ],
        ),
        SizedBox(
          height: 10.0,
        ),
        Divider(height: 1.0, color: Colors.red,),
        SizedBox(
          height: 10.0,
        ),
        Wrap(
          alignment: WrapAlignment.center,
          spacing: 10.0,
          runSpacing: 20.0,
          runAlignment: WrapAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.blueGrey,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.red,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.green,
              height: 50.0,
              width: 100.0,
            ),
          ],
        ),
        SizedBox(
          height: 10.0,
        ),
        Divider(height: 1.0, color: Colors.red,),
        SizedBox(
          height: 10.0,
        ),
        Wrap(
          alignment: WrapAlignment.spaceAround,
          spacing: 10.0,
          direction: Axis.vertical,
          runSpacing: 20.0,
          runAlignment: WrapAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.blueGrey,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.red,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.green,
              height: 50.0,
              width: 100.0,
            ),
          ],
        ),
        SizedBox(
          height: 10.0,
        ),
        Divider(height: 1.0, color: Colors.red,),
        SizedBox(
          height: 10.0,
        ),
        Wrap(
          spacing: 10.0,
          runSpacing: 20.0,
          textDirection: TextDirection.rtl,
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.blueGrey,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.red,
              height: 50.0,
              width: 100.0,
            ),
            Container(
              color: Colors.green,
              height: 50.0,
              width: 100.0,
            ),
          ],
        )
      ],
    );
  }
}

基本属性

• alignment 主轴对齐
• crossAixsAligment 横轴对齐
• direction 子控件排序方向,垂直或者水平
• runAligment 横轴显示方向
• runSpacing 垂直间距
• spacing 横向间距
• textDirection 横向顺序,从左到右,从右到左
• vericalDirection 垂直顺序

我的博客
代码github