flutter - 更新 GridView.Builder() 中的单个项目而不重建整个树
问题描述
当用户点击图像时，我试图更新我的图像网格视图中的单个图像，但是每当我更新数组的单个元素时，它都会更新整个网格视图。这本身还不错，但由于用户将选择多个图像，它看起来并不理想或不好。如果有人可以指导我更新 gridview 的单个元素而不更新整个小部件，我将不胜感激
我正在使用提供程序进行状态管理，但我也使用 setState 进行了尝试。我已经包含了 gridview 文件的所有代码，但如果您需要信息，请告诉我。
谢谢
return Consumer<RemoverList>(
builder: (context, data, child) {
return WillPopScope(
onWillPop: () async {
data.remover.clear();
data.removerBool.clear();
// Provider.of<RemoverList>(context).remover.clear();
return true;
},
child: Scaffold(
body: Container(
height: height,
width: width,
color: Theme.of(context).backgroundColor,
child: SafeArea(
child: Column(
children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context, 'options');
},
child: Container(
height: height * 0.05,
width: width * 0.95,
margin: const EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
border: Border.all(color: Colors.white)),
child: Center(
child: Text(
widget.album.name,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25),
),
),
),
),
Expanded(
child: Container(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
// color: Colors.green,
width: width * 0.95,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(5)),
child: GridView.builder(
itemCount: widget.album.images.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5,
crossAxisSpacing: 5,
crossAxisCount: 3),
itemBuilder: (context, i) {
data.generateRemoverList(widget.album.images);
var image = Uint8List.fromList(widget
.album.images[i].image['data']
.cast<int>());
return GestureDetector(
onLongPress: () {
// data.tapped(i);
if (data.removerBool.isNotEmpty) {
if (data.removerBool[i] == true) {
setState(() {
data.removerBool[i] = false;
});
} else {
setState(() {
data.removerBool[i] = true;
});
}
}
print(data.removerBool[i]);
print(data.remover);
setState(() {
active = true;
});
data.addToList(
widget.album.images[i].originalName);
},
onTap: () {
if (active == false) {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return OpenImage(unit: image);
}));
} else if (active == true) {
data.addToList(
widget.album.images[i].originalName);
print(data.remover);
data.removerBool[i] = !data.removerBool[i];
// data.tapped(i);
}
// data.tapped(i);
// print(data.removerBool[i]);
},
child: Container(
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: MemoryImage(image),
fit: BoxFit.cover)),
child: Center(
child: data.remover.contains(
widget.album.images[i].originalName)
? const Icon(
Icons.check_box_rounded,
color: Colors.black,
)
: Container(),
),
));
}),
)),
Container(
width: width * 0.95,
margin: const EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Add Photos')),
),
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Remove Seleted')),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Save')),
),
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Delete Album')),
)
],
)
],
),
)
],
),
),
),
),
);
},
);
}
}