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.',
             ),
         ),
     ),
   );