登录页面

lib/Assets/AssetImages.dart

@@ -2,4 +2,7 @@
 
 class AssetImages {
   static const right_arrow = 'assets/multiImgs/right_arrow.png';
+  static const login_background = 'assets/multiImgs/login_background.png';
+  static const login_close = 'assets/multiImgs/login_close.png';
+  static const input_clear = 'assets/multiImgs/input_clear.png';
 }

lib/Customization/CustomizationScreen.dart

@@ -240,7 +240,9 @@ class _ProductSliverBuilderDelegate extends SliverChildBuilderDelegate {
             widget = GestureDetector(
               child: container,
               onTap: () {
-                context.go('/product_detail');
+                context.pushNamed('product_detail');
+                // context.push('/product_detail');
+                // context.go('/product_detail');
               },
             );
           } else {

lib/Login/LoginScreen.dart

 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:my_app2/Login/ViewModel/UserViewModel.dart';
 import 'package:provider/provider.dart';
+import 'package:my_app2/Assets/AssetImages.dart';
 
 class LoginScreen extends StatelessWidget {
   const LoginScreen({super.key});
@@ -8,7 +10,18 @@ class LoginScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('登陆')),
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        leading: IconButton(
+          icon: const Image(
+            image: AssetImage(AssetImages.login_close),
+          ),
+          onPressed: () {
+            context.pop();
+          },
+        ),
+      ),
+      extendBodyBehindAppBar: true,
       body: _LoginScreenImp(),
     );
   }
@@ -20,24 +33,60 @@ class _LoginScreenImp extends StatefulWidget {
 }
 
 class _LoginScreenImpState extends State<_LoginScreenImp> {
+  Widget _buildHead(BuildContext context) {
+    double height = MediaQuery.of(context).size.width * (283.0 / 375.0);
+    return SizedBox(
+      height: height,
+      child: Stack(
+          fit: StackFit.expand,
+          clipBehavior: Clip.hardEdge,
+          children: const [
+            Image(
+                fit: BoxFit.fill,
+                image: AssetImage(AssetImages.login_background)),
+            Positioned(
+                left: 35,
+                bottom: 97,
+                child: Text(
+                  'APP登录',
+                  style: TextStyle(fontSize: 26, fontWeight: FontWeight.w600),
+                ))
+          ]),
+    );
+  }
+
+// IconButton(
+//                 icon: const Image(
+//                   image: AssetImage(AssetImages.input_clear),
+//                 ),
+//                 // ignore: avoid_print
+//                 onPressed: () => print('hello world'),
+//               )
+  Widget _phoneTextFiled(BuildContext context) {
+    return Container(
+      height: 50,
+      margin: const EdgeInsets.symmetric(horizontal: 36),
+      decoration: const BoxDecoration(
+          color: Colors.blue,
+          border: Border(bottom: BorderSide(color: Color(0xFF1A1A1A)))),
+      child: TextField(
+          decoration: InputDecoration(
+              fillColor: Colors.yellow,
+              hintText: '请输入手机号',
+              border: InputBorder.none,
+              filled: true,
+              suffix: Container(
+                width: 20,
+                height: 50,
+                color: Colors.red,
+              ))),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          ElevatedButton(
-            onPressed: () {
-              // log a user in, letting all the listeners know
-              context.read<UserViewModel>().login('test-user');
-
-              // router will automatically redirect from /login to / using
-              // refreshListenable
-            },
-            child: const Text('Login'),
-          ),
-        ],
-      ),
+    return SingleChildScrollView(
+      child: Column(children: [_buildHead(context), _phoneTextFiled(context)]),
     );
   }
 }

lib/main.dart

@@ -34,6 +34,7 @@ class AppRoot extends StatelessWidget {
         builder: (context, state) => const _AppImp(),
         routes: <RouteBase>[
           GoRoute(
+            name: 'product_detail',
             path: Routes.productDetail,
             builder: (context, state) => const ProductDetailScreen(),
           ),