diff --git a/lib/pages/home_page/home_page.dart b/lib/pages/home_page/home_page.dart index e3d9b4a..fd0fa13 100644 --- a/lib/pages/home_page/home_page.dart +++ b/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>>( stream: _tabBloc.outData, builder: (BuildContext context, AsyncSnapshot snapshot) { diff --git a/lib/pages/main_page/main_page.dart b/lib/pages/main_page/main_page.dart index 06c34d1..c5e4c92 100644 --- a/lib/pages/main_page/main_page.dart +++ b/lib/pages/main_page/main_page.dart @@ -87,6 +87,7 @@ class _MainPageContainerState extends State { type: _type, isSliver: true, model: Map.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; diff --git a/lib/register.dart b/lib/register.dart index e8dabfb..7471150 100644 --- a/lib/register.dart +++ b/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()); } } diff --git a/lib/widgets/home_quick_entry/cached_network_image_util.dart b/lib/widgets/home_quick_entry/cached_network_image_util.dart new file mode 100644 index 0000000..240c89e --- /dev/null +++ b/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, + ); + } +} + diff --git a/lib/widgets/home_quick_entry/home_quick_entry.dart b/lib/widgets/home_quick_entry/home_quick_entry.dart new file mode 100644 index 0000000..21e8125 --- /dev/null +++ b/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: [ + 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: [ + // 图片 + 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', + ), + ); + } +} diff --git a/lib/widgets/home_quick_entry/home_quick_entry_creater.dart b/lib/widgets/home_quick_entry/home_quick_entry_creater.dart new file mode 100644 index 0000000..dc262fd --- /dev/null +++ b/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 createSkeleton(Map model) { + return [HomeQuickEntrySkeleton()]; + } + + @override + List createWidgets(Map model) { + return [HomeQuickEntryWidget()]; + } + + +} \ No newline at end of file diff --git a/lib/widgets/home_quick_entry/home_quick_entry_sk.dart b/lib/widgets/home_quick_entry/home_quick_entry_sk.dart new file mode 100644 index 0000000..4f3e285 --- /dev/null +++ b/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: [ + // 图片 + 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,), + ], + ), + )); + } +}