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

【问题标题】：how to get too many buttons on all over the screen side by side and below in flutter?如何在整个屏幕上并排和下方抖动太多按钮？
【发布时间】：2021-05-17 14:13:31
【问题描述】：

我想在一个屏幕上有太多选项类型的高架按钮，需要可滚动。我试过行小部件而不是列并给出错误，我不知道如何根据屏幕大小将它们并排和下方放置。请指导我哪里出错了？谢谢。试过的代码如下：-

  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)
                                  ),
                                ),
                              )

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

我得到了这个：-

我想要这个：-

【问题讨论】：

标签： flutter dart flutter-layout flutter-animation

【解决方案1】：

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

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

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

【讨论】：

是的，我已经尝试过了，它给了我这个错误：-RenderBox 没有布置：RenderFlex#89249 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src /rendering/box.dart'：断言失败：第 1940 行第 12 行：'hasSize'
因为你的列表没有高度。您应该使用具有特定高度的 SizedBox() 或 Expanded() 包装您的 Listview.builder。这可能会帮助你stackoverflow.com/questions/52801201/…
您也可以尝试为您的最父容器小部件提供高度属性吗？
我已经尝试过您发送的链接代码，现在它在列表视图中水平显示所有按钮。我必须将它们向右滑动。它没有出现在一个屏幕中
我应该尝试网格视图构建器吗？

【解决方案2】：

为了达到这个要求，你应该使用芯片[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}"));
  }

我想这会奏效。

【讨论】：