home

lib/views/home/Home.dart

@@ -10,11 +10,13 @@ class HomePage extends StatefulWidget {
 class _HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return SingleChildScrollView(
+      child: Column(
         children: [
           HeaderComponent(),
           RoomComponent(),
         ],
+      ),
     );
   }
 }
@@ -345,7 +347,19 @@ class _RoomComponentState extends State<RoomComponent> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      child: GridView.count(
+      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, //左右间距
@@ -354,6 +368,163 @@ class _RoomComponentState extends State<RoomComponent> {
             childAspectRatio: 0.75,
             children: this._getDataList(),
           ),
+          ClassifyComponent(),
+          GameComponent(),
+        ],
+      ),
     );
   }
 }
+
+// 分类
+class ClassifyComponent extends StatefulWidget {
+  ClassifyComponent({Key? key}) : super(key: key);
+
+  @override
+  State<ClassifyComponent> createState() => _ClassifyComponentState();
+}
+
+class _ClassifyComponentState extends State<ClassifyComponent> {
+  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<Widget> _getList() {
+    List<Widget> 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<GameComponent> createState() => _GameComponentState();
+}
+
+class _GameComponentState extends State<GameComponent> {
+  @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,
+            ),
+          ],
+        ));
+  }
+}

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