如何在 Flutter 中列出两列而不是一列的视图项目？答案

【问题标题】：how to List View items in two columns instead of one column in Flutter?如何在 Flutter 中列出两列而不是一列的视图项目？
【发布时间】：2021-05-30 09:25:21
【问题描述】：

我当前的实现是使用 Future Builder 小部件从数据库中检索项目，然后将其显示在列表视图中，我想要实现的是如何在两列而不是一列中显示项目？这是我在垂直单列中预览项目的代码：

Widget build(BuildContext context) {
    return FutureBuilder<List<Product>>(
      future: fetchProducts(),
      builder: (context, snapshot) {
        if (!snapshot.hasData)
          return Center(child: CircularProgressIndicator());
        else {
          print (snapshot.data.length) ;
          return Container(
            child: Scrollbar(
              isAlwaysShown: true,
              controller: _scroll,
              child: ListView.builder(
                controller: _scroll,
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index) {
                  return WidgetProduct(snapshot.data[index]);
                },
              ),
            ),
          );
        }
      },
    );
  }

【问题讨论】：

然后检查GridView.builder
@pskink 非常感谢
当然，欢迎您

标签： flutter dart flutter-layout

【解决方案1】：

@pskink 是对的，你可以使用 GridView.builder()

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.separated(
      separatorBuilder: (context, int) {
        return Divider(color: Colors.black,);
      },
     // shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return GridView.count(
          shrinkWrap: true,
          crossAxisCount: 3,
          childAspectRatio: 2.0,
          children: List.generate(6, (index) {
            return Center(
              child: RaisedButton(
                onPressed: (){},
                color: Colors.greenAccent,
                child: Text(
                  'item no : $index',
                ),
              ),
            );
          }),
        );
      },
      itemCount: 4,
    ));
  }

【讨论】：