Flutter 学習------ルーティング

ルーティングの使い方

1. シンプルなルーティング

パラメータなしのルーティングの例

 Navigator.push(context,
       MaterialPageRoute(builder: (context) {
       return SearchScreen();//这里是要跳转的界面地址
       }));

パラメータルーティングの例

 Navigator.push(context,
           MaterialPageRoute(builder: (context) {
            return SearchScreen(name:'参数');
           }));
		//SearchScreen界面获取传过来的参数值
		${this.widget.name}

パラメータを使用した戻りルートの例

  Navigator.pop(context,'返回去的参数')
  //接收页面取值方式
 var result =  Navigator.push(context,
        MaterialPageRoute(builder: (context) {
        return SearchScreen();
       }));
 result.then((value) => print('这里是返回的参数${value}'));

2. 名前付きルート

例

 return MaterialApp(
      title: '我的第一个flutter',
      routes: {
        '/home':(context)=> HomeScreen(),
        '/A':(context)=> A(),
        '/B':(context)=> B(),
        '/C':(context)=> C(),
      },
      home: const HomePage(),
    );
//调用方式
   Navigator.pushNamed(context, '/A');
//传参方式
   Navigator.pushNamed(context, '/A',arguments: 'canshu');
   //获取参数方式
   var param = ModalRoute.of(context)?.settings.arguments;

ルートを初期化しますinitialRoute: '/A',

3. ルーティングフック

MaterialApp は、次のルールに従ってルートを照合します。

1. ルートが / の場合、home が null でない場合は、home を使用します。
2. ルートで指定されたルートを使用します。
3. onGenerateRoute によって生成されたルートを使用して、ホームとルートを除くルートを処理します。
4. 上記のいずれにも一致しない場合は、onUnknownRoute が呼び出されます。

  return MaterialApp(
      routes: {
        '/home':(context)=> HomeScreen(),
        '/A':(context)=> A(),
        '/B':(context)=> B(),
        '/C':(context)=> C(),
      },
      initialRoute: '/A',
      onGenerateRoute: (RouteSettings settings){
        if(settings.name == '/A'){
          return MaterialPageRoute(builder: (context) => A());
        }
      },
      //如果上面的页面都没有走这里
      onUnknownRoute: (RouteSettings settings){
        return MaterialPageRoute(builder: (context) => 错误界面());
      },
      home: const HomePage(),
    );