Flutter中MultiScreen应用程序的制作。

在添加用于导航的代码之前,让我们创建另一个窗口小部件屏幕,在按下按钮后将在其中加载另一个窗口小部件。

描述第二个屏幕的用户界面:

  SecondScreen  扩展 StatelessWidget { 
@override
小部件构建(BuildContext上下文){
返回新的脚手架(
appBar: 新的 AppBar(
标题: new Text(“ Second Screen”),
),
身体:中心(
子代: new RaisedButton(
onPressed:(){
航海家。 弹出 (上下文);
},
孩子: new Text( 'Go back!' ),
),
),
);
}
}

我们现在要做的是在FirstScreen RaisedButton上添加一个动作,以便显示SecondScreen

这可以通过多种方式来实现。 在此之前,让我们了解什么是路线。

导航中的路线和堆栈概念:

导航中的路线帮助可指导您从当前屏幕转到何处,并告知要加载的页面。 它需要Stack的帮助来跟踪所有导航到的位置,并有助于返回初始页面。

堆栈有助于加载新页面,并在现有页面的顶部加载新页面。 它遵循面向对象编程的概念,其中在被导航的页面中将页面推入堆栈中,而在向后导航时,页面会弹出到堆栈外部。

Flutter通过使用Navigator实现了堆栈功能,而MaterialPageRoute帮助路由和加载新页面。

相同的代码如下:

  onPressed:(){ 
航海家。
上下文
MaterialPageRoute(builder:(context)=> SecondScreen()),
);
},

推页面!

使用Navigator.push方法将新路由推入堆栈。 导航器从访问的上下文中了解当前页面,并使用MaterialPageRoute构建从上下文页面(FirstPage)到新页面的新路由。 (第二页)

弹出他们!

Flutter中的Navigator是一个管理器,用于管理应用程序从一页到另一页的路由。 它有助于将新的路由从当前页面推入堆栈。 它还有助于使用Navigator.pop返回到现有屏幕。

这是Navigator.pop的代码如下所示:

  onPressed:(){ 
航海家。 弹出 (上下文);
},

导航器将从堆栈中弹出当前页面,并导航回到其浏览的屏幕。