【Flutter】Route & Navigator

Flutter中通过定义Route, 使用Navigator来实现界面跳转。routes是MaterialApp的属性之一，主要用于设置每个界面的key和对应到具体界面的跳转。

1，定义Route

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      canvasColor: Colors.transparent,
    ),
    home: HomePage(),
    // 注册路由表
    routes:{
      '/nextPage': (context) => NextPage(),
      /// ……
    } ,
  );
}

2，界面跳转

Navigator.pushNamed(context, '/nextPage');
// 若未定义路由，可如此跳转
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage());

3，界面返回

Navigator.pop(context);

4，跳转传值

界面1：

Navigator.pushNamed(context, '/nextPage', params: data)；
///
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage(valueKey: 'value'));

界面2：

class NextPage extends StatelessWidget {
     final StringvalueKey;
     const NextPage({ Key key, this.valueKey, }): super(key: key)

     @override
     Widget build(BuildContext context) {
        return Scaffold(
           backgroundColor: Colors.white,
           appBar: AppBar(
               title: Text( 'NextPage', style: TextStyle(fontSize: 16.0, color: BLACK)),
           ),
           body: Center(
              child: Text('$valueKey');
           )
        );
     }
}

5，返回带参

界面1：

Navigator.pushNamed(context, '/nextPage').then((value) {
  _result = value;
}));

界面2：

Navigator.of(context).pop('传回的参数');