Flutter - 无需用户交互即可重建 GestureDetector 小部件

Posted 2023-02-23

【中文标题】Flutter - 无需用户交互即可重建 GestureDetector 小部件

【英文标题】：Flutter - rebuild GestureDetector widget without user interaction

【发布时间】：2021-06-05 18:08:40

【问题描述】：

我正在尝试使用GestureDetector 及其onTap 方法一个接一个地显示3 个图像，但是应该在不点击的情况下显示一个图像。假设我有三张图片 1.png、2.png、3.png 我想显示第一张图片 1。 png 放在第一位。点击它会显示第二张图片2.png。 第二张图片 2.png 现在应该在 x 秒后被替换为显示图片 3.png。

我正在使用一个有状态的小部件来存储当前显示的图像。对于第一个图像更改，onTap 将执行setState( () screen = "2.png" 并重建小部件。但是，当第三张图像应该在 x 秒延迟后显示时，我现在非常卡住，因为不应该有任何用户交互，我不知道在哪里更改它。我尝试了很多东西，尤其是从小部件外部编辑状态，但直到现在我都没有成功。

这是我正在使用的代码：

import 'package:flutter/material.dart';

void main() 
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Navigation Basics',
    home: MyScreen(),
  ));


class MyScreen extends StatefulWidget 
  @override
  _MyScreenState createState() => _MyScreenState();


class _MyScreenState extends State<MyScreen> 
  String currentScreen = 'assets/images/1.png';

  @override
  Widget build(BuildContext context) 
    return GestureDetector(
      child: FittedBox(
        child: Container(
          child: Image.asset(currentScreen),
        ),
        fit: BoxFit.fill,
      ),
      onTap: () 
        if (currentScreen == 'assets/images/1.png') 
          setState(() 
            currentScreen = 'assets/images/2.png';
          );
        
      ,
    );
  

显示第二张图片没有任何问题，但我不知道要编码什么/在哪里才能显示第三张图片。

感谢您的帮助！

【参考方案1】：

我假设您不希望第二张和第三张图片响应手势检测。请试试这个。

 onTap: () 
        if (currentScreen == 'assets/images/1.png') 
          setState(() 
            currentScreen = 'assets/images/2.png';
          );

          Future.delayed(const Duration(milliseconds: 3000), () 
            setState(() 
              currentScreen = 'assets/images/3.png';
            );
          );
         else 
          return;
        
      ,

【讨论】：

嗨，这对我有用。如果我理解正确，您将状态更改为“assets/images/2.png”，这会导致在下一个构建过程中不进入 if 分支但显示图像。但是，您从第一个 onTap() 触发了异步 setState，这导致延迟后将状态设置为“assets/images/3.png”（？）

@Akkamar 是的，完全正确！你可以根据你想要的条件来玩。我只是假设您不希望第二个和第三个图像响应 onTap 回调并将它们排除在回调之外，这样即使用户点击第二个和第三个图像也不会破坏 UI。很高兴能为您提供帮助。