多行按钮 - Flutter

Question

我想以“预订应用程序”过滤器中表示的方式列出文本按钮

我试过 Row、ListView 和 GridView，我想要多行中的一行。

代码

 SingleChildScrollView(
                padding: FxSpacing.x(24),
                scrollDirection: Axis.horizontal,
                child: Row(
                    children:
                        ['Any', '1', '2', '3', '4', '5'].map((element) {
                  return InkWell(
                      onTap: () {
                        setState(() {
                          if (estateHomeController.selectedBathRooms.contains(element)) {
                            estateHomeController.selectedBathRooms.remove(element);
                          } else {
                            estateHomeController.selectedBathRooms.add(element);
                          }
                        });
                      },
                      child: SingleBath(
                        bath: element,
                        selected: estateHomeController.selectedBathRooms.contains(element),
                      ));
                }).toList()),
              ), 

Answer 1

尝试 Wrap 小部件

     Wrap(
        children: ['Any', '1', '2', '3', '4', '5']
            .map(
              (e) => InkWell(
                      onTap: () {
                        setState(() {
                          if (estateHomeController.selectedBathRooms.contains(element)) {
                            estateHomeController.selectedBathRooms.remove(element);
                          } else {
                            estateHomeController.selectedBathRooms.add(element);
                          }
                        });
                      },
                      child: SingleBath(
                        bath: element,
                        selected: estateHomeController.selectedBathRooms.contains(element),
                      )),
            )
            .toList(),
        spacing: 8,
        runSpacing: 8,
      ),

Answer 2

Material 芯片可能也适合您的用例，因为您正在考虑使用这些芯片作为过滤器来显示不同的结果