时间戳

首页 > 解决方案 > 限制键盘事件，直到子小部件更新

flutter - 限制键盘事件，直到子小部件更新

问题描述

在我简单的 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);
    });
  }

标签： flutter

解决方案

我发现在图像数据完全加载后更新图像小部件时，可以避免在后续按键时跳过图像，这可以通过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);
      });
    }
  }));
}`

推荐阅读