【Flutter 程式設計入門實戰 30 天】Day 15:從B頁返回A頁,並傳回資料

【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第十五天,KT 將為大家來介紹,如何從A頁跳到B頁,並傳遞資料。

從B頁返回A頁,並傳回資料

我們這次範例有兩個頁面,一個是 MyHomePage(首頁),另一個是 BPage (B頁)。從首頁跳轉時,加入非同步 async、await 處理,等B頁返回資料。

加入非同步 async、await 關鍵程式碼

從首頁跳轉時,加入非同步 async、await 處理,等B頁返回資料,會將資料存進 result 變數裡面。

void goToBPage(BuildContext context) async {
    result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => BPage()),
    );
  }

B頁返回資料,關鍵程式碼

透過 Navigator.pop 方法,將要返回資料,放在 result 欄位,將資料送回去首頁。

 Navigator.pop(context, 'B頁資料');

執行畫面

  • 首頁

  • B頁

  • 從B頁返回首頁,更新文字標籤狀態

如果首頁採用 StatelessWidget 將不重繪文字標籤,將看不到變化,所以需要採用 StatefulWidget 狀態。

完整程式碼

main.dart

import 'package:flutter/material.dart';
import 'b_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HKT 線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var result = "沒有資料";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ElevatedButton(
          child: Text('跳到 B 頁'),
          onPressed: () {
            goToBPage(context);
          },
        ),
        Text('返回值:$result')
      ],
    );
  }

  void goToBPage(BuildContext context) async {
    var resultValue = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => BPage()),
    );

    setState(() {
      result = resultValue;
    });
  }
}

b_page.dart

import 'package:flutter/material.dart';

class BPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是 B 頁'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('返回首頁'),
          onPressed: () {
            Navigator.pop(context, 'B頁資料');
          },
        ),
      ),
    );
  }
}

那今天就介紹到這邊囉~

順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
https://www.freepik.com

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點