17-flutter-流式布局

Wrap 流式布局 当子元素盒子的宽度超出手机宽度时，会自动移到下一行
有几个参数

1. spacing 水平方向 盒子之间的距离
2. runSpacing 竖直方向 盒子之间的距离
3. alignment 对齐方式 和css的flex的几个主轴对齐方式有一些相似

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter12'),
        ),
        body: Wrap(
          spacing: 20,
          runSpacing: 30,
          alignment: WrapAlignment.end,
          children: [
            Container(
              width: 150,
              height: 150,
              color: Colors.blue,
            ),
            Container(
              width: 150,
              height: 150,
              color: Colors.red,
            ),
            Container(
              width: 150,
              height: 150,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 150,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}