Flutter – 命名路由中的参数

Flutter中的路由（Navigator）是管理应用程序页面转换的机制。实现页面转换可以使用两种方式-命名路由和非命名路由。在本篇文章中，我们将专注于命名路由，并探讨如何使用命名路由来传递参数。

开始使用命名路由

在Flutter中，命名路由的创建非常简单。首先，我们需要在main.dart文件中创建我们需要使用的命名路由。例如：

routes: {
  '/': (context) => HomePage(),
  '/detail': (context) => DetailPage(),
},

在这里，我们定义了两个路由页面：HomePage和DetailPage。我们将在后面使用“/ detail”路由并将它指向DetailPage。

接下来，我们需要在一些可交互的小部件中使用这个命名路由（通常是一个按钮）。在这里，我们将使用一个RaisedButton来打开详情页面：

RaisedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/detail');
  },
  child: Text('Open Detail Page'),
),

现在，你可以点击按钮，打开详情页面！

过渡到从路由中传递参数

很好，现在我们知道如何使用命名路由来打开新的页面。但在开发中，我们通常需要传递一些数据和参数到新页面中。从一个页面到另一个页面，Flutter始终将视图组件作为新页面的构建块。那么下面让我们探讨如何在跳转到新页面时将参数传输到新页面的视图组件中。

传递数据

Flutter提供了Navigator.pushNamed方法的参数追加能力。这个方法有两个参数：

• context – 可以在方法中引用Buildcontext
• routeName – 为字符串类型，代表我们想用的路由名称

在这两个参数后面，我们可以写任意数量的参数。这些参数是映射（Map），表示键和值的关系，其中键是字符串类型，值可以是任何类型，包括视图组件（Widget）。

接收数据

为了接收传递给新页面的参数，我们添加了一个构造函数。当你要创建一个新的视图组件时，Flutter通常会调用它的构造函数。为这个新的构造函数新增一些参数，使它能够接收传递给它的数据。

完整的例子如下：

class DetailPage extends StatelessWidget {
  final String data;

  const DetailPage({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

在这个例子中，我们通过DetailPage类的构造函数接收一个字符串类型的参数。

完整的例子

现在，我们来看一个完整的例子，它将string类型的参数发送到另一个视图组件。我们将在当前页面上放置一个输入框，在这个输入框中，我们将输入文本片段，当我们点击提交按钮时，我们将传递给Details页面一个文本字符串。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Route Parameter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  String _inputText = '';

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter some text',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
              onSaved: (value) {
                _inputText = value;
              },
            ),
            RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  _formKey.currentState.save();
                  Navigator.pushNamed(context, '/detail', arguments: {
                    'data': _inputText,
                  });
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String data;

  DetailPage({Key key, @required this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

在这个例子中，我们将信息作为Map传递给了DetailsPage。在控制台打印它，从而可以看到这个Map的所有数据.

结论

在本文中，我们介绍了如何使用命名路由向Flutter应用程序的不同页面传递参数，包括如何将参数存储在位置，和如何在新页面上加载和使用这些数据。学习通过命名路由传递参数，这为我们在开发应用程序时，向页面中添加更多动态和交互功能提供了巨大的帮助。