如何在Flutter中渲染特定行数的Wrap？

Question

我正在尝试为 flutter 中的列表创建一个过滤器。我希望在列表上方显示一些过滤器。像这样的东西-

_{（来源：imge.to）}

我无法弄清楚如何仅渲染这些过滤器的 2 行，然后使用“+X”渲染芯片，让用户知道还应用了多少个过滤器。所以我被这样的事情困住了 -

_{（来源：imge.to）}

我如何生成这个“过滤器扫视”小部件的代码 -

class FilterGlance extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(10.0, 10.0, 5, 0),
          child: Text("FILTER",
              style: TextStyle(
                  color: Colors.white30, fontWeight: FontWeight.bold)),
        ),
        Container(
          child: Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            verticalDirection: VerticalDirection.down,
            runSpacing: 3.0,
            spacing: 3.0,
            children: <Widget>[
              ChipDesign("Lifetime"),
              ChipDesign("Student"),
              ChipDesign("Salaried"),
              ChipDesign("Corporate"),
              ChipDesign("Open"),
              ChipDesign("My Referral Code Users"),
              ChipDesign("+10"),
            ],
          ),
        ),
      ],
    );
  }
}

class ChipDesign extends StatelessWidget{
  final String _label;

  ChipDesign(this._label);

  @override 
  Widget build(BuildContext context){
    return Container(
      child: Chip(
        label: Text(
          _label,
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: ColorDarkFG,
        padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 0.0),
      ),
      margin: EdgeInsets.only(left: 10, right: 3, top: 0, bottom: 0),
    );
  }
}

我只需要 2 行过滤器，然后是一个带有“+X”的芯片，让用户知道还有多少个过滤器。当我添加更多芯片/过滤器时，当前代码将继续添加行。

Answer 1

目前没有这样的选择，您应该选择这个。

我已将

BoxConstraints

和

SingleChildScrollView

添加到您的

Wrap

。

        Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
                Padding(
                padding: EdgeInsets.fromLTRB(10.0, 10.0, 5, 0),
                child: Text("FILTER",
                    style: TextStyle(
                        color: Colors.white30, fontWeight: FontWeight.bold)),
                ),

                Container(
                constraints: BoxConstraints(minHeight: 100, maxHeight: 100),
                child: SingleChildScrollView(
                    child: Wrap(
                    crossAxisAlignment: WrapCrossAlignment.center,
                    verticalDirection: VerticalDirection.down,
                    runSpacing: 3.0,
                    spacing: 3.0,
                    children: <Widget>[
                        ChipDesign("Lifetime"),
                        ChipDesign("Student"),
                        ChipDesign("Salaried"),
                        ChipDesign("Corporate"),
                        ChipDesign("Open1"),
                        ChipDesign("Open2"),
                        ChipDesign("Open2"),
                        ChipDesign("Open4"),
                        ChipDesign("Open5"),
                        ChipDesign("Open6"),
                        ChipDesign("Open7"),
                        ChipDesign("Open9"),
                        ChipDesign("Open10"),
                        ChipDesign("Open11"),
                        ChipDesign("Open12"),
                        ChipDesign("My Referral Code Users"),
                        ChipDesign("+10"),
                    ],
                    ),
                ),
                ),
            ],
            );

Answer 2

这解决了我的问题

https://pub.dev/packages/extended_wrap

ExtendsWrap(
  maxLines: 2,
  children: [....]
)

Answer 3

看到

https://pub.dev/packages/expanded_wrap

这是比较符合wrap的解决方案