某些時候在顯示行或者列時,由于寬度或者高度超過了屏幕,多余的部分無法顯示,并且還會報出錯誤.
使用Wrap來替代Row或者Column,就可以自適應(yīng)的進行新增行或者列來進行顯示.還可以設(shè)置對齊方式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