Flutter -如何对齐过滤器芯片列表?

jm81lzqq  于 2023-03-24  发布在  Flutter
关注(0)|答案(1)|浏览(112)

我做了一个过滤器屏幕,使用过滤芯片,我试图 Package 这些芯片在多行。我尝试了Wrap()小部件。但我无法实现这一点。
有没有办法做到这一点?
这就是我想要的

但我得到

代码:

final items = [
    "All",
    "0-2 Years",
    "2-4 Years",
    "5-7 Years",
    "8-13 Years",
    "14+ Years"
  ];
  List<String> age = [];
Padding(
                  padding: const EdgeInsets.only(top: 15, left: 20),
                  child:  Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Wrap(
                            spacing: 8,
                            runSpacing: 8,
                            children: items3
                                .map(
                                  (e) => FilterChip(
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      backgroundColor: Colors.white,
                                      selectedColor: const Color(0xff6fedf6),
                                      label: Container(
                                        height: 46,
                                        width: 98,
                                        alignment: Alignment.center,
                                        child: Text(e),
                                      ),
                                      labelStyle: GoogleFonts.poppins(
                                        textStyle: const TextStyle(
                                          color: Colors.black,
                                          fontSize: 14,
                                          fontWeight: FontWeight.w500,
                                          letterSpacing: 0.5,
                                        ),
                                      ),
                                      selected: age.contains(e),
                                      onSelected: (bool value) {
                                        if (age.contains(e)) {
                                          age.remove(e);
                                        } else {
                                          age.add(e);
                                        }
                                        setState(() {});
                                      }),
                                )
                                .toList(),
                          ),
                        ]),
                ),
qf9go6mv

qf9go6mv1#

你的SingleChildScrollView在水平方向,因此它的子元素得到无限的约束。

Padding(
  padding: const EdgeInsets.only(top: 15, left: 20),
  child: SingleChildScrollView(
    // scrollDirection: Axis.horizontal,
    child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
      Expanded(
        child: Wrap(

相关问题