更新背景图切换显示

lib/pages/main_page/main_page.dart

@@ -3,7 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 import 'package:zhiying_base_widget/pages/main_page/main_page_bloc.dart';
-import 'package:zhiying_base_widget/pages/main_page/main_page_notifier.dart';
+import 'package:zhiying_base_widget/pages/main_page/notifier/main_page_bg_notifier.dart';
+import 'package:zhiying_base_widget/pages/main_page/notifier/main_page_notifier.dart';
+import 'package:zhiying_base_widget/widgets/others/mine_header_bg_widget.dart';
 import 'package:zhiying_comm/util/base_bloc.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 
@@ -24,8 +26,18 @@ class _MainPageState extends State<MainPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Color(0xfff9f9f9),
-      body: ChangeNotifierProvider(
-        create: (context) => MainPageNotifier(),
+//      body: ChangeNotifierProvider(
+//        create: (context) => MainPageNotifier(),
+//        child: BlocProvider<MainPageBloc>(
+//          bloc: MainPageBloc(),
+//          child: _MainPageContainer(widget.data),
+//        ),
+//      ),
+      body: MultiProvider(
+        providers: [
+          ChangeNotifierProvider.value(value: MainPageNotifier()),
+          ChangeNotifierProvider.value(value: MainPageBgNotifier()),
+        ],
         child: BlocProvider<MainPageBloc>(
           bloc: MainPageBloc(),
           child: _MainPageContainer(widget.data),
@@ -96,9 +108,20 @@ class _MainPageContainerState extends State<_MainPageContainer> {
               header: WaterDropHeader(),
               controller: _refreshController,
               onLoading: _onLoading,
-              child: CustomScrollView(
-                controller: _controller,
-                slivers: _createContent(context),
+              child: Container(
+                width: double.infinity,
+                child: Stack(
+                  fit: StackFit.passthrough,
+                  children: <Widget>[
+                    MineHeaderBgWidget(
+                      controller: _controller,
+                    ),
+                    CustomScrollView(
+                      controller: _controller,
+                      slivers: _createContent(context),
+                    )
+                  ],
+                ),
               ),
             ));
       },

lib/pages/main_page/notifier/main_page_bg_notifier.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class MainPageBgNotifier with ChangeNotifier {
+  Widget toWidget = Container();
+
+  void switchBg(Widget toWidget) {
+    this.toWidget = toWidget;
+    notifyListeners();
+  }
+}

lib/pages/main_page/main_page_notifier.dart → lib/pages/main_page/notifier/main_page_notifier.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 class MainPageNotifier with ChangeNotifier {
   bool scrollEnd = false;
 
+  // 加载更多数据
   void loadMore() {
     scrollEnd = true;
     notifyListeners();

lib/register.dart

@@ -5,6 +5,7 @@ import 'package:zhiying_base_widget/widgets/home_banner/home_banner_creater.dart
 import 'package:zhiying_base_widget/widgets/home_goods/home_goods_creater.dart';
 import 'package:zhiying_base_widget/widgets/home_quick_entry/home_quick_entry_creater.dart';
 import 'package:zhiying_base_widget/widgets/home_slide_banner/home_slide_banner_creater.dart';
+import 'package:zhiying_base_widget/widgets/mine_header/mine_header_creater.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 
 class BaseWidgetRegister {
@@ -38,7 +39,7 @@ class BaseWidgetRegister {
     WidgetFactory.regist('index_banner_two', HomeBannerCreater());
 
     // ==================== 个人中心
-//    WidgetFactory.regist('index_title', MineHeaderCreater());
+    WidgetFactory.regist('index_title', MineHeaderCreater());
 //    WidgetFactory.regist('index_search', MineHeaderBgCreater());
 //    WidgetFactory.regist('index_search', MineQuickEntryCreater());
   }

lib/widgets/home_goods/home_goods.dart

@@ -2,7 +2,7 @@ import 'package:event_bus/event_bus.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:zhiying_base_widget/pages/main_page/main_page_notifier.dart';
+import 'package:zhiying_base_widget/pages/main_page/notifier/main_page_notifier.dart';
 import 'package:zhiying_base_widget/widgets/home_goods/bloc/home_goods_bloc.dart';
 import 'package:zhiying_base_widget/widgets/home_goods/home_goods_creater.dart';
 import 'package:zhiying_base_widget/widgets/home_goods/home_goods_item.dart';

lib/widgets/home_slide_banner/home_slide_banner.dart

@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_swiper/flutter_swiper.dart';
-import 'bloc/bloc.dart';
+import 'package:provider/provider.dart';
+import 'package:zhiying_base_widget/pages/main_page/notifier/main_page_bg_notifier.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 
+import 'bloc/bloc.dart';
 import 'bloc/home_slide_banner_repository.dart';
 import 'home_slide_banner_sk.dart';
 import 'model/home_slide_banner_model.dart';
@@ -24,7 +26,9 @@ class _HomeSlideBannerState extends State<HomeSlideBanner> {
   @override
   Widget build(BuildContext context) {
     return BlocProvider<HomeSlideBannerBloc>(
-      create: (_) => HomeSlideBannerBloc(repository: HomeSlideBannerRepository())..add(HomeBannerInitEvent(model: widget?.model)),
+      create: (_) =>
+          HomeSlideBannerBloc(repository: HomeSlideBannerRepository())
+            ..add(HomeBannerInitEvent(model: widget?.model)),
       child: HomeSlideBannerContainer(),
     );
   }
@@ -32,7 +36,8 @@ class _HomeSlideBannerState extends State<HomeSlideBanner> {
 
 class HomeSlideBannerContainer extends StatefulWidget {
   @override
-  _HomeSlideBannerContainerState createState() => _HomeSlideBannerContainerState();
+  _HomeSlideBannerContainerState createState() =>
+      _HomeSlideBannerContainerState();
 }
 
 class _HomeSlideBannerContainerState extends State<HomeSlideBannerContainer> {
@@ -77,12 +82,21 @@ class _HomeSlideBannerContainerState extends State<HomeSlideBannerContainer> {
       child: Swiper(
         itemBuilder: (BuildContext context, int index) {
           return Container(
-            color: Colors.green,
+            color: Colors.primaries[index % Colors.primaries.length],
           );
         },
         itemCount: datas?.length ?? 0,
         onTap: (index) => _itemOnClick(datas[index]),
         pagination: _SwiperCustomPagination(datas?.length ?? 0),
+        onIndexChanged: (index) {
+          print('切换下一页');
+          Provider.of<MainPageBgNotifier>(context, listen: false)
+              .switchBg(Container(
+            width: double.infinity,
+            height: 200,
+            color: Colors.primaries[(index + 2) % Colors.primaries.length],
+          ));
+        },
       ),
     );
   }
@@ -94,7 +108,8 @@ class _HomeSlideBannerContainerState extends State<HomeSlideBannerContainer> {
       list.add(i);
     }
 
-    return SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config) {
+    return SwiperCustomPagination(
+        builder: (BuildContext context, SwiperPluginConfig config) {
       return Align(
         alignment: Alignment(0.0, 0.9),
         child: Row(
@@ -103,10 +118,13 @@ class _HomeSlideBannerContainerState extends State<HomeSlideBannerContainer> {
           children: list.map((index) {
             var borderRadius;
             if (index == 0) {
-              borderRadius = BorderRadius.only(topLeft: Radius.circular(2), bottomLeft: Radius.circular(2));
+              borderRadius = BorderRadius.only(
+                  topLeft: Radius.circular(2), bottomLeft: Radius.circular(2));
             }
             if (index == list.length - 1) {
-              borderRadius = BorderRadius.only(topRight: Radius.circular(2), bottomRight: Radius.circular(2));
+              borderRadius = BorderRadius.only(
+                  topRight: Radius.circular(2),
+                  bottomRight: Radius.circular(2));
             }
 
             if (index == config.activeIndex) {
@@ -117,7 +135,10 @@ class _HomeSlideBannerContainerState extends State<HomeSlideBannerContainer> {
               height: 4,
               width: 25,
               decoration: BoxDecoration(
-                  borderRadius: borderRadius, color: index == config.activeIndex ? HexColor.fromHex('#FF4242') : HexColor.fromHex('#FFFFFF')),
+                  borderRadius: borderRadius,
+                  color: index == config.activeIndex
+                      ? HexColor.fromHex('#FF4242')
+                      : HexColor.fromHex('#FFFFFF')),
             );
           }).toList(),
         ),

lib/widgets/home_slide_banner/home_slide_banner_creater.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
+
 import 'home_slide_banner.dart';
 import 'home_slide_banner_sk.dart';
 
@@ -14,6 +15,8 @@ class HomeSlideBannerCreater extends WidgetCreater {
 
   @override
   List<Widget> createWidgets(Map<String, dynamic> model) {
-    return [HomeSlideBanner(model)];
+    return [
+      HomeSlideBanner(model),
+    ];
   }
 }

lib/widgets/mine_header/mine_header.dart

@@ -13,7 +13,7 @@ class MineHeaderDelegate extends SliverPersistentHeaderDelegate {
   @override
   Widget build(
       BuildContext context, double shrinkOffset, bool overlapsContent) {
-    print('${shrinkOffset.toString()}');
+//    print('${shrinkOffset.toString()}');
     double percent = shrinkOffset / _height;
     print('${percent.toString()}');
     return MineHeader(Colors.red.withOpacity(percent));

lib/widgets/others/mine_header_bg_creater.dart

@@ -1,12 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:zhiying_base_widget/widgets/others/mine_header_bg_widget.dart';
-import 'package:zhiying_comm/zhiying_comm.dart';
-
-class MineHeaderBgCreater extends WidgetCreater {
-  @override
-  List<Widget> createWidgets(Map<String, dynamic> model) {
-    return [
-      MineHeaderBgWidget(),
-    ];
-  }
-}

lib/widgets/others/mine_header_bg_widget.dart

@@ -1,70 +1,111 @@
-import 'dart:async';
-
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:zhiying_base_widget/pages/main_page/notifier/main_page_bg_notifier.dart';
 
 class MineHeaderBgWidget extends StatefulWidget {
+  final ScrollController controller;
+
+  const MineHeaderBgWidget({Key key, this.controller}) : super(key: key);
+
   @override
   _MineHeaderBgWidgetState createState() => _MineHeaderBgWidgetState();
 }
 
 class _MineHeaderBgWidgetState extends State<MineHeaderBgWidget> {
   int zIndex = 0;
-
-//  List<String> list = ['ff0000', '00ff00', '0000ff', 'ffff00'];
-  List<String> imageUrls = [
-    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=2aa824f43d4945dbeca31d5ccc587567&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
-    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=c082ab4b39f0bc45e8cad60447db4ae2&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
-    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=b7535e61ed661806647bf1070e74f883&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3204887199%2C3790688592%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D4610%26h%3D2968',
-    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=3b381359676404f5e42f6a663a0139f1&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D3363001160%2C1163944807%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D830',
-  ];
-  Timer timer;
-
-  //setInterval控制当前动画元素的下标，实现动画轮播
-  autoPlay() {
-    var second = const Duration(seconds: 2);
-    timer = Timer.periodic(second, (t) {
-      setState(() {
-        zIndex = (++zIndex) % imageUrls.length;
-      });
-    });
-  }
+  double _offsetY = 0;
+  double _height = 300;
+  _MineHeaderBgContainer _content;
 
   @override
   void initState() {
     super.initState();
-    timer = Timer(Duration(seconds: 2), autoPlay);
+    _content = _MineHeaderBgContainer();
+
+    if (widget.controller != null) {
+      widget.controller.addListener(() {
+        if (widget.controller.offset > _height) {
+          // 减少重绘
+          return;
+        }
+        _offsetY = -widget.controller.offset;
+        if (_offsetY > 0) {
+          _offsetY = 0;
+        }
+        setState(() {});
+      });
+    }
   }
 
   @override
   void dispose() {
-    if (timer != null) timer.cancel();
     super.dispose();
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    print('didChangeDependencies');
+
+//    if (isNeedLoadMore && _provider != '') {
+//      print('HomeGoods loadmore...');
+//      _bloc.loadMore(_provider);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    print('mmine_hider_bg_widget build');
+    return Transform.translate(
+      offset: Offset(0, _offsetY),
+      child: _content,
+    );
+  }
+
+//  @override
+//  Widget build(BuildContext context) {
+//    return Container(
+//        height: 300,
+//        width: double.infinity,
+//        child: Stack(
+//          children: imageUrls
+//              .asMap()
+//              .keys
+//              .map<Widget>((i) => AnimatedOpacity(
+//                    curve: Curves.easeIn,
+//                    duration: Duration(milliseconds: 1600),
+//                    opacity: i == zIndex ? 1 : 0,
+//                    child: Container(
+////                          color: Color(int.parse(list[i], radix: 16))
+////                              .withAlpha(255),
+//                      child: CachedNetworkImage(
+//                        imageUrl: imageUrls[i],
+//                        fit: BoxFit.fill,
+//                      ),
+//                      height: 300, //100%
+//                    ),
+//                  ))
+//              .toList(),
+//        ));
+//  }
+}
+
+class _MineHeaderBgContainer extends StatefulWidget {
+  @override
+  _MineHeaderBgContainerState createState() => _MineHeaderBgContainerState();
+}
+
+class _MineHeaderBgContainerState extends State<_MineHeaderBgContainer> {
   @override
   Widget build(BuildContext context) {
-    return Container(
-        height: 300,
-        width: double.infinity,
-        child: Stack(
-          children: imageUrls
-              .asMap()
-              .keys
-              .map<Widget>((i) => AnimatedOpacity(
-                    curve: Curves.easeIn,
-                    duration: Duration(milliseconds: 1600),
-                    opacity: i == zIndex ? 1 : 0,
-                    child: Container(
-//                          color: Color(int.parse(list[i], radix: 16))
-//                              .withAlpha(255),
-                      child: CachedNetworkImage(
-                        imageUrl: imageUrls[i],
-                      ),
-                      height: 300, //100%
-                    ),
-                  ))
-              .toList(),
-        ));
+    print('_MineHeaderBgContainerState build');
+    return Consumer<MainPageBgNotifier>(builder: (context, model, widget) {
+      return Stack(
+        fit: StackFit.passthrough,
+        overflow: Overflow.clip,
+        children: <Widget>[
+          model.toWidget ?? Container(),
+        ],
+      );
+    });
   }
 }