Flutter | 工程结构

2020-09-17  本文已影响0人  清無

MVVM => MWPP

Model、Widgets、Pages、Provides

Widget 相当于各个UIKit中的小组件，如UILabel、UIButton等，然后组合成一个大的View(Widget)，再放入Controller(Page)中，通过Provide(ViewModel)进行不同组件间的通信（数据共享）。

class GoodsListGridTile extends MaterialWidgets {
    GoodsItem item;
    build: (context){
        return Container(
            padding: EdgeInsets.all(10),
            child: Column(
                children: <Widgets>[
                    _goodsImage(),
                    _goodsTitle(),
                    _goodsPrice(),
                    _goodsTags()
                ]
            )
        );
    }
    
    // 商品标签
    Widget _goodsTags()
    {
        return Container(
            margin: EdgeInsets.only(top: 5)
            child: Text(
                    '${item.tags}',
          style: TextStyle(
            fontSize: 11
             )
        );
    }
    
    // 商品价格
    Widget _goodsPrice()
    {
        return Container(
            margin: EdgeInsets.only(top:5)
            child: Row(
                children: [
                    Text(
                    '${item.salePrice}',
          style: TextStyle(
            fontSize: 16
             ),
                    ),
                    Text(
                    '${item.originPrice}',
          style: TextStyle(
            fontSize: 13
             ),
                    )
                ]
            )
        );
    }
    
    // 商品标题
    Widget _goodsTitle()
    {
        return Container(
            margin: EdgeInsets.only(top:5)
            child: Text(
                '${item.goodsTitle}',
                style: TextStyle(
                    fontSize: 16
                ),
            )
        );
    }
    
    // 商品图
    Widget _goodsImage()
    {
        // 封面图
        Widget _goodsImage = Image.network(item.goodsImageUrl);
        // 已售罄
        Widget _soldOutCover = Image('soldout.png');
        if(item.isSoldOut){
            return Stack(
                _goodsImage,
                _soldOutCover,
            );
        }
        return _goodsImage;
    }
}
上一篇下一篇

猜你喜欢

热点阅读