From 963a083c9f3aecfa1f9d0ad9945133df1269fbeb Mon Sep 17 00:00:00 2001 From: myf <> Date: Fri, 8 Jul 2022 18:17:45 +0800 Subject: [PATCH] home --- images/home/{好友推介@2x.png => friend.png} | Bin images/home/{070@2x.png => game-1.png} | Bin images/home/{072@2x.png => game-2.png} | Bin images/home/{073@2x.png => game-3.png} | Bin images/home/{游戏@2x.png => game.png} | Bin .../home/{首页@2x.png => playing_games.png} | Bin ...QQ[@W)4_VX%3@E(}~M8@2x.png => ranking.png} | Bin images/home/{商城2@2x.png => shop.png} | Bin images/home/女@2x(1).png | Bin 1331 -> 0 bytes lib/views/home/Home.dart | 197 ++++++++++++++++-- pubspec.yaml | 8 + 11 files changed, 192 insertions(+), 13 deletions(-) rename images/home/{好友推介@2x.png => friend.png} (100%) rename images/home/{070@2x.png => game-1.png} (100%) rename images/home/{072@2x.png => game-2.png} (100%) rename images/home/{073@2x.png => game-3.png} (100%) rename images/home/{游戏@2x.png => game.png} (100%) rename images/home/{首页@2x.png => playing_games.png} (100%) rename images/home/{AV05QQ[@W)4_VX%3@E(}~M8@2x.png => ranking.png} (100%) rename images/home/{商城2@2x.png => shop.png} (100%) delete mode 100644 images/home/女@2x(1).png diff --git a/images/home/好友推介@2x.png b/images/home/friend.png similarity index 100% rename from images/home/好友推介@2x.png rename to images/home/friend.png diff --git a/images/home/070@2x.png b/images/home/game-1.png similarity index 100% rename from images/home/070@2x.png rename to images/home/game-1.png diff --git a/images/home/072@2x.png b/images/home/game-2.png similarity index 100% rename from images/home/072@2x.png rename to images/home/game-2.png diff --git a/images/home/073@2x.png b/images/home/game-3.png similarity index 100% rename from images/home/073@2x.png rename to images/home/game-3.png diff --git a/images/home/游戏@2x.png b/images/home/game.png similarity index 100% rename from images/home/游戏@2x.png rename to images/home/game.png diff --git a/images/home/首页@2x.png b/images/home/playing_games.png similarity index 100% rename from images/home/首页@2x.png rename to images/home/playing_games.png diff --git a/images/home/AV05QQ[@W)4_VX%3@E(}~M8@2x.png b/images/home/ranking.png similarity index 100% rename from images/home/AV05QQ[@W)4_VX%3@E(}~M8@2x.png rename to images/home/ranking.png diff --git a/images/home/商城2@2x.png b/images/home/shop.png similarity index 100% rename from images/home/商城2@2x.png rename to images/home/shop.png diff --git a/images/home/女@2x(1).png b/images/home/女@2x(1).png deleted file mode 100644 index 7b45c1a6e5fdfcfc90f3929d2e397715f65a6843..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1331 zcmV-31Px(?MXyIR7gvmSAR^Dbr}CV@4av*90)`TmK#hrvznY!m#zMgWeYc4Hetndb*nXh zfe=bO2Y1IE@6)~q@5yoR z`+`1yexDzo=hyf7K3~ET$fdBHXA8bWgzXI83LuAoETPJP2Y{PEUCg-B7qI@AuTXd~ zvt%YPqKu@$nph5?6hP);#^(550L=(aH>NA;qeeQ0z@x_|c7xFR0DucIykP84dq3qH zJ@7bSR#+aB#+yLczr+a5#Tc#2)zmUtkp388R$THJ9OsEpWMVB0&~+mEGg4#bCjj0I zKsM50M#pmWmXMMkt$hsem~!tlU>K!qSeEx{TjUo3Z+?!y-$U06eZ=S1L;R=#faxBfujSgJ~9f z@-2f#@?j>tCH3P~k<>0m6V;xlS&};SA}7ET_D!x&Z^#{u08doksR3Bg_fo2`*R5#O zcrL{y=UKPDO2h?V4ltyveZj7;^XJviSAFLQgX{I3BqgP8Wi9bGm+afRZrCVVuP69u zZd-0Z7!jbG;Am&UuK7lZ(QyO4B^vmkbI_KVW&PKn-d=lGe>RO*4HZfRQI|Mk(8ZKb z9(zS&OjHja0;pLxGb-)1A76P+wJGY0yvjaaq*K{GNF}FlJ554uvdn)+2E-+DP;ujlQqQDim+W~_?MDWnm z;Q==AN*sHVK3kiu@$VM9?CI9z%izchb)QJOHYEFA%x%k$G@)o%|Ay5@4I9xTf7vZF zU`UYmTAS8Hn}&;Bb`^=`#Hy%um`S=KVY-pp^L?5p{=)-rfVs^iAdvr1zwk^y)w7!J zPzYO6&#a3XlSW2;2XAIsNbWY8UUPaL@*nu4lZ={cPKv?TCWv>e`24A8RC>T8&Ym>e zGV3J*J#Q8*16>r@_xmY;b+6L`WjB~gZD*eRPS0p?-_4g9Xb{_p8R#sJ8YuAguZ0Bt z0Rm7j0lo7LG4Vj+wEZN_O*3{5+NKkIM~G={j2z$q*rDeH13M!lGqfgSnDtg0hGP9P zuXgbW;w6G__SJw8H~$InCj50TJMu_`oP9M+YP=9bNod>nP{1K)PYvq$xqFWg}+w3GeAX%}^Iz^1?G}?y?Kd zx`hG%Yn?f=MH*bJ4~Wn#fAvh6CKtQxZF9*p*-7U?Y_{wnq;d>!f<)%POdXctsS>(s zuOg??a%2hkfvW4-sMVzESEEJDR_wv5WK|HjBvP-F6KY@7bd2=MeWm3U?J%R?b9~z pVTpd)W?22nGJ+o#rd6-;{s%~L;k&faiZlQK002ovPDHLkV1n}Ge2xGB diff --git a/lib/views/home/Home.dart b/lib/views/home/Home.dart index a70b077..cd36568 100644 --- a/lib/views/home/Home.dart +++ b/lib/views/home/Home.dart @@ -10,11 +10,13 @@ class HomePage extends StatefulWidget { class _HomePageState extends State { @override Widget build(BuildContext context) { - return Column( - children: [ - HeaderComponent(), - RoomComponent(), - ], + return SingleChildScrollView( + child: Column( + children: [ + HeaderComponent(), + RoomComponent(), + ], + ), ); } } @@ -345,15 +347,184 @@ class _RoomComponentState extends State { @override Widget build(BuildContext context) { return Container( - child: GridView.count( - shrinkWrap: true, - crossAxisCount: 3, //每行的数量 - crossAxisSpacing: 12.0, //左右间距 - mainAxisSpacing: 12.0, //上下间距 - padding: EdgeInsets.all(15), - childAspectRatio: 0.75, - children: this._getDataList(), + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color.fromRGBO(255, 255, 255, 1), + Color.fromRGBO(254, 249, 252, 1), + ], + ), + ), + child: Column( + children: [ + GridView.count( + shrinkWrap: true, + crossAxisCount: 3, //每行的数量 + crossAxisSpacing: 12.0, //左右间距 + mainAxisSpacing: 12.0, //上下间距 + padding: EdgeInsets.all(15), + childAspectRatio: 0.75, + children: this._getDataList(), + ), + ClassifyComponent(), + GameComponent(), + ], ), ); } } + +// 分类 +class ClassifyComponent extends StatefulWidget { + ClassifyComponent({Key? key}) : super(key: key); + + @override + State createState() => _ClassifyComponentState(); +} + +class _ClassifyComponentState extends State { + List listData = [ + { + "title": "排行榜", + "imgUrl": "images/home/ranking.png", + }, + { + "title": "游玩卡", + "imgUrl": "images/home/game.png", + }, + { + "title": "商城", + "imgUrl": "images/home/shop.png", + }, + { + "title": "桌游房间", + "imgUrl": "images/home/playing_games.png", + }, + { + "title": "好友在线", + "imgUrl": "images/home/friend.png", + }, + ]; + + List _getList() { + List list = []; + for (var i = 0; i < listData.length; i++) { + list.add( + Column( + children: [ + Stack( + children: [ + Image.asset( + listData[i]['imgUrl'], + width: 38, + height: 38, + ) + ], + ), + SizedBox( + height: 4, + ), + Text( + listData[i]['title'], + textAlign: TextAlign.center, + style: TextStyle( + color: Color.fromRGBO(102, 102, 102, 1), + fontSize: 12, + ), + ), + ], + ), + ); + } + return list; + } + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.fromLTRB(16, 25, 16, 25), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: _getList(), + ), + ); + } +} + +// 一起玩 +class GameComponent extends StatefulWidget { + GameComponent({Key? key}) : super(key: key); + + @override + State createState() => _GameComponentState(); +} + +class _GameComponentState extends State { + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.fromLTRB(15, 0, 15, 0), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "一起玩", + style: TextStyle( + color: Color.fromRGBO(51, 51, 51, 1), + fontSize: 16, + fontWeight: FontWeight.w800, + ), + ), + Row( + children: [ + Text( + "更多", + style: TextStyle( + color: Color.fromRGBO(153, 153, 153, 1), + fontSize: 14, + ), + ), + SizedBox( + width: 6, + ), + Image.asset( + "images/home/right_arrow.png", + width: 6, + height: 12, + ) + ], + ) + ], + ), + SizedBox( + height: 12, + ), + Image.asset( + "images/home/game-1.png", + width: double.infinity, + height: 76, + ), + SizedBox( + height: 4, + ), + Image.asset( + "images/home/game-2.png", + width: double.infinity, + height: 76, + ), + SizedBox( + height: 4, + ), + Image.asset( + "images/home/game-3.png", + width: double.infinity, + height: 76, + ), + ], + )); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 6e4d684..e4ca624 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -75,6 +75,14 @@ flutter: - images/home/right_arrow.png - images/home/room.png - images/home/fire.png + - images/home/ranking.png + - images/home/shop.png + - images/home/playing_games.png + - images/home/game.png + - images/home/friend.png + - images/home/game-1.png + - images/home/game-2.png + - images/home/game-3.png # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware