iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
自我挑戰組

使用flutter建構Android和iOs APP系列 第 5

規劃檔案結構與state2 - product_control和products

繼續沿用前一天的標頭

lib
- main.dart
- product_control.dart
- product_manager.dart
- products.dart

https://ithelp.ithome.com.tw/upload/images/20181004/20111840Jci21lZrgW.png

https://ithelp.ithome.com.tw/upload/images/20181004/20111840larXj3Ev8K.jpg

  1. product_control.dart
import 'package:flutter/material.dart';

class ProductControl extends StatelessWidget {
  final Function addProduct;
  //定義一個function來接父層傳來的function
  ProductControl(this.addProduct);
  //從product_manager.dart的ProductControl後面的小括號傳進來的
  @override
    Widget build(BuildContext context) {
      return RaisedButton(
                color: Theme.of(context).primaryColor,
                //使用在main定義的primary顏色(此例為橘色)
                onPressed: () {
                  //按下按鈕後
                  addProduct('Sweet');
                  //把Sweet傳進去function,往上觸發去改變state
                  //寫在state裡面的_products就會加入一個元素
                  //此例為['Sweet']
                },
                child : Text('Add Product')
                //按鈕的文字
              );
    }
}
  1. products.dart
import 'package:flutter/material.dart';

class Products extends StatelessWidget {
  final List<String> products; 
  //定義一個products陣列
  Products(this.products); 
  //從父層去接_products
  Widget _buildProductItem(BuildContext context ,int index) {
    //一張卡片組件(一個商品) //除了傳入app基本資訊 //還要傳入目前跑到第幾圈
    return Card(
            child: Column(
              children: <Widget>[
                Image.asset('assets/food.jpg'),
                Text(products[index])
                //該陣列的那一圈的值
              ],
            )
          );
  }
  Widget _buildProductList() {
    Widget productCard;
    //定義一個組件變數
    if(products.length > 0){
      //若陣列有東西
      productCard = ListView.builder(
                      itemBuilder: _buildProductItem,
                      itemCount: products.length
                    );
      //變數就是一個listView組件使用builder方法
      //每一圈的組件(_buildProductItem)以及總共幾圈(products.length)
      //這樣就不用寫map了
    }else{
      productCard = Container();
      //不然就回傳空畫面
    }
    return productCard;
  }
  @override
    Widget build(BuildContext context) {
      return _buildProductList();
    }
}

實際按鈕情況


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


上一篇
規劃檔案結構與state1 - main和product_manager
下一篇
導覽列
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言