Flutter应用程序的各种路由(即页面)之间的导航是使用Navigator 完成的。导航器使用通用标识符在路由之间进行转换。可以使用Navigator.pushNamed()方法的arguments参数将参数传递给这些路由。可以使用ModalRoute.of()方法或使用onGenerateRoute()函数提取参数。
在本文中,我们将探索使用 ModalRoute.of() 方法提取参数的方法。我们将通过在一个简单的应用程序中实现它们来做到这一点。为此,请执行以下步骤:
- 设计要传递的参数
- 创建一个提取参数的小部件
- 将小部件添加到路由表
- 过渡到小部件
让我们详细讨论上述步骤:
设计论证:
在这里,我们将通过设计一个Argument 类将单个数据作为参数传递,如下所示:
Dart
class Arguments {
final String title_bar;
final String text_message;
Arguments(this.title_bar, this.text_message);
}
Dart
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final Arguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text(args.title_bar),
),
body: Center(
child: Text(args.text_message),
),
);
}
}
Dart
MaterialApp(
routes: {
ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
},
);
Dart
ElevatedButton(
child: Text("Extracted through modelRouteof() method"),
onPressed: () {
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'Extracted through modelRouteof() method',
),
);
},
),
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateRoute: (settings) {
if (settings.name == PassArgumentsScreen.routeName) {
final ScreenArguments args = settings.arguments;
return MaterialPageRoute(
builder: (context) {
return PassArgumentsScreen(
title: args.title,
message: args.message,
);
},
);
}
assert(false, 'Implementation ${settings.name}');
return null;
},
title: 'Arguments in named routes',
home: HomeScreen(),
routes: {
ExtractArgumentsScreen.routeName: (context) =>
ExtractArgumentsScreen(),
});
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeekForGeeks'),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text("Extracts arguments"),
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.green),
),
onPressed: () {
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'Extracted in the build method.',
),
);
},
),
// on tap navigate to named route
ElevatedButton(
child: Text("Accepts arguments"),
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.green),
),
onPressed: () {
// on tab change route
Navigator.pushNamed(
context,
PassArgumentsScreen.routeName,
arguments: ScreenArguments(
'Accept Arguments Screen',
'Extracted in the onGenerateRoute function.',
),
);
},
),
],
),
),
);
}
}
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final Arguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text(args.title),
),
body: Center(
child: Text(args.message),
),
);
}
}
//Widget to accept arguments
class PassArgumentsScreen extends StatelessWidget {
static const routeName = '/passArguments';
final String title;
final String message;
const PassArgumentsScreen({
Key key,
@required this.title,
@required this.message,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(message),
),
);
}
}
class Arguments {
final String title_bar;
final String text_message;
ScreenArguments(this.title_bar, this.text_message);
}
创建一个小部件:
现在制作一个小部件提取物并显示参数类的title_bar和text_message并使用 ModelRouteof() 方法提取参数,如下所示:
Dart
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final Arguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text(args.title_bar),
),
body: Center(
child: Text(args.text_message),
),
);
}
}
注册小部件:
使用以下命令将新创建的小部件注册到路由表:
Dart
MaterialApp(
routes: {
ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
},
);
过渡:
点击我们将在屏幕上添加的提升按钮,它应该转换到另一个屏幕并显示提取的text_message和title_bar 。为此,请使用以下命令:
Dart
ElevatedButton(
child: Text("Extracted through modelRouteof() method"),
onPressed: () {
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'Extracted through modelRouteof() method',
),
);
},
),
完整的源代码:
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateRoute: (settings) {
if (settings.name == PassArgumentsScreen.routeName) {
final ScreenArguments args = settings.arguments;
return MaterialPageRoute(
builder: (context) {
return PassArgumentsScreen(
title: args.title,
message: args.message,
);
},
);
}
assert(false, 'Implementation ${settings.name}');
return null;
},
title: 'Arguments in named routes',
home: HomeScreen(),
routes: {
ExtractArgumentsScreen.routeName: (context) =>
ExtractArgumentsScreen(),
});
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeekForGeeks'),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text("Extracts arguments"),
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.green),
),
onPressed: () {
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'Extracted in the build method.',
),
);
},
),
// on tap navigate to named route
ElevatedButton(
child: Text("Accepts arguments"),
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.green),
),
onPressed: () {
// on tab change route
Navigator.pushNamed(
context,
PassArgumentsScreen.routeName,
arguments: ScreenArguments(
'Accept Arguments Screen',
'Extracted in the onGenerateRoute function.',
),
);
},
),
],
),
),
);
}
}
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final Arguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text(args.title),
),
body: Center(
child: Text(args.message),
),
);
}
}
//Widget to accept arguments
class PassArgumentsScreen extends StatelessWidget {
static const routeName = '/passArguments';
final String title;
final String message;
const PassArgumentsScreen({
Key key,
@required this.title,
@required this.message,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(message),
),
);
}
}
class Arguments {
final String title_bar;
final String text_message;
ScreenArguments(this.title_bar, this.text_message);
}
输出:
想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!