Flutter页面布局之Wrap组件

Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，但Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上扩展显示。

常用属性：

属性	说明
direction	横向纵向的排序方式 默认横向
spacing	横轴的间距
runSpacing	纵轴的间距
verticalDirection	用来设置child子元素的排放顺序，默认是dow
runAlignment	纵轴对齐方式
alignment	横轴对齐方式

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Wrap"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.blue,
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        verticalDirection: VerticalDirection.up,
        alignment: WrapAlignment.center,
        runAlignment: WrapAlignment.end,
        children: <Widget>[
          MyButton("鬼堡"),
          MyButton("天龙八部"),
          MyButton("超级兵王"),
          MyButton("金刚不死诀"),
          MyButton("西游记精选孙悟空"),
          MyButton("爱你是最好的时光"),
          MyButton("爱情的开关"),
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;

  const MyButton(this.text, {Key key});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        print('你点击了:$text');
      },
      textColor: Theme.of(context).accentColor,
      child: Text(this.text),
    );
  }
}