当第二个屏幕上没有交互时，Flutter 导航回主屏幕

Question

Flutter 初学者需要帮助。如果第二屏幕上没有任何交互，应用程序是否有可能在一段时间后无需按按钮就自己从第二屏幕导航到主屏幕。例如，在下面的代码中可以做到这一点吗？我不知道如何实现这个。预先感谢您的帮助

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

首先，我建议弹出而不是推送，因为 Flutter navigator 的工作方式就像堆栈。

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

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

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

使用 GestureDetector 的行为属性并将 HitTestBehavior.opaque 传递给它，它可以识别整个屏幕并在您点击屏幕上的任意位置时检测点击。像这样:

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...,
        ),
    );
  }
}