From 6b0908a242df44de6e7a743708423b4fe14352c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=8D=8E=E8=BD=A9?= <646903573@qq.com> Date: Sat, 26 Sep 2020 11:37:14 +0800 Subject: [PATCH] =?UTF-8?q?1.=E7=83=AD=E6=A6=9C=20-=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=83=AD=E6=A6=9C=E5=9F=BA=E6=9C=AC=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hot_ranking_page/hot_ranking_page.dart | 24 ++ .../hot_ranking_page_bloc.dart | 44 ++++ lib/widgets/hot_ranking/hot_ranking_bloc.dart | 44 ++++ .../hot_ranking/hot_ranking_container.dart | 91 ++++++++ .../hot_ranking_goods/hot_ranking_goods.dart | 218 ++++++++++++++++++ .../hot_ranking_model/hot_ranking_model.dart | 8 + lib/widgets/hot_ranking/hot_ranking_sk.dart | 85 +++++++ lib/widgets/hot_ranking/hot_test.dart | 20 ++ 8 files changed, 534 insertions(+) create mode 100644 lib/pages/hot_ranking_page/hot_ranking_page.dart create mode 100644 lib/pages/hot_ranking_page/hot_ranking_page_bloc.dart create mode 100644 lib/widgets/hot_ranking/hot_ranking_bloc.dart create mode 100644 lib/widgets/hot_ranking/hot_ranking_container.dart create mode 100644 lib/widgets/hot_ranking/hot_ranking_goods/hot_ranking_goods.dart create mode 100644 lib/widgets/hot_ranking/hot_ranking_model/hot_ranking_model.dart create mode 100644 lib/widgets/hot_ranking/hot_ranking_sk.dart create mode 100644 lib/widgets/hot_ranking/hot_test.dart diff --git a/lib/pages/hot_ranking_page/hot_ranking_page.dart b/lib/pages/hot_ranking_page/hot_ranking_page.dart new file mode 100644 index 0000000..f1262af --- /dev/null +++ b/lib/pages/hot_ranking_page/hot_ranking_page.dart @@ -0,0 +1,24 @@ +import 'package:flutter/material.dart'; + +class HotRankingPage extends StatefulWidget { + @override + _HotRankingPageState createState() => _HotRankingPageState(); +} + +class _HotRankingPageState extends State { + @override + Widget build(BuildContext context) { + print('hot_ranking_page build'); + + + // + // List contentWidgets = tabs.map((item) { + // BaseTabModel model = BaseTabModel.fromJson(item); + // return PageFactory.create(model.skipIdentifier, item); + // }).toList(); + // if (_currentIndex >= contentWidgets.length) { + // _currentIndex = 0; + // } + return Scaffold(); + } +} diff --git a/lib/pages/hot_ranking_page/hot_ranking_page_bloc.dart b/lib/pages/hot_ranking_page/hot_ranking_page_bloc.dart new file mode 100644 index 0000000..724f5e6 --- /dev/null +++ b/lib/pages/hot_ranking_page/hot_ranking_page_bloc.dart @@ -0,0 +1,44 @@ +import 'dart:async'; + +import 'package:zhiying_comm/util/base_bloc.dart'; +import 'package:zhiying_comm/zhiying_comm.dart'; + +class HotRankingPage extends BlocBase { + List> _pageData = List(); + + StreamController>> _dataController = + StreamController>>(); + + Stream>> get outData => _dataController.stream; + + @override + void dispose() { + _dataController.close(); + _dataController = null; + } + + void loadData(int id) { + NetUtil.request('/api/v1/mod', + method: NetMethod.POST, + params: Map.from({ + 'ids': [id] + }), onCache: (data) { + _loadData(id, data); + }, onSuccess: (data) { + _loadData(id, data); + }); + } + + void _loadData(int id, dynamic data) { + String key = id.toString(); + Map json = Map.from(data); + if (json.containsKey(key)) { + List list = json[key]; + _pageData = list.map((item) { + return Map.from(item); + }).toList(); + } + + _dataController.add(_pageData); + } +} diff --git a/lib/widgets/hot_ranking/hot_ranking_bloc.dart b/lib/widgets/hot_ranking/hot_ranking_bloc.dart new file mode 100644 index 0000000..b65ffb5 --- /dev/null +++ b/lib/widgets/hot_ranking/hot_ranking_bloc.dart @@ -0,0 +1,44 @@ +import 'dart:async'; + +import 'package:zhiying_comm/util/base_bloc.dart'; +import 'package:zhiying_comm/zhiying_comm.dart'; + +class HotRankingBloc extends BlocBase { + List> _pageData = List(); + + StreamController>> _dataController = + StreamController>>(); + + Stream>> get outData => _dataController.stream; + + @override + void dispose() { + _dataController.close(); + _dataController = null; + } + + void loadData(int id) { + NetUtil.request('/api/v1/mod', + method: NetMethod.POST, + params: Map.from({ + 'ids': [id] + }), onCache: (data) { + _loadData(id, data); + }, onSuccess: (data) { + _loadData(id, data); + }); + } + + void _loadData(int id, dynamic data) { + String key = id.toString(); + Map json = Map.from(data); + if (json.containsKey(key)) { + List list = json[key]; + _pageData = list.map((item) { + return Map.from(item); + }).toList(); + } + + _dataController.add(_pageData); + } +} diff --git a/lib/widgets/hot_ranking/hot_ranking_container.dart b/lib/widgets/hot_ranking/hot_ranking_container.dart new file mode 100644 index 0000000..41984ba --- /dev/null +++ b/lib/widgets/hot_ranking/hot_ranking_container.dart @@ -0,0 +1,91 @@ +import 'package:flutter/material.dart'; +import 'package:zhiying_base_widget/widgets/hot_ranking/hot_ranking_bloc.dart'; +import 'package:zhiying_base_widget/widgets/hot_ranking/hot_ranking_goods/hot_ranking_goods.dart'; +import 'package:zhiying_base_widget/widgets/hot_ranking/hot_ranking_sk.dart'; + +class HotRankingContainer extends StatefulWidget { + final Map data; + + const HotRankingContainer({Key key, this.data}) : super(key: key); + + @override + _HotRankingState createState() => _HotRankingState(); +} + +class _HotRankingState extends State + with TickerProviderStateMixin { + HotRankingBloc _bloc; + TabController _tabController; + + @override + void initState() { + _bloc = HotRankingBloc(); + super.initState(); + } + + _buildTabs() { + List listWidget = List(); + for (int index = 0; index < 4; index++) { + listWidget.add(Tab( + text: "hahah", + )); + } + return listWidget; + } + + @override + void dispose() { + _tabController.dispose(); + super.dispose(); + } + + ///构建 + void createTabController() { + _tabController = TabController(length: 4, vsync: this); + } + + ///构建TabView + _buildTabView() { + List listWidget = List(); + for (var index = 0; index < 4; index++) { + listWidget.add(ListView.builder( + padding: EdgeInsets.all(0), + itemCount: 10, + itemBuilder: (context, index) { + return Container( + child: HotRankingGoods(), + ); + })); + } + return listWidget; + } + + @override + Widget build(BuildContext context) { + + return StreamBuilder( + stream: _bloc.outData, + builder: (context, snapshot) { + if (snapshot.data != null) { + return HotRankingSkeleton(); + } else { + createTabController(); + return Container( + child: Column( + children: [ + TabBar( + controller: _tabController, + isScrollable: true, + tabs: _buildTabs(), + ), + Expanded( + child: TabBarView( + controller: _tabController, + children: _buildTabView())) + ], + ), + ); + } + }); + } +} diff --git a/lib/widgets/hot_ranking/hot_ranking_goods/hot_ranking_goods.dart b/lib/widgets/hot_ranking/hot_ranking_goods/hot_ranking_goods.dart new file mode 100644 index 0000000..901497c --- /dev/null +++ b/lib/widgets/hot_ranking/hot_ranking_goods/hot_ranking_goods.dart @@ -0,0 +1,218 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:zhiying_base_widget/widgets/home/home_quick_entry/cached_network_image_util.dart'; +import 'package:zhiying_comm/zhiying_comm.dart'; +import 'package:cached_network_image/cached_network_image.dart'; + +class HotRankingGoods extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Stack( + children: [ + Container( + padding: EdgeInsets.all(15.w), + margin: + EdgeInsets.only(top: 8.w, bottom: 8.w, left: 25.w, right: 25.w), + decoration: BoxDecoration( + color: Colors.white, borderRadius: BorderRadius.circular(15.w)), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 254.w, + height: 254.w, + color: Colors.amber, + ), + Expanded( + child: Container( + margin: EdgeInsets.only(left: 20.w), + child: Column( + mainAxisSize: MainAxisSize.max, + children: [ + Container( + height: 70.h, + child: Row( + children: [ + Expanded( + child: RichText( + overflow: TextOverflow.ellipsis, + maxLines: 2, + text: TextSpan(children: [ + WidgetSpan( + child: Container( + decoration: BoxDecoration( + color: Colors.red, + borderRadius: + BorderRadius.circular(4)), + child: Padding( + padding: EdgeInsets.only( + left: 4.w, right: 4.w), + child: Text( + "京东", + style: TextStyle( + color: HexColor.fromHex( + "#FFFFFF", + ), + fontSize: 18.sp), + ), + ), + )), + WidgetSpan( + child: SizedBox( + width: 4.h, + )), + TextSpan( + text: + "Segway Ninebot mini Pro九号平衡车智能代步...", + style: TextStyle( + color: Colors.black, + fontSize: 30.sp)) + ]))) + ], + ), + ), + Row( + children: [ + Container( + margin: EdgeInsets.only(top: 4, bottom: 4), + decoration: BoxDecoration(color: Colors.red), + child: Padding( + padding: const EdgeInsets.only( + left: 8, right: 8, top: 2, bottom: 2), + child: Text( + "50元券", + style: TextStyle( + color: Colors.white, fontSize: 22.sp), + ), + ), + ), + SizedBox( + width: 10.sp, + ), + Container( + margin: EdgeInsets.only(top: 4, bottom: 4), + decoration: BoxDecoration(color: Colors.red), + child: Padding( + padding: const EdgeInsets.only( + left: 8, right: 8, top: 2, bottom: 2), + child: Text( + "50元券", + style: TextStyle( + color: Colors.white, fontSize: 22.sp), + ), + ), + ) + ], + ), + Padding( + padding: const EdgeInsets.only(top: 4, bottom: 4), + child: Row( + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Padding( + padding: EdgeInsets.only(bottom: 6.sp), + child: Text( + "¥", + style: + TextStyle(color: Colors.red, fontSize: 20.sp), + ), + ), + Text( + "1409", + style: + TextStyle(color: Colors.red, fontSize: 40.sp), + ), + SizedBox( + width: 6, + ), + Padding( + padding: EdgeInsets.only(bottom: 4.sp), + child: Text( + "¥1409", + style: TextStyle( + color: Colors.red, + fontSize: 22.sp, + decoration: TextDecoration.lineThrough), + ), + ), + ], + ), + ), + Row( + children: [ + Expanded( + child: Stack( + alignment: Alignment.centerLeft, + children: [ + Row( + children: [ + Expanded( + child: Container( + height: 40.w, + padding: EdgeInsets.only( + left: 64.w, + ), + margin: EdgeInsets.only(right: 20), + color: Colors.red, + child: Text( + "热销1231.1万件", + style: TextStyle( + color: Colors.white, fontSize: 22.sp), + ), + )) + ], + ), + Container( + color: Colors.amber, + width: 48.w, + height: 48.w, + child: CachedNetworkImage( + imageUrl: "", + width: 48.w, + height: 48.w, + placeholder: (context, _) => + Container(color: Colors.yellow), + fit: BoxFit.fill, + ), + ), + Align( + alignment: Alignment.centerRight, + child: Container( + decoration: BoxDecoration( + color: Colors.amber, + borderRadius: BorderRadius.circular(20)), + margin: EdgeInsets.only(right: 0), + child: Padding( + padding: EdgeInsets.only( + left: 16, right: 16, top: 4, bottom: 4), + child: Text( + "马上抢", + style: TextStyle( + color: Colors.white, fontSize: 26.sp), + ), + ), + ), + ) + ], + )) + ], + ) + ], + ), + )) + ], + ), + ), + Align( + alignment: Alignment.topLeft, + child: Container( + margin: EdgeInsets.only(left: 40.w, top: 8.h), + color: Colors.red, + height: 60.w, + width: 60.w, + ), + ) + ], + ); + } +} diff --git a/lib/widgets/hot_ranking/hot_ranking_model/hot_ranking_model.dart b/lib/widgets/hot_ranking/hot_ranking_model/hot_ranking_model.dart new file mode 100644 index 0000000..f65f05d --- /dev/null +++ b/lib/widgets/hot_ranking/hot_ranking_model/hot_ranking_model.dart @@ -0,0 +1,8 @@ +class HotRankingModel{ + ResHotRankingModel resHotRankingModel; +} + + +class ResHotRankingModel{ + +} \ No newline at end of file diff --git a/lib/widgets/hot_ranking/hot_ranking_sk.dart b/lib/widgets/hot_ranking/hot_ranking_sk.dart new file mode 100644 index 0000000..9d73cee --- /dev/null +++ b/lib/widgets/hot_ranking/hot_ranking_sk.dart @@ -0,0 +1,85 @@ +import 'package:flutter/material.dart'; +import 'package:shimmer/shimmer.dart'; + +class HotRankingSkeleton extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Shimmer.fromColors( + baseColor: Colors.grey[300], + highlightColor: Colors.grey[100], + child: Column( + children: [ + Container( + width: double.infinity, + margin: EdgeInsets.all(16), + height: 48, + child: Row( + children: _buildTopRow(), + )), + Expanded( + child: Container( + child: Column( + children: _buildBottomListItem(), + ), + )) + ], + ), + ); + } + + _buildBottomListItem() { + List listWidget = List(); + for (var index = 0; index < 3; index++) { + listWidget.add(Container( + margin: EdgeInsets.only(left: 16,top: 10,bottom: 10), + child: Row( + children: [ + Container( + width: 127, + height: 127, + color: Colors.white, + ), + Container( + height: 127, + margin: EdgeInsets.only(left: 10), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + height: 40, + width: 200, + color: Colors.white, + ), + Container( + height: 30, + width: 100, + color: Colors.grey, + ), + Container( + height: 30, + width: 200, + color: Colors.grey, + ) + ], + ), + ) + ], + ), + )); + } + return listWidget; + } + + _buildTopRow() { + List listWidget = List(); + for (var index = 0; index < 5; index++) { + listWidget.add(Container( + width: 50, + color: Colors.white, + margin: EdgeInsets.all(10), + )); + } + return listWidget; + } +} diff --git a/lib/widgets/hot_ranking/hot_test.dart b/lib/widgets/hot_ranking/hot_test.dart new file mode 100644 index 0000000..2b2c64e --- /dev/null +++ b/lib/widgets/hot_ranking/hot_test.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'package:zhiying_base_widget/widgets/hot_ranking/hot_ranking_container.dart'; +import 'package:zhiying_base_widget/widgets/hot_ranking/hot_ranking_sk.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class HotTest extends StatefulWidget { + @override + _HotTestState createState() => _HotTestState(); +} + +class _HotTestState extends State { + @override + Widget build(BuildContext context) { + // 屏幕适配初始化 + ScreenUtil.init(context, width: 750, height: 1334); + return Scaffold( + body: HotRankingContainer(), + ); + } +}