Flutter布局-流式布局（Wrap/Flow）

学习参考文章：
Flutter 流式布局、自动换行（Wrap、Flow）

direction: Axis.horizontal, // 排列方向，默认水平方向排列
alignment: WrapAlignment.start, // 子控件在主轴上的对齐方式
spacing: 5.0, // 主轴上子控件中间的间距
runAlignment: WrapAlignment.start, // 子控件在交叉轴上的对齐方式
runSpacing: 10.0, // 交叉轴上子控件之间的间距
crossAxisAlignment: WrapCrossAlignment.start, // 交叉轴上子控件的对齐方式
textDirection: TextDirection.ltr, // 水平方向上子控件的起始位置
verticalDirection: VerticalDirection.down, // 垂直方向上子控件的起始位置

效果图：

1560495777312.jpg

部分代码：

new Container(
                        margin: new EdgeInsets.only(
                            left: 10.0, right: 10.0, top: 10.0),
                        child: new Wrap(
                          direction: Axis.horizontal, // 排列方向，默认水平方向排列
                          alignment: WrapAlignment.start, // 子控件在主轴上的对齐方式
                          spacing: 5.0, // 主轴上子控件中间的间距
                          runAlignment: WrapAlignment.start, // 子控件在交叉轴上的对齐方式
                          runSpacing: 10.0, // 交叉轴上子控件之间的间距
                          crossAxisAlignment: WrapCrossAlignment.start, // 交叉轴上子控件的对齐方式
                          textDirection: TextDirection.ltr, // 水平方向上子控件的起始位置
                          verticalDirection: VerticalDirection.down, // 垂直方向上子控件的起始位置
                          children: <Widget>[
                            new ScreenButton(
                              title: "不限",
                              isSelected: true,
                            ),
                            new ScreenButton(
                              title: "1月以下",
                              isSelected: false,
                              itemWidth: 90.0,
                            ),
                            new ScreenButton(
                              title: "1月",
                              isSelected: false,
                            ),
                            new ScreenButton(
                              title: "2月",
                              isSelected: false,
                            ),
                            new ScreenButton(
                              title: "3月",
                              isSelected: false,
                            ),
                            new ScreenButton(
                              title: "6月",
                              isSelected: false,
                            ),
                            new ScreenButton(
                              title: "12月",
                              isSelected: false,
                            ),
                          ],
                        ),
                      ),

import 'package:flutter/cupertino.dart';
import 'package:moka_flutter/config/config.dart';

class ScreenButton extends StatefulWidget {
  ScreenButton({Key key, this.title, this.isSelected, this.itemWidth = 70.0}): super(key: key);

  final String title;
  final bool isSelected;
  final double itemWidth;

  @override
  _ScreenButtonState createState() => new _ScreenButtonState();
}

class _ScreenButtonState extends State<ScreenButton> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: MkColor.white,
//      margin: new EdgeInsets.only(right: 5.0),
      child: new GestureDetector(
        onTap: null,
        child: new Container(
          alignment: Alignment.center,
          padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 3.0),
          decoration: new BoxDecoration(
            border: new Border.all(color: widget.isSelected ? MkColor.textBlue : MkColor.textGray),
            borderRadius: new BorderRadius.circular(16.0),
          ),
          height: 32.0,
          width: widget.itemWidth,
          child: new Text(
            widget.title,
            style: new TextStyle(
              fontSize: 14.0,
              color: widget.isSelected ? MkColor.textBlue : MkColor.textGray,
            ),
          ),
        ),
      ),
    );
  }
}