【Flutter 程式設計入門實戰 30 天】Day 16:傳遞整包資料

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

哈囉~大家好,我是 KT ,今天實戰第十六天,KT 將為大家來介紹,如何傳遞整包資料。

傳遞整包資料

我們這次範例有兩個頁面,一個是 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」。

product.dart

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

  //產品描述
  String? desc;

  //產品價格
  int? price;

  //產品庫存
  int? stock;

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

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/product.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 StatelessWidget {
  final Product product =
  Product(name: "產品名稱xxx", desc: "產品內容xxx", price: 100, stock: 66);

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

b_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/product.dart';

class BPage extends StatelessWidget {
  final Product product;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是B頁'),
      ),
      body: Column(
        children: <Widget>[
          Text('name: ${product.name}'),
          Text('desc: ${product.desc}'),
          Text('price: ${product.price}'),
          Text('price: ${product.stock}')
        ],
      ),
    );
  }
}

那今天就介紹到這邊囉~

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

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

參考資料

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

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

這個網誌中的熱門文章

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

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

nano 文字編輯器

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

Android Studio 歷代版本下載點