Navigator的使用：Flutter 路由跳转及传值详解

2024-01-05 14:38:28

Flutter 路由跳转及传值详解（Navigator 的使用）

在 Flutter 中，想要实现页面间的跳转和传值的话，离不开两种路由：基本路由和命名式路由。官方说的是静态路由和动态路由，不过我习惯了这样叫，所以就暂且这样说吧！

基本路由

基本跳转

基本路由的跳转方式很简单，直接使用 Navigator.push() 方法即可。例如：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

其中，context 是当前页面的 BuildContext，SecondPage 是要跳转到的页面。

带参数的跳转

如果需要在页面之间传递参数，可以使用 Navigator.push() 方法的第二个参数，即 RouteSettings。例如：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(),
    settings: RouteSettings(arguments: {'data': 'hello'}),
  ),
);

在 SecondPage 中，可以使用 ModalRoute.of(context).settings.arguments 来获取传递过来的参数。例如：

final data = ModalRoute.of(context).settings.arguments as String;

命名式路由

命名式路由是一种更灵活的路由方式，它允许您使用字符串来指定要跳转到的页面。例如，您可以这样定义一个命名路由：

routes: {
  '/second_page': (context) => SecondPage(),
},

然后，您可以使用 Navigator.pushNamed() 方法来跳转到这个页面：

Navigator.pushNamed(context, '/second_page');

命名式路由还可以传递参数，方法与基本路由类似。例如：

Navigator.pushNamed(context, '/second_page', arguments: {'data': 'hello'});

在 SecondPage 中，可以使用 ModalRoute.of(context).settings.arguments 来获取传递过来的参数。

在 StatelessWidget 和 StatefulWidget 中使用 Navigator

在 StatelessWidget 中，可以使用 Navigator.push() 和 Navigator.pushNamed() 方法来进行页面跳转。例如：

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()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

在 StatefulWidget 中，可以使用 Navigator.push() 和 Navigator.pushNamed() 方法来进行页面跳转。例如：

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @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()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}