Question

如何实现颤动代码，以便在启动我的应用程序后，它将显示circleprogressindicator，然后通过Navigation.push加载另一个类据我所知，navigation.push需要像ontap或onpressed这样的用户操作

请协助我

Answer 1

您需要的是Splash Screen，它会停留一段时间，然后出现另一个页面。您可以做某些事情，那就是

使用Future.delayed constructor，这可以将您的持续时间延迟一个过程，然后实施您的OP，在这种情况下，您是Navigator.push()

Future.delayed(Duration(seconds: your_input_seconds), (){
   // here you method will be implemented after the seconds you have provided
   Navigator.push();
});

上面的应该在initState()中调用，这样，当您的页面显示出来时，上面的过程就会发生，并且您可以这样做
您可以在FirsScreen上正常使用CircularProgressIndicator

假设：

我们的页面将分别称为FirstPage和SecondPage。
我们将在FirstPage秒后直接从SecondPage-> N出发
此外，如果您正在处理这样的页面，则不想返回该页面，因此，与其使用Navigator.push()，不如使用pushAndRemoveUntil

让我们现在跳转到代码

FirstPage.dart

// FIRST PAGE
class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  
  //here is the magic begins
  @override
  void initState(){
    super.initState();
    //setting the seconds to 2, you can set as per your
    // convenience
    Future.delayed(Duration(seconds: 2), (){
      Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
        builder: (context) => SecondPage()
      ), (_) => false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: CircularProgressIndicator()
        )
      )
    );
  }
}

SecondPage.dart

// SECOND PAGE
class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: Text('Welcome to Second Page')
        )
      )
    );
  }
}

结果

查看页面如何工作，没有任何按钮，停留2 seconds，然后转到第二页。但是，也没有后退按钮，因为后退不是正确的选择。如果要制作这样的页面，则必须从堆栈中删除所有项目

按错误进行编辑

由于我可以看到您当前遇到错误，因为该小部件尚未准备好，甚至无法调用Future.delayed() 。为此，您需要在FirstPage.dart，initState()方法中进行更改。休息可以原样

@override()
void initState(){
  super.initState();

  // Ensures that your widget is first built and then
  // perform operation
  WidgetsBinding.instance.addPostFrameCallback((_){
     //setting the seconds to 2, you can set as per your
    // convenience
    Future.delayed(Duration(seconds: 2), (){
      Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
        builder: (context) => SecondPage()
      ), (_) => false);
    });
  });
}

OR

如果WidgetsBinding.instance.addPostFrameCallback((_){}并不方便，请使用它代替上述功能

// This needs to be imported for this particular only
// i.e., ScheduleBider not WidgetBinding
import 'package:flutter/scheduler.dart';

@override
void initState(){
  super.initState();

  SchedulerBinding.instance.addPostFrameCallback((_){
     //setting the seconds to 2, you can set as per your
    // convenience
    Future.delayed(Duration(seconds: 2), (){
      Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
        builder: (context) => SecondPage()
      ), (_) => false);
    });
  });
}

带有导航的Flutter CircularprogressIndicator

1 个答案: