内容简介：在导航到导航到一个新页面和返回的方法中，我们学习了如何通过创建新路由并将其但是，如果我们需要在应用程序的许多部分导航到同一路由，这可能会导致代码重复。 在这些情况下，定义“命名过的路由”，并使用“命名过的路由“进行导航，是非常方便的。
在导航到导航到一个新页面和返回的方法中，我们学习了如何通过创建新路由并将其 push 导航器来导航到新路由。
但是，如果我们需要在应用程序的许多部分导航到同一路由，这可能会导致代码重复。 在这些情况下，定义“命名过的路由”，并使用“命名过的路由“进行导航，是非常方便的。
要使用“命名过的路由”，我们可以使用Navigator.pushNamed函数。 此示例将复制原始功能，演示如何使用“命名过的路由”。
步骤
- 创建两个路由
- 定义路由表(routes)
- 使用Navigator.pushNamed导航到第二个路由
- 使用Navigator.pop返回第一个路由
1.创建两个路由
首先，我们需要使用两个路由。 第一个路由将包含一个导航到第二个路由的按钮。 第二个路由将包含一个导航回第一个路由的按钮。
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
// Navigate to second screen when tapped!
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to first screen when tapped!
},
child: Text('Go back!'),
),
),
);
}
}
2.定义路由
接下来，我们需要通过为 MaterialAp p构造函数提供其他属性来定义我们的路由： initialRoute 和 routes 它们自己。
initialRoute 属性定义了应用程序应该从哪个路由开始。 routes 属性定义可用的命名过的路由以及导航到这些路由时应构建的widget。
MaterialApp(
// Start the app with the "/" named route. In our case, the app will start
// on the FirstScreen Widget
initialRoute: '/',
routes: {
// When we navigate to the "/" route, build the FirstScreen Widget
'/': (context) => FirstScreen(),
// When we navigate to the "/second" route, build the SecondScreen Widget
'/second': (context) => SecondScreen(),
},
);
注意：使用 initialRoute 时，请确保未定义 home 属性。
3.导航到第二个路由
通过我们的widget和路由，我们可以开始导航！在这种情况下，我们将使用Navigator.pushNamed函数。这告诉Flutter构建路由表中定义的Widget并启动路由。
在我们的FirstScreen widget 的build方法中，我们将修改 onPressed 回调：
// Within the `FirstScreen` Widget
onPressed: () {
// Navigate to the second screen using a named route
Navigator.pushNamed(context, '/second');
}
4.返回第一个路由
为了导航回第一页，我们可以使用Navigator.pop函数。
// Within the SecondScreen Widget
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack
Navigator.pop(context);
}
完整例子
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Named Routes Demo',
// Start the app with the "/" named route. In our case, the app will start
// on the FirstScreen Widget
initialRoute: '/',
routes: {
// When we navigate to the "/" route, build the FirstScreen Widget
'/': (context) => FirstScreen(),
// When we navigate to the "/second" route, build the SecondScreen Widget
'/second': (context) => SecondScreen(),
},
));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
// Navigate to the second screen using a named route
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- (译)传递参数到命名过的路由
- 现如今连安全漏洞命名都用表情符了：思科路由器安全启动漏洞????????????(生气猫)
- 前端开发之Pascal命名规范 & BEM命名规范
- C# 中新增类型的命名空间只需部分与其他命名空间名称相同即可破坏源码兼容性
- 未命名
- Java~命名规范
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
