Flutter在第二个屏幕上没有交互后导航回主屏幕

Question

长笛初学者需要帮助。如果在第二个屏幕上没有任何交互，那么在一段时间后，该应用程序是否有可能在不按下按钮的情况下独自从第二个页面导航到主屏幕。例如，在下面的代码中，有可能做到这一点吗？我不知道如何实现这一点。提前感谢的帮助

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Navigate to a new screen on Button click'),
backgroundColor: Colors.teal),
body: Center(
child: FlatButton(
color: Colors.teal,
textColor: Colors.white,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>Screen2()));
},
child: Text('GO TO SCREEN 2'),
),
),
);
}
}
class Screen2 extends StatefulWidget {
@override
_Screen2State createState() => _Screen2State();
}
class _Screen2State extends State<Screen2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Navigate to a new screen on Button click'),
backgroundColor: Colors.blueAccent),
body: Center(
child: FlatButton(
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>Home()));
},
child: Text('GO TO HOME'),
),
),
);
}
}

Answer 1

首先，我建议pop而不是push，因为Flutter导航器的工作原理类似于堆栈。

接下来，您可以在initState函数中设置计时器：

@override
void initState() {
Timer(Duration(seconds: 3), () {
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => Home()));
});
super.initState();
}

为了获得更好的解决方案，我会在initState函数中设置一个计时器，并用GestureDetector包裹整个页面，这样每个手势都会重置计时器。

使用GestureDetector的behavior属性并将HitTestBehavior不透明传递给它，它可以识别整个屏幕，并在您点击屏幕上的任何位置时检测点击。像这样：

import 'dart:async';
import 'package:flutter/material.dart';
class Screen2 extends StatefulWidget {
@override
_Screen2State createState() => _Screen2State();
}
class _Screen2State extends State<Screen2> {
Timer? searchOnStoppedTyping;
_onChangeHandler() {
const duration = Duration(milliseconds: 800); // set the duration that you want call pop() after that.
if (searchOnStoppedTyping != null) {
searchOnStoppedTyping?.cancel(); // clear timer
}
searchOnStoppedTyping = new Timer(duration, () => navigateHome());
}
navigateHome() {
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => Home()));
}
@override
void initState() {
_onChangeHandler();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Navigate to a new screen on Button click'), backgroundColor: Colors.blueAccent),
body: GestureDetector(
//Use GestureDetector's behavior property and pass HitTestBehavior.opaque to it, which recognizes entire screen and detects the tap when you tap anywhere on the screen.
behavior: HitTestBehavior.opaque,
onTap: _onChangeHandler,
child: yourBody...,
),
);
}
}

Answer 2

class Screen2 extends StatefulWidget {
@override
_Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
// try to add init state and add timer inside it then it will navigate after duration
void initState() {
super.initState();
Timer(Duration(seconds: 4), (){
Navigator.of(context).pop(MaterialPageRoute(builder: (context)=>Home()));
});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Navigate to a new screen on Button click'),
backgroundColor: Colors.blueAccent),
body: Center(
child: FlatButton(
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {
// i moved this line inside the Timer , look at initState
},
child: Text('GO TO HOME'),
),
),
);
}
}