From 15433de10ac1b17ee9eb5fcf93051f9a4150b70b Mon Sep 17 00:00:00 2001 From: laiiihz Date: Tue, 22 Sep 2020 15:28:29 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=9B=B4=E6=92=AD=E3=80=91=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E7=9B=B4=E6=92=AD=E5=88=97=E8=A1=A8=EF=BC=8C=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E5=88=97=E8=A1=A8=EF=BC=8C=E5=9B=BE=E6=96=87=E5=88=97?= =?UTF-8?q?=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/live/favorite.png | Bin 0 -> 1042 bytes assets/live/favorite_black.png | Bin 0 -> 1846 bytes assets/live/on_stream.png | Bin 0 -> 729 bytes assets/live/stream_play_back.png | Bin 0 -> 768 bytes lib/const/resource.dart | 12 + lib/pages/live/pages/discovery_page.dart | 16 +- lib/pages/live/sub_page/image_text_page.dart | 17 ++ lib/pages/live/sub_page/live_stream_page.dart | 269 ++++++++++++++++++ lib/pages/live/sub_page/video_page.dart | 101 +++++++ pubspec.lock | 14 + pubspec.yaml | 2 + 11 files changed, 430 insertions(+), 1 deletion(-) create mode 100644 assets/live/favorite.png create mode 100644 assets/live/favorite_black.png create mode 100644 assets/live/on_stream.png create mode 100644 assets/live/stream_play_back.png create mode 100644 lib/pages/live/sub_page/image_text_page.dart create mode 100644 lib/pages/live/sub_page/live_stream_page.dart create mode 100644 lib/pages/live/sub_page/video_page.dart diff --git a/assets/live/favorite.png b/assets/live/favorite.png new file mode 100644 index 0000000000000000000000000000000000000000..15e18074d7f454e9a3b49ac531365e68af87b50e GIT binary patch literal 1042 zcmV+t1nv8YP)FEDA`T?kq(M?@rBn|#fDgUon-5uuI1dP!mg$kd}!N%>yQqWh#h6;jrYptaI2N&%XPd%YC@(<*@gE?RCDrzO}x!w&($-9)N+K z2O=U2svmF%@Gx)>a074x_!0ORcn{bs>7=t55mx|%fro$zz>Pp}U?1=~unG7YI3g*U zW&XTOM8sI&Mc_W*vJ$Ee0B-?r0v7`>0aJl%OZ@)_wgPWR+TJOMh2JqoEz*)d=`wp-U_#WsB+zUJp+@9$!#ySps2`mD> z0FD8-08apq0M|oD{rwG0F-=8k45B}<78q}elgBxd{HEtwM40PYz?=;1^Zl8@)sp^e z^2}YpYrvg(_8~A`(vh04LAVZl;2QV~c+jaXE24-n1=E4~nY9<3MMM{(wXi+5fPUFGl18DKCTB~q@*8;Ag)X?nVGZT zch3V!A9NFlM>GB)z*=HeeWlm{9Rn;PhNNKKoPYeUds>o3tjm^lu(VM4yOVBD*t*rH zXhax*-`;?H-$0zk&FxYX5uUD-faUJE90xyT;s4tBR*j>41h5#ekofEuk9JAkBU-kI zu=HEj{X(8c9&XP{+S4pZBZ!L zM7U$#2V6|{aYau9J}sjrDYzf-jIcU715UlQ$5fPB>5dr@Uh$UX(qcacnk{KdvuF`9 z(c2R+Gy!-OcuvwcRq5*tgsCx*^_daJaz-AP;otY%*yQ&P-&MQIKF(U3xk#Vi~8LOS;-fC#c_l9i% zyOM&hS_NRgRza8=uW6>np8z(mXMX;wy#51t%V!Z literal 0 HcmV?d00001 diff --git a/assets/live/favorite_black.png b/assets/live/favorite_black.png new file mode 100644 index 0000000000000000000000000000000000000000..77ece928a7a78d00203ccde1808891037a25331a GIT binary patch literal 1846 zcmV-62g&$}P)vBVdl>g(L2oiHWB?E zz*9=8-9Zo>XyqN>_or*E=K=UOGk=$e&SmDa0sN1MhM4(JM6@|clD~I#b-hzAm*ZA? zT3WPNEM5TMW@i2YfcXHdV}!^DMDzy$4>R*`qbNEkvaah+Bcf}W`DOrD1DJXY9SMLz zB6>_~{Yb4=d*f)?qe01aT~Yb~fQtaw9mKF$X#L^Chi}j2atvTK5#1mj=s<^9^EIW^ ztzj6-=0#6)WI+Y;S^zZwvjJ!T?*Z7!%#Yc&{oJfsv;K47z=3IvMq_>)$KNNSMa+B- zfKx^k6767Snft8_;9(;AH#2XwZF{5RID^xtPd~VK@7_6a9A8O9;<*I?&IF(U3^TJ^ ztJSupup^+J=Ut<<{$vWn+2V6M~-YC7#R4tovwU7Kf|`|Uoi8nM)qZ9UMew5a=M3y zhkwewahBCc7n;>Y&g;>XbLM=lKgG1s+O_cPWQ59%W^Yj z%y^uc7l~CZ%UVpuVliUof=sq7t2+pSU$s+oB7XNguUl)~Z@g2JE9tKQE|m|qZC_BS zRQ_=yK-#S#j}9}Z7ypX_`d1)=k`KXbm-8BX03e!DqyF| z2gh+{c6!<;3tCQpqtV!B^nWZdx|^BLH?Ch$sZ^ewti?OgTPl^VisN{viP5(N^l4_k z#wfWbilRF@Q8-z$uIt_n;AaMOhq(SWNg&LEgG#AygkkvZWC4stujhGZX{{wGk<3lT z?NlffE+wL8089fQ!7CPha6A|FSRmTT$h!~V$MPZpI32)2X1-c1DuD9zEj3Dpi0Jxi zwfg6FN+;v@VzKyDW_}Vtm(eddNWPgp6$*u=MAVnbfZk4$WYOHYa|g@ivb?vGKFZ~? z+OucRe9N*VH#pbCrc@2R)oS&LCTOWt`b?4}zmzm9LnIluKYRAQ}0;4di9}^eAK}9oAN{6YF0|U0^r7KwK_PNCM_0=a%djaT3<{=O(vz( z2Bp;UN~Q8a)4EvzbJ_*~d?&4wi0CZ<*M(vDDiMv81``3!%;b5VlssF~yBvVjPum4D zd;9!faVJT%QfiIK2UDJxlu~{W1kX+stU&s{f0fo++5k+07zLbBO#*SF>_B8Md|xKHc*i=_5FP& zflVjAXjztDsZ^ft6jmThrP9}uBoTKvQ%f_pBuTQWUayauVzzDRxUM^sh~zeqY+Huh ztA8URxeY!QN9{twZ2VDX{<0~H<#cb>TIWZzWU8|*s0a!yfOP<*%t*T?uO>;dxL&XC z&Nd20ffaYpvn)$W9y#SrcLR{Ry)C2&j|o%+^ZEQ2EX%qVz~T(d3reX{7>2u!0V`L~ zvLQ?oG!7*$l6a?B7Dz_x{jIT02;p2a(v kJ0TYBWWn*uo;0AJ0QsK%`a@~!9smFU07*qoM6N<$g7yZ7n*aa+ literal 0 HcmV?d00001 diff --git a/assets/live/on_stream.png b/assets/live/on_stream.png new file mode 100644 index 0000000000000000000000000000000000000000..1cae5928c4f4805af53b1468863d620539bde68a GIT binary patch literal 729 zcmV;~0w(>5P)h+oT$1h)S$@YDdj^0u66VHO3L)ep69hkrd%Z7+qP%UiGQ|_;N-;`bl6Y_LCjd{I zq)hR!pE=Oa25exh^G$Ogrq#L;b}gVvDwkJ?QW!crVeIOH(9u!J$3Ooo7Z=DM9H4M~ z43^7j@>3SbJ~jsD zSw4RYvJ_}|81DIbP>ThrPzY!1>tM31cCrl(;r_}>#aWg!NK8-TS0nJY8fn+EIc6kX7XdfMgI~c4Ah%uhj{~nOL1BoK!WD@6FTgdJ2gKu^&H4g{1XjK8J z1Isd$Y!<|10x=qE!ScuLotI3kZ^76CDqdS2I{3l3YE4(@WMM%)_LlyBP@Ap!dq@q8 z;V|qYBWRnLfZ%c=5eOi+w^tz!-AElZJ5m5{r4ENf%>Df=NR2RSn*x2rzgGNhjoq?i@Dpu00000 LNkvXXu0mjfzr02^ literal 0 HcmV?d00001 diff --git a/assets/live/stream_play_back.png b/assets/live/stream_play_back.png new file mode 100644 index 0000000000000000000000000000000000000000..c228378ead90aee0429ef406d6047d98e57d2b57 GIT binary patch literal 768 zcmV+b1ONPqP)5P;pou2NNR*g}n(ztSmR*r9AjVJNM$yE$hNMVi zDTt<(sfAX=7zJx9DSg|PKIfWSVNp%(9qH6rcs7&FeVpI<-}fQ-X~b%^9@tAu=VeNU zK@nXN z9`-P04(jC6BTCT+Kxi6CwIi7jJTD63Ah|bcxgpDV*lcBf4V)<@2)Iec?~c5nl%D-Z z%2c@}ggD6fh$X4^1m+EvO>{CgVxhbZno;jRP(78o6%s`eMq?|Ct*yvrGe{;9$mjF* z`d3`e1;k)_dV6u|^cfghT9D7>u=e>Aypn{#`Z{D;R_wS|11_Nb?d`aJ>oyDqLsdW7 zOa^}6G8UXp6dI%!7tqm;PFxunsHsA9a}#!(4WUpF#X@0MYHN|8yYA-Ua<+%6Q0Ma5tZ1={h>z`m@nVb*R(BpgP$T;>K- z1!%{6Hk-wgM}p*XBa=yUL8%JF2;_1Zi*6U@9S)RArMgh612KYVB!Xv89^-o|r467& zJcg$e6G$bK+5lqPfo*D%Yx7if$k^)o77Su~YO*qHJf;c|TlVo-49jml@OiyptBu!G z0a{&I!Gd!Zv1nBB!P_t(D$9t+<9IbUhj+eZUO|4V#|6}3GU4*oYc-wZwzl9~@?y#3 zK`au%ZtlcfK!*+=!Qjvk1flxb#^y>W_!W+snaY96v+>oFjtfYy*Q4*kMRay`RiGFM zo2Y)T7q4H=H}vMn1;nD-*Vcya<0rr_Yw2_vA3v-j7zor0SaCTw5bK!`0#T={oKH$l ya3xgQdnjt|DXqC=gXYpPnoC%1uK>-Y^nL(ID5_Wxh|p310000 ], ), ), - ) + ), + Expanded( + child: CacheTabBarView( + controller: _tabController, + children: [ + LiveStreamPage(), + VideoPage(), + RecommendPage(), + ], + )), ], ), ); diff --git a/lib/pages/live/sub_page/image_text_page.dart b/lib/pages/live/sub_page/image_text_page.dart new file mode 100644 index 0000000..e9b5711 --- /dev/null +++ b/lib/pages/live/sub_page/image_text_page.dart @@ -0,0 +1,17 @@ +import 'package:flutter/material.dart'; + +class ImageTextPage extends StatefulWidget { + ImageTextPage({Key key}) : super(key: key); + + @override + _ImageTextPageState createState() => _ImageTextPageState(); +} + +class _ImageTextPageState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(), + ); + } +} diff --git a/lib/pages/live/sub_page/live_stream_page.dart b/lib/pages/live/sub_page/live_stream_page.dart new file mode 100644 index 0000000..4907dc1 --- /dev/null +++ b/lib/pages/live/sub_page/live_stream_page.dart @@ -0,0 +1,269 @@ +import 'package:flutter/material.dart'; +import 'package:recook/constants/header.dart'; +import 'package:recook/widgets/custom_image_button.dart'; + +class LiveStreamPage extends StatefulWidget { + LiveStreamPage({Key key}) : super(key: key); + + @override + _LiveStreamPageState createState() => _LiveStreamPageState(); +} + +class _LiveStreamPageState extends State { + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildAttentions(), + Expanded( + child: _buildLiveUsers(), + ), + ], + ); + } + + _buildAttentions() { + return Container( + height: rSize(102), + child: Row( + children: [ + Expanded( + child: ListView.separated( + padding: EdgeInsets.symmetric( + horizontal: rSize(20), + vertical: rSize(15), + ), + separatorBuilder: (context, index) { + return SizedBox(width: rSize(16)); + }, + scrollDirection: Axis.horizontal, + itemBuilder: (context, index) { + return _buildAttentionBox('user $index'); + }, + itemCount: 20, + ), + ), + Container( + width: rSize(52), + child: CustomImageButton( + height: rSize(102), + onPressed: () {}, + child: Text( + '全部\n关注', + style: TextStyle( + color: Color(0xFFDB2D2D), + fontSize: rSP(11), + ), + ), + ), + ), + ], + ), + ); + } + + _buildAttentionBox(String nickName) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + Stack( + children: [ + CircleAvatar( + radius: rSize(52 / 2), + ), + Positioned( + right: rSize(3), + bottom: 0, + child: Image.asset( + R.ASSETS_LIVE_ON_STREAM_PNG, + height: rSize(12), + width: rSize(12), + ), + ), + ], + ), + SizedBox(height: rSize(4)), + Text( + nickName, + style: TextStyle( + color: Color(0xFF666666), + fontSize: rSP(11), + ), + ), + ], + ); + } + + _buildLiveUsers() { + return GridView.builder( + padding: EdgeInsets.symmetric( + horizontal: rSize(16), + vertical: rSize(5), + ), + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + childAspectRatio: 165 / 249, + crossAxisSpacing: rSize(15), + mainAxisSpacing: rSize(15), + ), + itemBuilder: (context, index) { + return _buildGridCard(); + }, + itemCount: 20, + ); + } + + _buildGridCard() { + return ClipRRect( + borderRadius: BorderRadius.circular(rSize(10)), + child: Container( + color: Colors.white, + child: Column( + mainAxisSize: MainAxisSize.max, + children: [ + Stack( + children: [ + AspectRatio( + aspectRatio: 1, + child: Container( + color: Colors.blueGrey, + child: Placeholder(), + ), + ), + Positioned( + left: rSize(10), + top: rSize(10), + child: Container( + height: rSize(15), + decoration: BoxDecoration( + color: Color(0xFF050505).withOpacity(0.18), + borderRadius: BorderRadius.circular(rSize(2)), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Image.asset(R.ASSETS_LIVE_ON_STREAM_PNG), + Text( + '1234人观看', + style: TextStyle( + color: Colors.white, + fontSize: rSP(10), + ), + ), + SizedBox(width: rSize(2)), + ], + ), + ), + ), + Positioned( + right: rSize(10), + bottom: rSize(2), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Image.asset( + R.ASSETS_LIVE_FAVORITE_PNG, + width: rSize(10), + height: rSize(10), + ), + Text( + '334', + style: TextStyle( + color: Colors.white, + fontSize: rSP(10), + ), + ), + SizedBox(width: rSize(2)), + ], + ), + ), + ], + ), + Expanded( + child: Padding( + padding: EdgeInsets.all(rSize(10)), + child: Row( + children: [ + Expanded( + child: Column( + children: [ + Expanded( + child: Text( + '年中厨具福利专场年中厨具福利专场…', + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Color(0xFF333333), + fontSize: rSP(13), + fontWeight: FontWeight.w600, + ), + ), + ), + Row( + children: [ + CircleAvatar( + radius: rSize(10), + ), + Expanded( + child: Padding( + padding: EdgeInsets.symmetric( + horizontal: rSize(6), + ), + child: Text( + 'NAME NAME NAME', + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: rSP(13), + color: Color(0xFF333333), + ), + ), + ), + ), + ], + ), + ], + ), + ), + SizedBox(width: rSize(10)), + AspectRatio( + aspectRatio: 50 / 64, + child: ClipRRect( + borderRadius: BorderRadius.circular(rSize(5)), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + AspectRatio( + aspectRatio: 1, + child: Container( + color: Colors.blue, + child: Placeholder(), + ), + ), + Expanded( + child: Container( + alignment: Alignment.center, + color: Color(0xFFF7F7F7), + child: Text( + '¥244', + style: TextStyle( + color: Color(0xFF333333), + fontSize: rSP(10), + ), + ), + ), + ), + ], + ), + ), + ), + ], + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/pages/live/sub_page/video_page.dart b/lib/pages/live/sub_page/video_page.dart new file mode 100644 index 0000000..76e6c35 --- /dev/null +++ b/lib/pages/live/sub_page/video_page.dart @@ -0,0 +1,101 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; +import 'package:recook/const/resource.dart'; +import 'package:recook/constants/constants.dart'; +import 'package:waterfall_flow/waterfall_flow.dart'; + +class VideoPage extends StatefulWidget { + VideoPage({Key key}) : super(key: key); + + @override + _VideoPageState createState() => _VideoPageState(); +} + +class _VideoPageState extends State { + @override + Widget build(BuildContext context) { + return WaterfallFlow.builder( + padding: EdgeInsets.all(rSize(15)), + gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: rSize(15), + mainAxisSpacing: rSize(15), + ), + itemBuilder: (context, index) { + //TODO: TEST ONLY + final randomHeight = 50 + Random().nextDouble() * 150; + return ClipRRect( + borderRadius: BorderRadius.circular(rSize(10)), + child: Container( + color: Colors.white, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox( + height: randomHeight, + child: Placeholder(), + ), + Container( + padding: EdgeInsets.all(rSize(10)), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + '更有3档风速可调，风大风小随你掌控更有3档风速可调，风大风小随你掌控', + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Color(0xFF333333), + fontWeight: FontWeight.w600, + fontSize: rSP(13), + ), + ), + SizedBox(height: rSize(6)), + Row( + children: [ + CircleAvatar( + radius: rSize(9), + ), + Expanded( + child: Padding( + padding: EdgeInsets.symmetric( + horizontal: rSize(4), + ), + child: Text( + 'NAME NAME NAME', + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Color(0xFF666666), + fontSize: rSP(12), + ), + ), + ), + ), + Image.asset( + R.ASSETS_LIVE_FAVORITE_BLACK_PNG, + height: rSize(14), + width: rSize(14), + ), + SizedBox(width: rSize(2)), + Text( + '${Random().nextInt(100)}', + style: TextStyle( + color: Color(0xFF666666), + fontSize: rSP(12), + ), + ), + ], + ), + ], + ), + ), + ], + ), + ), + ); + }, + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index e472461..5ec8338 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -246,6 +246,13 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "0.2.3" + extended_list_library: + dependency: transitive + description: + name: extended_list_library + url: "https://pub.flutter-io.cn" + source: hosted + version: "2.0.0" extended_text: dependency: "direct main" description: @@ -1033,6 +1040,13 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "0.9.7+15" + waterfall_flow: + dependency: "direct main" + description: + name: waterfall_flow + url: "https://pub.flutter-io.cn" + source: hosted + version: "2.0.3" web_socket_channel: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index d110b98..9cf7a96 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -179,6 +179,8 @@ dependencies: #腾讯直播 + #瀑布流 + waterfall_flow: 2.0.3 dev_dependencies: flutter_test: