如何制作ListView.Builder'；是否在屏幕宽度内显示s项？

是否可以使用一个ListView.Builder将其所有项目填充到屏幕宽度内的不同行

目前，我的临时方法有2个ListView.Builders。这把我的名单削减了一半。我希望ListView.Builder在屏幕宽度限制内显示列表中的所有内容。如果没有足够的空间，则将兴趣填充到另一行

列表的名称是兴趣，它是一个字符串列表

Padding(
                  padding: const EdgeInsets.fromLTRB(6, 6, 0, 0),
                  child: Container(
                    height: MediaQuery.of(context).size.height * 0.039,
                    child: ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        padding: const EdgeInsets.all(1),
                        itemCount: 5,
                        itemBuilder: (context, index) {
                          return Container(
                              margin: EdgeInsets.only(right: 9),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(12),
                                  border:
                                      Border.all(color: Colors.yellow[100])),
                              padding: EdgeInsets.symmetric(
                                  horizontal:
                                      MediaQuery.of(context).size.width * 0.030,
                                  vertical: MediaQuery.of(context).size.height *
                                      0.0045),
                              child: Text(
                                interests[index],
                                style: TextStyle(fontSize: 12),
                              ));
                        }),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(6, 3, 0, 0),
                  child: Container(
                    height: MediaQuery.of(context).size.height * 0.039,
                    child: ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        padding: const EdgeInsets.all(1),
                        itemCount: 4,
                        itemBuilder: (context, index) {
                          return Container(
                              margin: EdgeInsets.only(right: 9),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(12),
                                  border:
                                      Border.all(color: Colors.yellow[100])),
                              padding: EdgeInsets.symmetric(
                                  horizontal:
                                      MediaQuery.of(context).size.width * 0.030,
                                  vertical: MediaQuery.of(context).size.height *
                                      0.0045),
                              child: Text(
                                interests[5 + index],
                                style: TextStyle(fontSize: 12),
                              ));
                        }),
                  ),
                ),

：2可能从屏幕流出的列表视图

我想要的结果是：

---

如果最后一个气泡溢出屏幕，它会自动形成一个新行。

flatter的

Wrap

小部件提供了这一精确的功能

默认情况下，

Wrap

水平放置它的子对象

并在其子对象溢出给定的约束时自动包装它们

这样用,

// Suppose you have data like this.
List<String> interests = ['Bollywood','Biryani','Running','Punjabi','Dancing'];

// Use them inside build function like this
Container(
  height: MediaQuery.of(context).size.height * 0.039,
  child: Wrap(
    children: interests.map((interest) => Container(
      margin: EdgeInsets.only(right: 9),
      decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      border: Border.all(color: Colors.yellow[100])),
      padding: EdgeInsets.symmetric(
        horizontal: MediaQuery.of(context).size.width * 0.030,
        vertical: MediaQuery.of(context).size.height * 0.0045
      ),
      child: Text(
        interest,
        style: TextStyle(fontSize: 12),
      ),
    )).toList()
  ),
),

//假设您有这样的数据。
列出兴趣=[‘宝莱坞’、‘比里亚尼’、‘跑步’、‘旁遮普’、‘跳舞’]；
//像这样在构建函数中使用它们
容器(
高度：MediaQuery.of（context）.size.height*0.039，
孩子：包裹(
子对象：兴趣.map（（兴趣）=>容器(
页边距：仅限边集（右：9），
装饰：盒子装饰(
边界半径：边界半径。圆形（12），
边框：border.all（颜色：Colors.yellow[100]），
填充：EdgeInsets.symmetric(
水平：MediaQuery.of（context）.size.width*0.030，
垂直：MediaQuery.of（上下文）。size.height*0.0045
),
子：文本(
利息，
样式：TextStyle（字体大小：12），
),
))托利斯先生（）
),
),

结果是这样的

@vegetasayan。这个答案能解决您的用例吗？thans Nisanth。这是有道理的。但是wrap有子对象，而我的listview builder是一种容器（单个子对象根据列表中的项目数重复自己），我如何继续进行，以使wrap只接受一个子对象（listview builder）？@VegetaSaiyan我已经更新了代码。您可以在
兴趣
数组中使用
映射
，然后将您的独生子女
容器
放入
映射
。谢谢！你的代码很好！对于容器的高度，如何使其灵活？Bcos可能有3行而不是2行。我是否使用灵活的或扩展的包装容器？很高兴能提供帮助：）理想情况下，您不必对
容器
施加任何约束，
包装
小部件自动转到下一行，
容器
将自动占据包装小部件的高度。