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 7b45c1a..0000000 Binary files a/images/home/女@2x(1).png and /dev/null differ 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