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

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

\u 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

加载图像可能是正确的方法

您能帮助我将此代码转换为

提供程序

---

提前感谢

屏幕截图：

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),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

---

完整代码：

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),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

class FooPage扩展状态{
静态常数int _计数=10；
最终列表_checks=List.generate（_count，（）=>false）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：GridView.builder(
itemCount:\u count，
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount（crossAxisCount:2），
itemBuilder:（u，i）{
返回堆栈(
儿童：[
容器（颜色：Colors.red[（i*100）%900]），
对齐(
对齐：alignment.topCenter，
子项：复选框(
值：_检查[i]，
一旦更改：（newValue）=>setState（（）=>_checks[i]=newValue），
),
),
],
);
},
),
);
}
}

此实现也会给出相同的结果。是因为FutureBuilder的缘故吗？我需要通过点击照片来更改复选框。@shanthosh你能发布一个最小的可复制代码吗？我只在处理图像时看到这种行为

Image.memory（）

。您可以使用此代码。我认为这是因为更改了整个列表的状态，而不是仅更改了复选框。@shanthosh我运行了代码，它工作正常。在您使用的代码中

ListView

是，我使用的是

ListView

。点击复选框时，您可以看到应用程序图标闪烁。