![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7l2sfirE8zWydx4jUf98bPcTb7dyEmJhuu9VxDp1zgCflHyQ4s46XqBpmkqGEPErOnekdLnFZIPobXJn97afdOXKd4wyNdqDWhqDN7RtmboYxB1DXe5pXuaF5V22DOVl1TfwPGtEouiAr/s640/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png)
Flutter 是 Google 跨平台 UI 解決方案,在開發 Flutter App 不可避免的是一頁畫面跳轉到另一個畫面,需要傳遞資料參數,到底要如何傳值呢?本文提供程式碼解說,非常簡單好上手,那麼就繼續看下去吧!
原生 Android 跳轉畫面傳值
我們只需要透過 Intent 物件,從 A Activity 到 B Activity 傳基本參數,然後要從 B Activity 傳回 A Activity 則是讓 A 繼承 onActivityResult 的 method,如果是 Fragment 之間的話則是利用 Bundle 傳值。
Flutter 跳轉畫面傳值步驟
1. main 畫面傳給 B 畫面
首先開新專案時,我們擁有一個預設 Flutter 畫面。原始頁面程式碼 _MyHomePageState 部分我們調整成以下樣子,以便接下來測試傳送資料參數是否正常。
class _MyHomePageState extends State{ String text="尚未接收資料"; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( text ), RaisedButton(onPressed: onPressToNextScreen,child: Text("點我進 B 畫面"),) ], ), ), ); } void onPressToNextScreen(){ //準備實作跳轉 B 畫面 } }
再來新增一個 .dart 檔案名為 b_screen.dart,這個成為我們跳轉目地第二個畫面,而 BScreen 這個 class 接收的參數,也就是範例程式碼的 String value 是由建構子接收。
class BScreen extends StatelessWidget { final String value; // 接收的參數是由建構子接收在這裡!! BScreen({@required this.value}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(value), ), body: Padding( padding: EdgeInsets.all(16.0), child: Text(value), ), ); } }
兩個頁面都建立好了,接下來就是點擊 Button 由 A 跳轉到 B 的實作方法,利用 Navigator.pop 推到下一頁。就能成功傳送資料過去 B 畫面了。
void onPressToNextScreen(){ Navigator.push( context, MaterialPageRoute( builder: (context) => BScreen(value:"我是從 A 傳來的資料!"), ), ); }
2. B 畫面回傳資料到 main 畫面
B 畫面新增一個 Button 用來點擊回傳資料參數給 A 畫面,一樣利用 Navigator.pop。
RaisedButton( onPressed: () { Navigator.pop(context, '我是 B 畫面來的資料!'); }, child: Text("回傳資料給 A 畫面"), )
main.dart 則把 onPressToNextScreen 做成 async & await Navigator 的結果,為的是等待資料回傳後更新資料給 text。
void onPressToNextScreen() async{ final result = await Navigator.push( context, MaterialPageRoute( builder: (context) => BScreen(value:"我是從 A 傳來的資料!"), ), ); //從 B 畫面回傳後更新畫面資料 setState(() { if(result!=null){ text = result; } }); }
這樣就成功把資料傳回 main.dart 了!
Flutter App 結果畫面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVRwyumTXWZPfAuYHHZhpOdwzzFOrMwTmT822BsxQushVwZ0XApM5zg7XXgH9oznQlhzznxAYqM4J-HFsriBEh1cTqfwEcn2P2x6Eh8K9NVjuj8k57hCcnR1ZLfh9k8BQ6OhcmqAnFJCN6/s640/flutterPassData.gif)
完整程式碼
如果喜歡這篇技術文章分享,歡迎到 GitHub 按星星收藏,鼓勵創作。
⇒ GitHub 專案連結
沒有留言:
張貼留言