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

Posted 2023-02-23

【中文标题】如何在 Flutter 中一段时间​​后切换小部件？

【英文标题】：How to Switch Widgets after certain time in 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,

    );
  

【参考方案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()),
  );

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