flutter《女装商城》实战| 使用provider实现导航栏切换

思路：在app的根部初始化Provider，创建一个CurrentIndexProvide来监听当前currentIndex（表示当前页的index）的变化，当这个变量改变的时候，通知使用者，进行重绘，使用者应该包括body和NavigationItemBar；
1，创建带有监听变量的notifyier类CurrentIndexProvide

import 'package:flutter/cupertino.dart';

class CurrentIndexProvide with ChangeNotifier{
int currentIndex=0;
void changeIndex(int  newIndex){//当改变index的时候发起通知
  currentIndex=newIndex;
  notifyListeners();
}
}

2，初始化Provider，在MyApp之上进行初始化，全局监听，home的indexPage返回的是一个consumer，consumer指定重绘的范围

void main() {

  runApp(MultiProvider(child: MyApp(),providers: [//providers是一个singleChildWidget的list
    ChangeNotifierProvider.value(value: CurrentIndexProvide())//提供一个notifier
  ],));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,//右上角的debug标志去除
      title: KString.mainTitle,//女装商城
      theme: ThemeData(
        primaryColor: KColor.parimaryColor,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: IndexPage(),
    );
  }
}

3，使用currentIndex展示当前页面

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_shop/config/string.dart';
import 'package:flutter_app_shop/pages/cartPage.dart';
import 'package:flutter_app_shop/pages/categoryPage.dart';
import 'package:flutter_app_shop/pages/memberPage.dart';
import 'package:flutter_app_shop/provide/current_index_provide.dart';
import 'package:provider/provider.dart';

import 'homePage.dart';

class IndexPage extends StatelessWidget{
 final List<BottomNavigationBarItem> bottomBars=[BottomNavigationBarItem(icon: Icon(Icons.home),label:KString.homeTitle ),
  BottomNavigationBarItem(icon: Icon(Icons.person),label: KString.memberTitle),
  BottomNavigationBarItem(icon: Icon(Icons.category),label:KString.categoryTitle),
  BottomNavigationBarItem(icon: Icon(Icons.shopping_cart),label: KString.cartTitle)];
 final List<Widget> pages=[homePage(),memberPage(),categoryPage(),cartPage(),];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
   return Consumer<CurrentIndexProvide>(builder: (BuildContext context, CurrentIndexProvide value, Widget child){
    int currentIndex=Provider.of<CurrentIndexProvide>(context,listen: false).currentIndex;
    // return pages[currentIndex];
    return Scaffold(
     backgroundColor: Color.fromRGBO(244, 245, 255, 1.0),
     bottomNavigationBar:BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      items: bottomBars,
      currentIndex:currentIndex ,//表示当前页的标志应该作用在items的哪个index上
      onTap: (index){//当点击tab的时候改变currentIndex
       Provider.of<CurrentIndexProvide>(context,listen: false).changeIndex(index);//点击tab改变了currentIndex，通知widget改变
      },
     ) ,
     body: pages[currentIndex],
    );
   },
   );
  }

}

效果：点击对应的tab，切换对应的界面