database - 在 Flutter 中从数据库填充 GridView

Question

我想从数据库中的表中检索数据并将其显示到 Flutter 中的 GridView 中。 目前我将它显示在一个简单的列表中，但我无法在 GridView 中显示它。 这是我的代码

return Scaffold(
  appBar: AppBar(
    title: Text("Diario di bordo"),
  ),
  /*body: Center(
    child: Text('Nessun diario presente'),
  ),*/
    body: FutureBuilder<List>(
      future: dbHelper.queryAllRows(),
      initialData: List(),
      builder: (context, snapshot) {
        return snapshot.hasData
            ? ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (_, int position) {
            final item = snapshot.data[position];
            //get your item data here ...
            return Card(
              color: RandomColor().randomColor(),
              child: ListTile(
                title: Text(
                    snapshot.data[position].row[1]),
              ),
            );
          },
        )
            : Center(
          child: CircularProgressIndicator(),
        );
      },
    ),
...

我搜索了文档，我看到了这段代码

GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
  child: Text(
    'Item $index',
    style: Theme.of(context).textTheme.headline,
  ),
);
}),
);

我不明白如何从 db 中的 mytable 中检索数据并将其显示在 GridView 中。

Answer 1

您可以使用GridView.Builder

return snapshot.hasData? 
       GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2),
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
            final item = snapshot.data[index];
            //get your item data here ...
            return Card(
              color: RandomColor().randomColor(),
              child: ListTile(
                 title: Text(
                    snapshot.data[index].row[1]),
              ),
            );
          },
        )
      : Center(
          child: CircularProgressIndicator(),
        );