在gridview中实现多行flutter答案

【问题标题】：Achieve multiple rows in gridview flutter在gridview中实现多行flutter
【发布时间】：2021-12-06 10:25:24
【问题描述】：

我正在尝试获取下面 gif 中的布局，但无法获得任何资源来继续。有两行多列，可滚动。我怎样才能实现这样的布局？

【问题讨论】：

【解决方案1】：

正如你的问题所说，你遵循这种方法，它不包含multiple columns，项目的宽度不同。这个 sn-p 可以正常工作。

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                children: [
                  Row(
                    key: const ValueKey("row1"),
                    children: _items(),
                  ),
                  Row(
                    key: const ValueKey("row2"),
                    children: _items(),
                  ),
                ],
              ),
            ),

【讨论】：

如果数据来自同一个数组，如何处理？
您可以将列表拆分为第一部分items.sublist(0, items.length ~/ 2) 和第二行items.sublist(( items.length ~/ 2), items.length)
请帮我解决这个问题stackoverflow.com/questions/70302909/…

【解决方案2】：

您可以通过SingleChildScrolView 小部件和axis : horizontal 实现此目的，并且该列表项将使用FilterChip 小部件创建。

像这样：

 SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child:  Wrap(
                                  spacing: 10.0,
                                  runSpacing: 5.0,
                                  children: [...generateTags()],
                                ),
                              ),






 generateTags(){
    return _keywords.map((e) => FilterChip(label : e)).toList();
  }



var _keywords =["hello" , "hi" ,"words 1" , "word 2"];

【讨论】：

我可以实现您的建议，但我的问题不同。我想在 2 行中显示多列的列表项值，如提到的 gif 中所示