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

Question

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

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

列表名称为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如果最后一个气泡溢出屏幕，它会自动形成一个新行。

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

结果是这样

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

How To Make ListView.Builder's items appear within the screen width?

listview

list

flutter