Flutter實戰視頻-移動電商-62.購物車_首頁Provide化讓跳轉爲所欲爲

時間 2019-11-07

標籤 flutter 實戰視頻移動購物車首頁 provide 爲所欲爲欄目無線简体版

原文原文鏈接

62.購物車_首頁Provide化讓跳轉爲所欲爲

新建provide/currentIndex.dart

內容比較簡單，定義一個變量當前頁面的索引currentIndex，再定義一個方法改變它的值less

provide全局註冊main.dart

index_page.dart

引入provide和currentIndexProvideasync

而後把首頁的代碼先都註釋掉，以前咱們這個頁面是一個StateFul的widget，如今咱們要改爲靜態的原來的一些代碼也能夠用ide

下面開始重寫index頁面測試

寫build內的代碼ui

Scaffold的方法從原來註釋的代碼裏面複製過來，setstate的代碼註釋掉用不到了。咱們要用providespa

點擊事件，調用provide裏的改變當前索引值的方法3d

效果展現

測試頁面底部欄目的切換code

點擊詳情頁面的購物車按鈕，跳轉到購物車的頁面

pages/details_page/_bottom.dartblog

購物車的onTap事件索引

大R刷新，最終效果展現

最終代碼

provide/currentIndex.dart

import 'package:flutter/material.dart';

class CurrentIndexProvide with ChangeNotifier{
  int currentIndex=0;

  changeIndex(int newIndex){
    currentIndex=newIndex;
    notifyListeners();//通知
  }
}

pages/index_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../provide/currentIndex.dart';

class IndexPage extends StatelessWidget {
  
   final List<BottomNavigationBarItem> bottomTabs=[
      BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.home),//這裏使用IOS風格的
      title: Text('首頁')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.search),
      title: Text('分類')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.shopping_cart),
      title: Text('購物車')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.profile_circled),
      title: Text('會員中心')
    ) 
  ];
  final List<Widget> tabBodies=[
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
    return Provide<CurrentIndexProvide>(
      builder: (context,child,val){
        int currentIndex=Provide.value<CurrentIndexProvide>(context).currentIndex;
        return Scaffold(
          backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),//顏色固定死，比白色稍微灰一點
          bottomNavigationBar: BottomNavigationBar(
            type:BottomNavigationBarType.fixed,
            currentIndex: currentIndex,//當前索引值
            items: bottomTabs,
            onTap: (index){
              Provide.value<CurrentIndexProvide>(context).changeIndex(index);
            },
          ),
          body: IndexedStack(
            index: currentIndex,
            children: tabBodies,
          ),
        );
      },
    );
  }
}

View Code

pages/details_page/details_bottom.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart';
import '../../provide/currentIndex.dart';

class DetailsBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;//當前商品的詳情
    var goodsId=goodsInfo.goodsId;
    var goodsName=goodsInfo.goodsName;
    var count=1;//默認爲1
    var price=goodsInfo.presentPrice;
    var images=goodsInfo.image1;


    return Container(
      width: ScreenUtil().setWidth(750),
      color: Colors.white,
      height: ScreenUtil().setHeight(80),
      child: Row(
        children: <Widget>[
          InkWell(
            onTap: (){
              Provide.value<CurrentIndexProvide>(context).changeIndex(2);
              Navigator.pop(context);
            },
            child: Container(
              width: ScreenUtil().setWidth(110),
              alignment: Alignment.center,
              child: Icon(
                Icons.shopping_cart,
                size:35,//圖標沒有自適應 要是設置size的大小
                color: Colors.red,
              ),
            ),            
          ),
          InkWell(
            onTap: () async{
              await Provide.value<CartProvide>(context).save(goodsId, goodsName, count, price, images);
            },
            child: Container(
              alignment: Alignment.center,
              width: ScreenUtil().setWidth(320),//750 - 110 再除以2 評分
              height: ScreenUtil().setHeight(80),
              color: Colors.green,
              child: Text(
                '加入購物車',
                style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
              ),
            ),
          ),
          InkWell(
            onTap: () async{
              await Provide.value<CartProvide>(context).remove();
            },
            child: Container(
              alignment: Alignment.center,
              width: ScreenUtil().setWidth(320),//750 - 110 再除以2 評分
              height: ScreenUtil().setHeight(80),
              color: Colors.red,
              child: Text(
                '當即購買',
                style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
              ),
            ),
          )
        ],
      ),
    );
  }
}