import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Wrap布局练习"),
        ),
        body: MyWrap(),
      ),
    );
  }
}

class MyWrap extends StatelessWidget {
  ///wrap流式布局,当一行放不下的时候他会自动换行
  ///
  @override
  Widget build(BuildContext context) {
    return Wrap(
      ///主轴对齐方式,默认水平 vertical为垂直对齐
      //direction: Axis.vertical,
      ///子widget对齐方式
      alignment: WrapAlignment.center,
      ///主轴说元素的间距
      spacing: 10,
      ///次轴的元素间距
      runSpacing: 20,

      children: <Widget>[
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季长度不一样"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季之第N季"),
        MyButton("第一季"),
        MyButton("第一季"),
        MyButton("第一季"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String tile;
  MyButton(this.tile, {Key key});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(tile),
      onPressed: () {},
    );
  }
}

效果图: