背景

lib/pages/home/home_page.dart

@@ -1,5 +1,7 @@
 import 'package:amap_flutter_map/amap_flutter_map.dart';
 import 'package:autosos_flutter/const_config.dart';
+import 'package:autosos_flutter/pages/home/widgets/image_block.dart';
+import 'package:autosos_flutter/pages/home/widgets/number_block.dart';
 import 'package:flutter/material.dart';
 
 class HomePage extends StatefulWidget {
@@ -10,6 +12,8 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
+  bool enabled = false;
+
   @override
   Widget build(BuildContext context) {
     const AMapWidget map = AMapWidget(
@@ -18,9 +22,95 @@ class _HomePageState extends State<HomePage> {
       apiKey: ConstConfig.amapApiKeys,
     );
     return Scaffold(
-      body: Column(
+        appBar: AppBar(
+            title: const Text(
+              "首页",
+              style: TextStyle(color: Colors.white),
+            ),
+            actions: const [
+              Text("今日在线时长？小时", style: TextStyle(color: Colors.white))
+            ],
+            flexibleSpace: Container(
+              decoration: const BoxDecoration(
+                  image: DecorationImage(
+                      image: AssetImage("images/4.0x/home_top_bg.png"),
+                      fit: BoxFit.cover)),
+            )),
+        backgroundColor: const Color(0xFFF3F3F3),
+        body: Padding(
+          padding: const EdgeInsets.all(10),
+          child: Column(
+            children: [buildTopWidget()],
+          ),
+        ));
+  }
+
+  Widget buildTopWidget() {
+    return Container(
+      padding: const EdgeInsets.all(20),
+      decoration: const BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.all(Radius.circular(5))),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Text("hello world")
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              const Row(
+                children: [
+                  Text(
+                    "接单中",
+                    style: TextStyle(
+                        fontSize: 23,
+                        fontWeight: FontWeight.bold,
+                        color: Colors.black),
+                  )
+                ],
+              ),
+              Row(
+                children: [
+                  Switch(
+                    value: enabled,
+                    onChanged: (value) => setState(() {
+                      enabled = value;
+                    }),
+                    activeColor: Colors.red,
+                  ),
+                  Container(
+                    margin: const EdgeInsets.only(left: 10, right: 10),
+                    width: 1,
+                    height: 20,
+                    color: Colors.grey,
+                  ),
+                  Column(
+                    children: [
+                      enabled
+                          ? Image.asset("images/3.0x/order_receiving_star.png")
+                          : Image.asset("images/3.0x/order_receiving_end.png"),
+                      const Text("订单")
+                    ],
+                  )
+                ],
+              )
+            ],
+          ),
+          GridView.count(
+            physics: const NeverScrollableScrollPhysics(),
+            shrinkWrap: true,
+            crossAxisCount: 3,
+            childAspectRatio: 1.5,
+            children: const [
+              NumberBlock(title: "钱包(元)", number: "111"),
+              NumberBlock(title: "总订单数", number: "111"),
+              NumberBlock(title: "总金额(元)", number: "111"),
+              ImageBlock(title: "提现", imgUrl: "images/3.0x/tixian_ic.png"),
+              ImageBlock(
+                  title: "个人中心", imgUrl: "images/3.0x/gerenzhongxin_ic.png"),
+              ImageBlock(title: "设置", imgUrl: "images/3.0x/shezhi_ic.png"),
+            ],
+          ),
         ],
       ),
     );

lib/pages/home/widgets/image_block.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+class ImageBlock extends StatelessWidget {
+  final String title;
+  final String imgUrl;
+
+  const ImageBlock({super.key, required this.title, required this.imgUrl});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Image.asset(imgUrl),
+        Text(
+          title,
+          style: const TextStyle(fontSize: 14, color: Colors.black),
+        )
+      ],
+    );
+  }
+}

lib/pages/home/widgets/number_block.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class NumberBlock extends StatelessWidget {
+  final String title;
+  final String number;
+
+  const NumberBlock({super.key, required this.title, required this.number});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            number,
+            style: const TextStyle(
+              fontSize: 23,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          Text(
+            title,
+            style: const TextStyle(fontSize: 12, color: Colors.grey),
+          ),
+        ],
+      ),
+    );
+  }
+}

pubspec.yaml

@@ -63,6 +63,10 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
    - images/
+   - images/1.5x/
+   - images/2.0x/
+   - images/3.0x/
+   - images/4.0x/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware