在gridview flutter中实现多行

Question

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

Answer 1

您可以通过 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"];

Answer 2

正如您的问题所说，您采用了这种方法，并且它不包含 multiple columns，项目具有不同的宽度。此代码段可以正常工作。

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

在gridview flutter中实现多行

Achieve multiple rows in gridview flutter

dart

flutter

flutter-layout