如何在整个屏幕上并排和下方抖动过多按钮？

Question

我想要在一个屏幕中有太多选项类型的提升按钮，这些按钮需要可滚动。我已经尝试过 Row 小部件而不是 column 并给出错误，我不知道如何根据屏幕大小并排放置它们。请指导我哪里出错了？谢谢。尝试过的代码如下：-

  Container(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 70, vertical: 20),
                      child: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: hobbieslist.length,
                        itemBuilder: (BuildContext context, index) {
                          return  Padding(
                              padding: const EdgeInsets.all(4.0),
                              child: ElevatedButton(
                                child: Text("${hobbieslist[index]["name"]}"
                                  ,style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500,
                                    // color: man ? mRed : Colors.blueGrey
                                  ),
                                ),
                                onPressed: (){
                                  setState(() {
                                    if (selected.length < 3) {
                                      hobbieslist[index]["ontap"] =
                                      !hobbieslist[index]["ontap"];
                                      if (hobbieslist[index]["ontap"]) {
                                        selected.add(hobbieslist[index]["name"]);
                                        print(hobbieslist[index]["name"]);
                                        print(selected);
                                      } else {
                                        selected.remove(hobbieslist[index]["name"]);
                                        print(selected);
                                      }
                                    } else {
                                      if (hobbieslist[index]["ontap"]) {
                                        hobbieslist[index]["ontap"] =
                                        !hobbieslist[index]["ontap"];
                                        selected.remove(hobbieslist[index]["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:  hobbieslist[index]["ontap"] ? mRed : Colors.blueGrey,
                                  onPrimary: white,
                                  elevation: 5,
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20.7)
                                  ),
                                ),
                              )

                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),

我明白了：-

我想要这个：-

Answer 1

不要使用 Row() 代替 Column()，使用 Row() 作为 Column 的子项。

child: Column(
  children: [
   Row(
    children: [
      button1(),
      button2(),
      button3(),
    ]
   ),
   Row(
    children: [
      button4(),
      button5(),
      button6(),
    ]
   ),
 ]
)

您可以像这样将行放在一列中。

Answer 2

为了达到这个要求，你应该使用 Chips[https://api.flutter.dev/flutter/material/FilterChip-class.html]

var hobbies = ["a", "b","c","d"];

Scaffold(body:Wrap(children:[]) )
 generate_tags() {
    return hobbies.map((hobby) => buildChip(hobby)).toList();
  }

  buildChip(name) {
    return FilterChip(
        selected: selected_tags.contains(name),
        selectedColor: Colors.blue.shade800,
        disabledColor: Colors.blue.shade400,
        labelStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        label: Text("#${name}"));
  }

我想这会奏效。