Flutter – 命名路由中的参数

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);
}

创建一个小部件：

现在制作一个小部件提取物并显示参数类的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 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！