Flutter

Question

我正在尝试使用 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';
          });
        }
      },
    );
  }
}

显示第二张图片没有任何问题，但我不知道 what/where 编码以显示第三张图片。

感谢您的帮助！

Answer 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;
        }
      },

Flutter - 在没有用户交互的情况下重建 GestureDetector 小部件

Flutter - rebuild GestureDetector widget without user interaction

widget

setstate

gesturedetector

user-interaction