如何使 ListView.Builder 的项目出现在屏幕宽度内？

Posted 2023-02-23

【中文标题】如何使 ListView.Builder 的项目出现在屏幕宽度内？

【英文标题】：How To Make ListView.Builder's items appear within the screen width?

【发布时间】：2021-08-06 02:14:07

【问题描述】：

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

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

列表的名字是interests，是一个字符串列表。

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

My current example: 2 个 Listviews 可能流出屏幕。

我想要的结果： Container bubbles filling up within screen's width 如果最后一个气泡溢出屏幕，它会自动形成一个新行。

【参考方案1】：

Flutter 的 Wrap 小部件提供了这个确切的功能。

默认情况下，Wrap 放置它的子代 horizontally，并在它们溢出给定约束时自动包装它的子代。

这样使用，

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

结果是这样的

【讨论】：

@VegetaSaiyan。这个答案能解决你的用例吗？

比尼桑特。这就说得通了。但是 wrap 有孩子，而我的 listview 构建器是一种容器（根据列表中的项目数重复自身的单个孩子），我该如何进行以便 wrap 只能带一个孩子（Listview builder )?

@VegetaSaiyan 我已经更新了我的代码。您可以在interests 数组上使用map，然后在map 中返回您的单个孩子Container。

感谢尼桑特！你的代码很好！对于容器的高度，如何使其灵活？ Bcos 可能有 3 行而不是 2 行。我将容器包装成柔性的还是展开的？

很高兴能帮上忙 :) 理想情况下，您不必对 Container 施加任何限制，Wrap 小部件会自动转到下一行，Container 将自动获取包装小部件的高度。