dart - GridView.builder 创建无限滚动的页面

Question

尝试使用 API 来构建网格。一切都很好，但是在最后一行图 block 之后，页面变为空白，只是继续滚动和滚动......网格是这样构建的:

body: new GridView.builder(
      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),
      itemBuilder: (BuildContext context, int index) {
        return new Card(
          child: new GridTile(
            footer: new Text(data[index]['name']),
              child: new Text(data[index]['image']), //just for testing, will fill with image later
          ),
        );
      },
  )

当我不断向下滚动空白页时，最后一个数字(包括:24)会以 2 的倍数变大(24、26、28 等)。

I/flutter (11001): Another exception was thrown: RangeError (index): Invalid value: Not in range 0..23, inclusive: 24

有人在 GridView.builder 中看到过这种行为吗？

Answer 1

您可以将项目计数传递给构建器。

例子:

body: GridView.builder(
  itemCount: data.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),
  itemBuilder: (BuildContext context, int index) {
    return new Card(
      child: new GridTile(
        footer: new Text(data[index]['name']),
        child: new Text(data[index]
            ['image']), //just for testing, will fill with image later
      ),
    );
  },
),

其中 最终方向 = MediaQuery.of(context).orientation;

希望有所帮助!