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

Question

我正试图为扑朔迷离的列表做一个过滤器。我希望在列表上方显示一些过滤器。像这样-

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

有关如何生成“过滤器一览”小部件的代码-

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"),
                    ],
                    ),
                ),
                ),
            ],
            );