Flutter在第二個螢屏上沒有互動的時??間后導航回到主螢屏

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

uj5u.com熱心網友回復：

首先，我建議使用 pop 而不是 push，因為 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...,
        ),
    );
  }
}

uj5u.com熱心網友回復：

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

標籤：扑 镖

上一篇：如何在Dart/Flutter中將Json轉換為Map？

下一篇：如何從顏色串列中為容器分配顏色？