技術胖Flutter第四季-21導航的參數傳遞和接受-2

21導航的參數傳遞和接受-2

視頻地址

https://www.bilibili.com/video/av35800108/?p=22

博客地址：https://jspang.com/post/flutter4.html#toc-3d6

在onTap裏面寫事件：

跳轉到ProductDetail頁面把整個products當前的對象都傳過去了。

 

新建ProductDetail類

使用stlss快捷鍵生成

 

再寫上類名：ProductDetail 就能夠了

 

定義product變量。在構造函數內接收

 

糾正一個錯誤

首先這裏的ProductDetail要new出來一個對象，第二個是傳參數的時候，參數的key值也要寫出來，不要只傳了Value值過去

 

 

 

展現商品的詳情頁面。點擊箭頭能夠進行返回。

最終代碼

import 'package:flutter/material.dart';

class Product{
  final String title;
  final String description;
  Product(this.title,this.description);
}

void main(){
  runApp(MaterialApp(
    title: '導航的數據傳遞和接收',
    home:ProductList(
      products:List.generate(
        20,
         (i) => Product('wjw-商品$i','這是一個商品詳情，編號爲$i'))
    )
    ));
}
class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(
                context, 
                MaterialPageRoute(
                  builder: (context)=>new ProductDetail(product:products[index])
                )
              );
            },
            );
        },
      ),
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${product.title}'),),
      body: Center(child: Text('${product.description}'),),
    );
  }
}

最終代碼