在子部件更新之前限制键盘事件

Question

在我的简单的Flutter桌面图像浏览器中，我使用箭头键遍历文件夹(实际上是ZIP存档)中的项目。由于加载大型图像较慢，如果多次按箭头键直到图像完全加载，则会跳过一些图像。我宁愿等待所有图像直到完全加载，并将关键事件队列限制在一定范围内(例如最多5个关键事件)。实际的核心代码段:

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: RawKeyboardListener(
focusNode: focusNode,
autofocus: true,
onKey: handleKey,
child: InteractiveViewer(
child: image,
),
),
);
}

void handleKey(RawKeyEvent keyEvent) async {
if (keyEvent.isKeyPressed(LogicalKeyboardKey.arrowLeft) ||
keyEvent.isKeyPressed(LogicalKeyboardKey.arrowRight) ||
keyEvent.isKeyPressed(LogicalKeyboardKey.home) ||
keyEvent.isKeyPressed(LogicalKeyboardKey.end)) {
int newImageIndex = currentImageIndex;
if (keyEvent.isKeyPressed(LogicalKeyboardKey.arrowLeft)) {
newImageIndex = max(currentImageIndex - 1, 0);
} else if (keyEvent.isKeyPressed(LogicalKeyboardKey.arrowRight)) {
newImageIndex = min(currentImageIndex + 1, widget.fileNameMap.length - 1);
}

if (newImageIndex != currentImageIndex) {
updateImage(newImageIndex);
}
}

void updateImage(int index) {
setState(() {
File file = new File(paths[index]);
image = new Image.file(file);
});
}

Answer 1

我发现，当图像小部件在图像数据完全加载后更新时，可以避免后续按键上的图像跳过，这可以通过ImageProvider以这种方式实现:

void updateImage(int index) {
File file = new File(paths[index]);
var imageData = new FileImage(file);
imageData
.resolve(ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo _, bool __) {
if (mounted) {
setState(() {
image = new Image(image: imageData);
});
}
}));
}`