美文网首页
Flutter布局-流式布局(Wrap/Flow)

Flutter布局-流式布局(Wrap/Flow)

作者: xmb | 来源:发表于2019-06-14 14:38 被阅读0次

    学习参考文章:
    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,
                ),
              ),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter布局-流式布局(Wrap/Flow)

          本文链接:https://www.haomeiwen.com/subject/hlxpfctx.html