Flutter 中的路由参数：传递与接收数据

Flutter 中的路由参数：传递与接收数据

5 回复

在Flutter中，使用命名路由并借助MaterialPageRoute的settings属性传递参数，接收时从ModalRoute.of(context).settings.arguments获取。

更多关于Flutter 中的路由参数：传递与接收数据的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，使用 Navigator.push 传递参数，如 Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage(data: 'Hello')));。接收参数则通过 ModalRoute.of(context)!.settings.arguments 或构造函数。

在 Flutter 中，可以通过 Navigator.push 传递参数，使用 ModalRoute.of(context) 接收参数。例如：

传递参数：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(data: 'Hello'),
  ),
);

接收参数：

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String data = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      body: Center(child: Text(data)),
    );
  }
}

通过这种方式，可以在不同页面间传递和接收数据。

使用ModalRoute.of(context).settings.arguments接收，导航时传入Navigator.pushNamed(context, routeName, arguments: data)。

在 Flutter 中，路由参数用于在不同页面之间传递数据。你可以通过 Navigator.push 方法传递参数，并在目标页面中通过 ModalRoute.of(context) 接收参数。以下是具体的实现步骤：

1. 传递数据

在跳转到新页面时，可以通过 Navigator.push 方法的 arguments 参数传递数据。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(),
    settings: RouteSettings(
      arguments: 'Hello from FirstScreen!', // 传递的参数
    ),
  ),
);

2. 接收数据

在目标页面中，可以通过 ModalRoute.of(context) 获取传递过来的参数。

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 接收传递过来的参数
    final String message = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

3. 传递复杂对象

如果你需要传递更复杂的数据（如对象），可以定义一个类，并将该类的实例作为参数传递。

class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

// 传递对象
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(),
    settings: RouteSettings(
      arguments: User('John', 30), // 传递对象
    ),
  ),
);

// 接收对象
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final User user = ModalRoute.of(context)!.settings.arguments as User;

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Name: ${user.name}, Age: ${user.age}'),
      ),
    );
  }
}

通过这种方式，你可以在 Flutter 应用中轻松地传递和接收路由参数。

回到顶部