Flutter如何实现可滚动、自动并排换行的多个ElevatedButton布局

• 你当前使用的ListView.builder默认沿垂直方向排列子元素，每个子元素单独占据一行，所以呈现单列垂直排列的效果
• 直接替换为Row会报错的原因是：Row不会自动折行，子元素总宽度超出屏幕宽度时就会触发布局溢出错误

使用Flutter内置的Wrap流式布局组件替换ListView.builder，Wrap会自动根据父容器宽度排列子元素，超出宽度时自动换行，完全匹配你的需求。

Container(
  child: SingleChildScrollView(
    child: Column(
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 70, vertical: 20),
          // 替换ListView.builder为Wrap
          child: Wrap(
            // 可选：配置对齐方式
            alignment: WrapAlignment.start,
            // 同一行内按钮的水平间距
            spacing: 8,
            // 行与行之间的垂直间距
            runSpacing: 8,
            children: hobbieslist.map((item) {
              return Padding(
                padding: const EdgeInsets.all(4.0),
                child: ElevatedButton(
                  child: Text(
                    "${item["name"]}",
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w500,
                      // color: man ? mRed : Colors.blueGrey
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      if (selected.length < 3) {
                        item["ontap"] = !item["ontap"];
                        if (item["ontap"]) {
                          selected.add(item["name"]);
                          print(item["name"]);
                          print(selected);
                        } else {
                          selected.remove(item["name"]);
                          print(selected);
                        }
                      } else {
                        if (item["ontap"]) {
                          item["ontap"] = !item["ontap"];
                          selected.remove(item["name"]);
                        } else {
                          Fluttertoast.showToast(
                              msg: "Can only select 5",
                              toastLength: Toast.LENGTH_SHORT,
                              gravity: ToastGravity.BOTTOM,
                              timeInSecForIosWeb: 3,
                              backgroundColor: Colors.blueGrey,
                              textColor: Colors.white,
                              fontSize: 16.0);
                        }
                      }
                    });
                  },
                  style: ElevatedButton.styleFrom(
                    primary: item["ontap"] ? mRed : Colors.blueGrey,
                    onPrimary: white,
                    elevation: 5,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.7)),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ],
    ),
  ),
),

• 当前实现效果
  
• 期望实现效果
  

内容的提问来源于stack exchange，提问作者GAGAN SINGH