当我包装筹码列表时，如何将区域（包装区域）限制为最多2行？

Question

我有一个要显示在芯片中并在Wrap小部件中组织的列表。 但是，无论list.length是什么（或列表中单个字符串的长度），我都只希望构建Wrap区域的两行。

这是我的代码：

class TagsView extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    List<Widget> list = List<Widget>.from(
        {"bla1", "bla2", "bla3", "bla4", "bla5", "bla6", "bla7","bla8", "bla9", "bla10", "bla11", "bla12", "bla13", "bla14"}
            .map((tag) => Chip(
                  label: Text(
                    tag,
                  ),
                ))
            .toList());

    return Wrap(
      verticalDirection: VerticalDirection.down,
      spacing: 5.0,
      runSpacing: 10.0,
      children: list,
    );
  }
}

这是不需要的代码的示例（第一个屏幕截图是上面代码的结果）

好的结果将如下所示：

Answer 1

您可以将其放入容器中并限制高度。

它将始终显示前两行。

    return Container(
      height: 100,
      child: Wrap(
        verticalDirection: VerticalDirection.down,
        spacing: 5.0,
        runSpacing: 10.0,
        children: list,
      ),
    );

Answer 2

可能为时已晚，但是您可以使用take方法。

List<Widget> list = List<Widget>.from({
     "bla1",
     "bla2",
     "bla3",
     "bla4",
     "bla5",
     "bla6",
     "bla7",
     "bla8",
     "bla9",
     "bla10",
     "bla11",
     "bla12",
     "bla13",
     "bla14"
   }
       .take(2)
       .map((tag) => Chip(
             label: Text(
               tag,
             ),
           ))
       .toList());