當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Navigator基本用法

發布時間：2024/6/21 综合教程 44 生活家

生活随笔收集整理的這篇文章主要介紹了 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.',
             ),
         ),
     ),
   );