Navigator基本用法

• 路由最基本的使用-页面跳转和退出

  • 使用Navigator.push()来跳转页面

  • onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SecondRoute()),
      );
    }

    使用Navigator.pop()来返回上一个页面

  • onPressed: () {
      Navigator.pop(context);
    }

     

• 通过Named Routes（路由表）来做跳转

  • 定义创建的route

  • MaterialApp(
      // 定义APP启动时第一个显示的页面，在本例中，initialRoute指代FirstScreen
      initialRoute: '/',
      routes: {
        // 当navigating到‘/’ route时，构建FirstScreen widget
        '/': (context) => FirstScreen(),
        // 当navigating 到"/second" route, 构建SecondScreen widget.
        '/second': (context) => SecondScreen(),
      },
    );

    Navigate到SecondScreen

  • onPressed: () {
      // 跳转到SecondScreen
      Navigator.pushNamed(context, '/second');
    }

     

• 在跳转中传值

  • 准备传递的数据

  • class ScreenArguments {
      final String title;
      final String message;
     
      ScreenArguments(this.title, this.message);
    }

    接受传递的数据

  • class ExtractArgumentsScreen extends StatelessWidget {
      static const routeName = '/extractArguments';
     
      @override
      Widget build(BuildContext context) {
        //获取传递的参数
        final ScreenArguments args = ModalRoute.of(context).settings.arguments;
     
        return Scaffold(
          appBar: AppBar(
            title: Text(args.title),
          ),
          body: Center(
            child: Text(args.message),
          ),
        );
      }
    }

    将准备好的参数传递过去

  • RaisedButton(
      child: Text("使用pushNamed携带参数跳转"),
      onPressed: () {
        //点击事件，触发跳转
        Navigator.pushNamed(
          context,
          ExtractArgumentsScreen.routeName,
          arguments: ScreenArguments(
            '我是被传递的title',
            '我是被传递的message.',
          ),
        );
      },
    );

    PUSH传值

  • Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => ExtractArgumentsScreen(),
            settings: RouteSettings(
                arguments: ScreenArguments(
                    '我是title',
                    '我是message.',
                 ),
             ),
         ),
       );

    使用onGenerateRoute来进行跳转传值

  • MaterialApp(
      
      onGenerateRoute: (settings) {
        // 判断当前route，分别进行处理
        if (settings.name == PassArgumentsScreen.routeName) {
          // 将settings.arguments转换为正确的类型 ScreenArguments.
          final ScreenArguments args = settings.arguments;
     
          //通过构造方法传值
          return MaterialPageRoute(
            builder: (context) {
              return PassArgumentsScreen(
                title: args.title,
                message: args.message,
              );
            },
          );
        }
      },
    );

    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => ExtractArgumentsScreen(),
            settings: RouteSettings(
                arguments: ScreenArguments(
                    '我是title',
                    '我是message.',
                 ),
             ),
         ),
       );

     

    　

• 携带参数退出

• 结束