Merge branch 'master' of http://192.168.0.138:3000/FnuoOS_ZhiYing/zhiying_base_widget

lib/pages/home_page/home_page.dart

@@ -5,6 +5,7 @@ import 'package:zhiying_base_widget/pages/home_page/home_page_bloc.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 import 'package:zhiying_comm/util/base_bloc.dart';
 
+
 class HomePage extends StatefulWidget {
   HomePage({Key key}) : super(key: key);
 
@@ -45,6 +46,8 @@ class _HomePageContainerState extends State<_HomePageContainer> {
   @override
   Widget build(BuildContext context) {
     print('home_page build');
+    // 屏幕适配初始化
+    ScreenUtil.init(context, width: 750, height: 1334);
     return StreamBuilder<List<Map<String, dynamic>>>(
       stream: _tabBloc.outData,
       builder: (BuildContext context, AsyncSnapshot snapshot) {

lib/pages/main_page/main_page.dart

@@ -128,6 +128,7 @@ class _MainPageContainerState extends State<_MainPageContainer> {
         type: _type,
         isSliver: true,
         model: Map<String, dynamic>.from({'aaaaa': 'bbbb'})));
+    list.addAll(WidgetFactory.create('home_quick_entry', type: _type, isSliver: true));
     list.addAll(WidgetFactory.create('index_recommend_list',
         type: _type, isSliver: true));
     return list;

lib/register.dart

@@ -1,6 +1,7 @@
 import 'package:zhiying_base_widget/pages/main_page/main_page.dart';
 import 'package:zhiying_base_widget/widgets/home_goods/home_goods_creater.dart';
 import 'package:zhiying_base_widget/widgets/home_banner/home_banner_creater.dart';
+import 'package:zhiying_base_widget/widgets/home_quick_entry/home_quick_entry_creater.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 import 'package:zhiying_base_widget/pages/home_page/home_page.dart';
 
@@ -21,5 +22,7 @@ class BaseWidgetRegister {
   static void registWidgets() {
     WidgetFactory.regist('index_carousel', HomeBannerCreater());
     WidgetFactory.regist('index_recommend_list', GoodsListCreater());
+    // 首页快速入口
+    WidgetFactory.regist('home_quick_entry', HomeQuickEntryCreater());
   }
 }

lib/widgets/home_quick_entry/cached_network_image_util.dart

@@ -0,0 +1,18 @@
+
+import 'package:flutter/material.dart';
+
+///
+/// 图片工具类，隔离build
+///
+class CachedNetworkImageUtil extends StatelessWidget {
+  Widget child;
+  CachedNetworkImageUtil({this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return RepaintBoundary(
+      child: child,
+    );
+  }
+}
+

lib/widgets/home_quick_entry/home_quick_entry.dart

@@ -0,0 +1,205 @@
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_swiper/flutter_swiper.dart';
+import 'package:zhiying_comm/zhiying_comm.dart';
+
+///
+/// 首页的快速入口widget
+///
+class HomeQuickEntryWidget extends StatelessWidget {
+
+  var data  = [];
+
+  @override
+  Widget build(BuildContext context) {
+    int dataSize = 26; // 总数
+    int columSize = 5; // 列数
+    int rowSize = 2; // 行数
+
+    for(int i = 0; i < dataSize; i ++ ){
+      data.add('$i');
+    }
+
+    // 页数
+    int pageCount = data.length % (rowSize * columSize) == 0
+        ? data.length ~/ (rowSize * columSize)
+        : (data.length ~/ (rowSize * columSize)) + 1;
+
+    double containerHeight = 145.h * ( data.length >=  rowSize * columSize ? rowSize : (data.length / columSize).ceil()) + (rowSize == 1 ? 0 : 25.h);
+    double headHeight = 50.h ;
+
+    return Container(
+      margin: EdgeInsets.only(bottom: 25.h),
+      height: containerHeight + headHeight,
+      width: double.infinity,
+      child: Column(
+        children: <Widget>[
+          Container(
+            margin: EdgeInsets.symmetric(horizontal: 25.w),
+            height: headHeight,
+            color: Colors.green,
+          ),
+          Expanded(
+            child: Swiper(
+              itemHeight: 145.h,
+              containerHeight: double.infinity,
+              duration: 100,
+              scrollDirection: Axis.horizontal,
+              loop: false,
+              index: 0,
+              autoplay: false,
+              itemCount: pageCount, // 页数
+              itemBuilder: (BuildContext context, int index) {
+                return HomeQuickEntrySwiperItem(
+                  data: data,
+                  showDataSize: columSize * rowSize,
+                  page: index,
+                  columSize: columSize,
+                  rowSize: rowSize,
+                );
+              },
+              pagination: _SwiperCustomPagination(pageCount),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  // 自定义进度条
+  SwiperPlugin _SwiperCustomPagination(int pageCount){
+
+    List list = [];
+    for(int i = 0; i < pageCount; i ++){
+      list.add(i);
+    }
+
+    return SwiperCustomPagination(
+        builder: (BuildContext context, SwiperPluginConfig config){
+          return Align(
+            alignment: Alignment(0.0, 1),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: list.map((index) {
+                var borderRadius;
+                if (index == 0) {
+                  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));
+                }
+
+                if (index == config.activeIndex) {
+                  borderRadius = BorderRadius.all(Radius.circular(2));
+                }
+
+                return Container(
+                  height: 4,
+                  width: 25,
+                  decoration: BoxDecoration(
+                      borderRadius: borderRadius,
+                      color: index == config.activeIndex
+                          ? HexColor.fromHex('#FF4242')
+                          : HexColor.fromHex('#FFFFFF')),
+                );
+              }).toList(),
+            ),
+          );
+        }
+    );
+  }
+}
+
+///
+/// 快速入口一页的显示
+///
+class HomeQuickEntrySwiperItem extends StatelessWidget {
+  final List data;
+  final int page; // 当前的页数
+  final int showDataSize; // 显示的数据
+  final int columSize; // 列数
+  final int rowSize; // 行数
+
+  const HomeQuickEntrySwiperItem(
+      {this.page,
+      this.data,
+      this.showDataSize,
+      this.columSize,
+      this.rowSize});
+
+  @override
+  Widget build(BuildContext context) {
+
+    // 当前显示的个数
+    int itemCount = (data.length - page * showDataSize) >= showDataSize ? showDataSize : (data.length - page * showDataSize);
+
+    return GridView.builder(
+        cacheExtent: double.infinity,
+        scrollDirection: Axis.vertical,
+        shrinkWrap: true,
+        padding: const EdgeInsets.all(0),
+        reverse: false,
+        physics: NeverScrollableScrollPhysics(),
+        itemCount: itemCount,
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: columSize,
+          childAspectRatio: 1,
+          crossAxisSpacing: 0,
+          mainAxisSpacing: 25.h,
+        ),
+        itemBuilder: (context, i) {
+          return HomeQuickEntryItem(
+            data: data[  itemCount == showDataSize ?  page * showDataSize + i : page == 0 ? page + i : page * showDataSize + i ]
+          );
+        });
+  }
+}
+
+///
+/// 快速入口的样式
+///
+class HomeQuickEntryItem extends StatelessWidget {
+  var data;
+
+  HomeQuickEntryItem({this.data});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        // 图片
+        MyNetWorkImage(),
+        SizedBox(height: 10.h),
+        Text(
+          '京东爆款$data',
+          style:
+          TextStyle(color: HexColor.fromHex('#666666'), fontSize: 20.sp),
+        ),
+//          SizedBox(height: 25.h,)
+      ],
+    );
+  }
+}
+
+///
+/// 图片build 优化
+///
+class MyNetWorkImage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return RepaintBoundary(
+      child: CachedNetworkImage(
+        height: 80.h,
+        width: 80.h,
+        imageUrl: 'https://upload.jianshu.io/users/upload_avatars/665534/aff6ec240f60?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',
+      ),
+    );
+  }
+}

lib/widgets/home_quick_entry/home_quick_entry_creater.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:zhiying_base_widget/widgets/home_quick_entry/home_quick_entry.dart';
+import 'package:zhiying_base_widget/widgets/home_quick_entry/home_quick_entry_sk.dart';
+import 'package:zhiying_comm/zhiying_comm.dart';
+
+class HomeQuickEntryCreater extends WidgetCreater{
+
+  @override
+  List<Widget> createSkeleton(Map<String, dynamic> model) {
+    return [HomeQuickEntrySkeleton()];
+  }
+
+  @override
+  List<Widget> createWidgets(Map<String, dynamic> model) {
+    return [HomeQuickEntryWidget()];
+  }
+
+
+}

lib/widgets/home_quick_entry/home_quick_entry_sk.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+import 'package:zhiying_comm/zhiying_comm.dart';
+
+class HomeQuickEntrySkeleton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      height: 153,
+      child: GridView.builder(
+        physics: NeverScrollableScrollPhysics(),
+        gridDelegate:
+            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),
+        itemBuilder: (context, index) {
+          return HomeQuickEntrySkeletonItem(
+            index: index,
+          );
+        },
+        itemCount: 10,
+      ),
+    );
+  }
+}
+
+class HomeQuickEntrySkeletonItem extends StatelessWidget {
+  final int index;
+
+  const HomeQuickEntrySkeletonItem({this.index});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        alignment: Alignment.center,
+        child: Shimmer.fromColors(
+          baseColor: Colors.grey[300],
+          highlightColor: Colors.grey[100],
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              // 图片
+              Container(
+                decoration: BoxDecoration(
+                    color: Colors.white,
+                  borderRadius: BorderRadius.circular(40.h)
+                ),
+                height: 80.h,
+                width: 80.h,
+
+              ),
+              SizedBox(height: 10.h),
+
+//              Container(height: 10.h, width: 40.w, color: Colors.white,),
+            ],
+          ),
+        ));
+  }
+}