iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0

一樣的檔案架構
https://ithelp.ithome.com.tw/upload/images/20181007/20111840JS0A4f1Gc4.png

希望的流程是,進入商品細節頁面,然後按刪除,就回到商品列表,並把該商品刪除
如此gif

  1. pages/product.dart 刪除按鈕按下時,傳一個true到接下來的那一層
RaisedButton(
    child: Text('DELETE'),
    onPressed: () => Navigator.pop(context, true),
)
  1. products.dart
...
class Products extends StatelessWidget {
  final List<Map<String, String>> products;
  final Function deleteProduct;
  Products(this.products, {this.deleteProduct});
  //接到product_manager.dart那層傳來的function(因為要改變state,所以要在State組件裡面)
...
FlatButton(
    child: Text('Details'),
    onPressed: () => Navigator.push<bool>( 
    //bool是泛型型別,總之最後會得到一個bool值,因為第一項時已經寫了一個true
        context,
        MaterialPageRoute(
            builder: (BuildContext context) => ProductPage(
                products[index]['title'], products[index]['image']
            ),
        ),
    ).then((bool value) { //當上面那一層pop出去後,執行這段
        if (value) { //如果傳true進來
            deleteProduct(index);
            //刪除商品,並傳入商品的項次
        }
    }),
)
  1. product_manager.dart
...
  void _deleteProduct(int index) {
    setState(() {
      _products.removeAt(index);
    });
  }
...
Expanded(child: Products(_products, deleteProduct: _deleteProduct))


主題來源:
Learn Flutter & Dart to Build iOS & Android Apps


上一篇
Map資料格式(很像JS的Object)
下一篇
按上一頁時,不要刪掉商品
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言