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

     

    　

• 攜帶參數退出

• 結束