【從零開始學 Flutter 程式設計】傳遞整包資料

【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

傳遞整包資料

我們這次範例有兩個頁面,一個是 MyHomePage(首頁),另一個是 BPage (B頁)。我們將新增一個 Product 資料類別,此類別資料有四個資料欄位,分別是產品名稱、內容、售價和庫存量。透過此資料類別,將整包資料傳遞到B頁。

定義一個資料類別

定義 Product 資料類別,透過這個資料類別來傳遞整包資料
class Product {
  String name;
  String desc;
  int price;
  int stock;

  Product(this.name, this.desc, this.price,this.stock);
}

新增一筆產品類別的測試資料

Product product = new Product('產品名稱xxx', '產品內容xxx', 100, 66);

透過 Navigator.push ,塞進欲帶過去B頁的資料

 Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => BPage(product: product)),
            );

定義接收的資料欄位

final Product product;

BPage({Key key, this.product}) : super(key: key);

獲取首頁帶過來的資料

${product.name}
${product.desc}
${product.price}
${product.stock}

執行畫面

  • 首頁
  • B頁

完整程式碼

純粹方便教學展示用,實際上不會全部塞在一個 「main.dart」 檔案裡。應該分成三個檔案,分別是:「main.dart」、「b_page.dart」、「product.dart」。
import 'package:flutter/material.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 StatelessWidget {
  Product product = new Product('產品名稱xxx', '產品內容xxx', 100, 66);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('跳到B頁'),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => BPage(product: product)),
          );
        },
      ),
    );
  }
}

class BPage extends StatelessWidget {
  final Product product;

  BPage({Key key, this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是 B 頁'),
      ),
      body: Column(
        children: <Widget>[
          Text('產品名稱:${product.name}'),
          Text('產品描述:${product.desc}'),
          Text('產品售價:${product.price}'),
          Text('產品庫存:${product.stock}'),
          RaisedButton(
            child: Text('返回首頁'),
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

class Product {
  //產品名稱
  String name;

  //產品描述
  String desc;

  //產品售價
  int price;

  //產品庫存
  int stock;

  Product(this.name, this.desc, this.price, this.stock);
}

那這次的課程就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉!!!掰掰~

這個網誌中的熱門文章

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

nano 文字編輯器

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

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

Android Studio 歷代版本下載點