如何解决Flutter - 无需用户交互即可重建 GestureDetector 小部件
我正在尝试使用 GestureDetector
及其 onTap
方法一个接一个地显示 3 个图像,但应该显示一个图像而无需点击。假设我有三张图片1.png、2.png、3.png,我想显示第一张图片1。 png 放在首位。点击它会显示第二张图片2.png。
现在应该在 x 秒后通过显示图像 3.png 替换第二个图像 2.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';
});
}
},);
}
}
显示第二张图片没有任何问题,但我不知道要编码什么/在哪里才能显示第三张图片。
感谢您的帮助!
解决方法
我假设您不希望第二张和第三张图片响应手势检测。请试试这个。
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;
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。