如何在 Flutter 中一段时间后切换小部件？答案

【问题标题】：How to Switch Widgets after certain time in Flutter?如何在 Flutter 中一段时间后切换小部件？
【发布时间】：2020-04-16 11:48:19
【问题描述】：

我遇到了这个主题的问题，我想在一段时间后更改一个小部件。例如我有这个动画颤振屏幕（屏幕 1），然后在动画结束后，我想将屏幕更改为我拥有的任何屏幕，例如。登录（）；

有什么建议吗？谢谢。

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(AnimatedFlutterLogo());

class AnimatedFlutterLogo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _AnimatedFlutterLogoState();

}

class _AnimatedFlutterLogoState extends State<AnimatedFlutterLogo> {
  Timer _timer;
  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;

  _AnimatedFlutterLogoState() {
    _timer = new Timer(const Duration(milliseconds: 800), () {
      setState(() {
        _logoStyle = FlutterLogoStyle.horizontal;
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    _timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return new FlutterLogo(
      size: 200.0,
      textColor: Colors.white,
      style: _logoStyle,

    );
  }
}

【问题讨论】：

标签： android ios flutter android-animation flutter-animation

【解决方案1】：

试试这个，

_Act_NotificationScreenState() {
_timer = new Timer(const Duration(milliseconds: 800), () {
  setState(() {
    _logoStyle = FlutterLogoStyle.horizontal;
  });
  _timer = new Timer(const Duration(seconds: 1), () {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Act_Login()));
  });
});
}

【讨论】：

这项工作很好，谢谢。顺便说一句，有没有办法“清洁”屏幕 1？我的意思是，当屏幕 2 出现时，我希望上一个按钮（出现在大多数手机中的按钮（物理按钮））进入主屏幕，而不是屏幕 1 应用程序
试试这个，Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Act_Login()));
天哪！它工作得很好。感谢 Flutter 社区的帮助 :)

【解决方案2】：

用MaterialApp 包裹你的AnimatedFlutterLogo 并在Timer 的回调函数中使用Navigator 导航到相应的页面

例子：

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MaterialApp(home:AnimatedFlutterLogo()));

class AnimatedFlutterLogo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _AnimatedFlutterLogoState();

}

class _AnimatedFlutterLogoState extends State<AnimatedFlutterLogo> {
  Timer _timer;
  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;

  _AnimatedFlutterLogoState() {
    _timer = new Timer(const Duration(milliseconds: 800), () {
       setState(() {
        _logoStyle = FlutterLogoStyle.horizontal;
      });
    Navigator.push(                      //<-- Navigate to loginPage on Timeout
    context,
    MaterialPageRoute(builder: (context) => LoginPage()),
  );
    });
  }

  @override
  void dispose() {
    super.dispose();
    _timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return new FlutterLogo(
      size: 200.0,
      textColor: Colors.white,
      style: _logoStyle,

    );
  }
}

class LoginPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Container(alignment: Alignment.center,child: Text("LOG IN PAGE"));
  }
}

【讨论】：

第二个屏幕出现的速度比徽标动画快，无论如何它可以工作。
那是因为你在 Timeout 回调函数里面改变了 logo
可以使用AnimationController来实现想要的动画o
感谢您的解释。我将您的答案标记为有用，但系统显示“声望低于 15 人的投票已记录，但不要更改公开显示的帖子得分。”

【解决方案3】：

您需要编写导航到另一个屏幕的代码（对于 Flutter 的 Widget）

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => Login()),
  );

您需要在当前屏幕中导入登录。

【讨论】：