首页开发

lib/pages/store/store.dart

@@ -2,12 +2,13 @@
  * @Author: zhangdongxue zhangdongxue@uz.cn
  * @Date: 2022-05-26 13:16:03
  * @LastEditors: zhangdongxue zhangdongxue@uz.cn
- * @LastEditTime: 2022-05-26 14:25:36
+ * @LastEditTime: 2022-05-26 17:32:19
  * @FilePath: /gl_dao/lib/pages/store/store.dart
  * @Description: 商城首页
  */
+// import 'dart:html';
+
 import 'package:flutter/material.dart';
-import '../auth/auth.dart';
 
 import '../../https/auth_api.dart';
 
@@ -34,23 +35,115 @@ class _StorePagesState extends State<StorePages> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('DTX商城1'),
-        shadowColor: Colors.transparent,
-      ),
-      body: Center(
-        child: TextButton(
-          onPressed: () {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) {
-                return const AuthPages();
-              }),
-            );
-          },
-          child: const Text('登录'),
-        ),
+      body: Column(
+        children: [
+          navWidget(), // 自定义顶部导航样式
+          Container(
+            width: MediaQuery.of(context).size.width,
+            height: MediaQuery.of(context).size.height - 300,
+            color: Colors.grey.shade100,
+          ),
+        ],
       ),
     );
   }
+
+  // 首页自定义顶部导航
+  Widget navWidget() {
+    return Container(
+      height: 200,
+      decoration: const BoxDecoration(
+        image: DecorationImage(
+          image: AssetImage('assets/images/banner.png'),
+          fit: BoxFit.cover,
+          opacity: 1,
+        ),
+      ),
+      padding: const EdgeInsets.fromLTRB(16, 54, 16, 16),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              GestureDetector(
+                onTap: selectCity,
+                child: Row(
+                  children: [
+                    Image.asset(
+                      'assets/images/location.png',
+                      width: 16.0,
+                    ),
+                    const SizedBox(width: 6),
+                    const Text(
+                      '全国',
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 16,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 16),
+              Expanded(
+                flex: 1,
+                child: GestureDetector(
+                  onTap: search,
+                  child: Container(
+                    padding: const EdgeInsets.only(left: 16),
+                    decoration: const BoxDecoration(
+                      borderRadius: BorderRadius.all(
+                        Radius.circular(36.0),
+                      ),
+                      color: Colors.white,
+                    ),
+                    height: 32,
+                    child: Row(
+                      children: [
+                        Image.asset(
+                          'assets/images/search.png',
+                          width: 16.0,
+                        ),
+                        const SizedBox(width: 10),
+                        const Text(
+                          '请搜索商家或商品',
+                          style: TextStyle(
+                            color: Colors.grey,
+                            fontSize: 14,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(width: 10),
+              GestureDetector(
+                onTap: add,
+                child: const Icon(
+                  Icons.add,
+                  size: 30,
+                  color: Colors.white,
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  // 选择城市
+  selectCity() {
+    print('selectCity');
+  }
+
+  // 搜索按钮
+  search() {
+    print('search');
+  }
+
+  // 添加按钮
+  add() {
+    print('addadd');
+  }
 }