Question

我一直试图找到有关创建一段时间后消失的Widget的任何信息。我正在尝试创建一个应用程序运行时出现的问候页面，并在几秒钟后消失;之后导航到我的主页。

为了完成这项工作，正确的方向是什么？

我理解如何将showDialog与按钮一起使用，但我希望问候视图是应用程序启动时的第一个视图，那么如何正确使用showDialog？

void main() {
  runApp( new MaterialApp(
   home: new SignIn(),//how to integrate showDialog with my flow
))
}

Answer 1

“问候语”页面之间转换的完整代码＆＃39;和你的家使用PageRouteBuilder和NavigatorState.pushReplacement：

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

void main() {
  runApp(new MaterialApp(
    home: new Greeting(),
  ));
}

class Greeting extends StatefulWidget {
  @override
  _GreetingState createState() => new _GreetingState();
}

class _GreetingState extends State<Greeting> {
  @override
  initState() {
    super.initState();
    new Timer(const Duration(seconds: 5), onClose);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Align(
          alignment: FractionalOffset.center,
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                "Hello you !",
                style: Theme.of(context).textTheme.display1,
              ),
              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Text("Here's a unicorn for your"),
                  new Image.network(
                    "https://i.pinimg.com/736x/3b/06/ef/3b06efe25fed62de2960090ff2b8d83a--cute-cartoon-drawings-drawings-of.jpg",
                    height: 42.0,
                    width: 42.0,
                  ),
                ],
              )
            ],
          )),
    );
  }

  void onClose() {
    Navigator.of(context).pushReplacement(new PageRouteBuilder(
        maintainState: true,
        opaque: true,
        pageBuilder: (context, _, __) => new Home(),
        transitionDuration: const Duration(seconds: 2),
        transitionsBuilder: (context, anim1, anim2, child) {
          return new FadeTransition(
            child: child,
            opacity: anim1,
          );
        }));
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.pink,
        title: new Text("Home"),
      ),
    );
  }
}

Answer 2

您可以使用Timer和Navigator进行此类操作。

我们可以想到一个有状态的TimedWidget，用它来调用 showDialog(child: new TimedWidget(), context: context);

该小部件的代码将具有如下内容：

  initState() {
    super.initState();
    timer = new Timer(const Duration(seconds: 5), onCloseDialog);
  }

  void onCloseDialog() {
    if (mounted) {
      Navigator.of(context).pop();
    }
  }

修改：

您可能已经注意到，您无法在构建方法中执行showDialog / NavigatorState.push。如果你真的想直接拥有你的页面/ popin而不按任何按钮，你可以有一些解决方案。

对于页面，您可以考虑直接将GreetingPage加载到runApp中。然后，问候页面将在几秒钟后重定向到相应的主页。通常，你在GreetingPage中有这样的东西：

  initState() {
    super.initState();
    new Timer(const Duration(seconds: 5), onClose);
  }

  void onClose() {
    Navigator.of(context).pushReplacement(new PageRouteBuilder(
        maintainState: true,
        opaque: true,
        pageBuilder: (context, _, __) => new Home(),
        transitionDuration: const Duration(milliseconds: 250),
        transitionsBuilder: (context, anim1, anim2, child) {
          return new FadeTransition(
            child: child,
            opacity: anim1,
          );
        }));
  }

更简单，对于一个对话框，您可以使用另一个计时器来延迟框架对话框的显示。在这里你有这个：

  initState() {
    super.initState();
    new Timer(const Duration(), () {
      showDialog(context: context, child: new SimpleDialog(
        title: new Text("Hello world"),
      ));
    });
  }

查看特定时间段的问候语屏幕

2 个答案: