如何在 GridView 上正确实现复选框

Question

我有用于选择和取消选择照片的复选框。每次点击都有一个可见的加载屏幕。

_mediaList有照片资产。mediaModel有必要的方法来分别添加和删除选定和取消选定照片的路径。

 Widget build(BuildContext context) {
    super.build(context);
    return GridView.builder(
      itemCount: _mediaList.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, mainAxisSpacing: 4.0, crossAxisSpacing: 4.0),
      itemBuilder: (BuildContext context, int index) {
        final saved = mediaModel.getMedia().contains(
            _mediaList[index].relativePath + '/' + _mediaList[index].title);
        return FutureBuilder(
            future: _mediaList[index].thumbDataWithSize(200, 200),
            builder: (BuildContext context, snapshot) => snapshot.hasData
                ? GridTile(
                    header: saved
                        ? Icon(Icons.check_circle, color: Colors.white,)
                        : Icon(Icons.check_circle_outline, color: Colors.white,),
                    child: GestureDetector(
                        child: Image.memory(
                          snapshot.data,
                          fit: BoxFit.cover,
                        ),
                        onTap: () => setState(() => saved
                            ? mediaModel.removeMedia(
                                _mediaList[index].relativePath +
                                    '/' +
                                    _mediaList[index].title)
                            : mediaModel.addMedia(
                                _mediaList[index].relativePath +
                                    '/' +
                                    _mediaList[index].title))),
                  )
                : Container());
      },
    );
  }

编辑：经过一些分析，我发现使用Provider加载图像可能是正确的方法。

你能帮我把这段代码转换成 吗Provider？

提前致谢！！！

Answer 1

截屏：

完整代码：

class FooPage extends State<SoPage> {
  static const int _count = 10;
  final List<bool> _checks = List.generate(_count, (_) => false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        itemCount: _count,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (_, i) {
          return Stack(
            children: [
              Container(color: Colors.red[(i * 100) % 900]),
              Align(
                alignment: Alignment.topCenter,
                child: Checkbox(
                  value: _checks[i],
                  onChanged: (newValue) => setState(() => _checks[i] = newValue),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}