Flutter 中如何传递参数到下一个页面？

推荐答案

在 Flutter 中，可以通过 Navigator.push 方法将参数传递到下一个页面。具体步骤如下：

1. 定义目标页面：在目标页面的构造函数中接收参数。
2. 传递参数：在跳转页面时，通过 MaterialPageRoute 的 builder 方法将参数传递给目标页面。

示例代码：

// www.javascriptcn.com code example
// 目标页面
class SecondPage extends StatelessWidget {
  final String message;

  SecondPage({required this.message});

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

// 跳转页面
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(message: 'Hello from First Page!'),
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

本题详细解读

1. 定义目标页面

在 Flutter 中，页面通常是一个 Widget，可以是 StatelessWidget 或 StatefulWidget。为了接收参数，需要在目标页面的构造函数中定义参数，并将其保存为类的成员变量。

// www.javascriptcn.com code example
class SecondPage extends StatelessWidget {
  final String message;

  SecondPage({required this.message});

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

2. 传递参数

在跳转页面时，使用 Navigator.push 方法将参数传递给目标页面。Navigator.push 方法接受一个 Route 对象，通常使用 MaterialPageRoute 来创建页面路由。在 MaterialPageRoute 的 builder 方法中，可以实例化目标页面并传递参数。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(message: 'Hello from First Page!'),
  ),
);

3. 使用 Navigator.pushNamed 传递参数

除了直接使用 Navigator.push，还可以使用 Navigator.pushNamed 方法通过路由名称跳转页面，并通过 arguments 参数传递数据。

// www.javascriptcn.com code example
// 定义路由
MaterialApp(
  routes: {
    '/second': (context) => SecondPage(message: ModalRoute.of(context)!.settings.arguments as String),
  },
);

// 跳转页面
Navigator.pushNamed(
  context,
  '/second',
  arguments: 'Hello from First Page!',
);

4. 注意事项

• 参数类型：确保传递的参数类型与目标页面构造函数中定义的类型一致。
• 命名路由：使用 Navigator.pushNamed 时，需要在 MaterialApp 中定义路由表。
• 空安全：在 Dart 2.12 及以上版本中，确保参数传递时遵循空安全规则。

通过以上方法，可以在 Flutter 中轻松地将参数传递到下一个页面。