添加商城页面

lib/pages/tab_navigator.dart

@@ -1,3 +1,5 @@
+import 'package:aku_community/ui/market/market_page.dart';
+import 'package:bot_toast/bot_toast.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
@@ -33,9 +35,8 @@ class _TabNavigatorState extends State<TabNavigator>
 
     _pages = [
       HomePage(),
-      // MarketPage(),
+      MarketPage(),
       PropertyIndex(),
-      // CommunityIndex(),
       CommunityPage(),
       PersonalIndex()
     ];
@@ -68,14 +69,31 @@ class _TabNavigatorState extends State<TabNavigator>
   Widget build(BuildContext context) {
     //底部导航来
     List<BottomNavigationBarItem> _bottomNav = <BottomNavigationBarItem>[
-      _buildBottomBar('首页', R.ASSETS_ICONS_TABBAR_HOME_NO_PNG,
+      _buildBottomBar(
-          R.ASSETS_ICONS_TABBAR_HOME_PNG),
+        '首页',
-      _buildBottomBar('物业', R.ASSETS_ICONS_TABBAR_HOUSE_NO_PNG,
+        R.ASSETS_ICONS_TABBAR_HOME_NO_PNG,
-          R.ASSETS_ICONS_TABBAR_HOUSE_PNG),
+        R.ASSETS_ICONS_TABBAR_HOME_PNG,
-      _buildBottomBar('社区', R.ASSETS_ICONS_TABBAR_MESSAGE_NO_PNG,
+      ),
-          R.ASSETS_ICONS_TABBAR_MESSAGE_PNG),
+      _buildBottomBar(
-      _buildBottomBar('我的', R.ASSETS_ICONS_TABBAR_USER_NO_PNG,
+        '商城',
-          R.ASSETS_ICONS_TABBAR_USER_PNG),
+        R.ASSETS_ICONS_TABBAR_MARKET_NO_PNG,
+        R.ASSETS_ICONS_TABBAR_MARKET_PNG,
+      ),
+      _buildBottomBar(
+        '物业',
+        R.ASSETS_ICONS_TABBAR_HOUSE_NO_PNG,
+        R.ASSETS_ICONS_TABBAR_HOUSE_PNG,
+      ),
+      _buildBottomBar(
+        '社区',
+        R.ASSETS_ICONS_TABBAR_MESSAGE_NO_PNG,
+        R.ASSETS_ICONS_TABBAR_MESSAGE_PNG,
+      ),
+      _buildBottomBar(
+        '我的',
+        R.ASSETS_ICONS_TABBAR_USER_NO_PNG,
+        R.ASSETS_ICONS_TABBAR_USER_PNG,
+      ),
     ];
     return BeeScaffold(
       body: WillPopScope(
@@ -84,6 +102,7 @@ class _TabNavigatorState extends State<TabNavigator>
               DateTime.now().difference(_lastPressed!) > Duration(seconds: 1)) {
             //两次点击间隔超过1秒重新计算
             _lastPressed = DateTime.now();
+            BotToast.showText(text: '再点击一次返回退出');
             return false;
           }
           //否则关闭app

lib/ui/market/_market_data.dart

@@ -0,0 +1,84 @@
+import 'package:aku_community/utils/headers.dart';
+import 'package:aku_community/widget/bee_scaffold.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_easyrefresh/easy_refresh.dart';
+import 'package:get/get.dart';
+
+@Deprecated('NO NEED THIS CLASS IN FUTURE')
+class MarketData {
+  final String name;
+  final String path;
+  MarketData({
+    required this.name,
+    required this.path,
+  });
+}
+
+@Deprecated('NO NEED THIS LIST IN FUTURE')
+List<MarketData> mockableMarketData = [
+  MarketData(name: '居家生活', path: R.ASSETS_ICONS_TOOL_JJSH_PNG),
+  MarketData(name: '数码家电', path: R.ASSETS_ICONS_TOOL_SMJD_PNG),
+  MarketData(name: '休闲副食', path: R.ASSETS_ICONS_TOOL_XXFS_PNG),
+  MarketData(name: '滋补保健', path: R.ASSETS_ICONS_TOOL_ZBBJ_PNG),
+  MarketData(name: '彩妆香水', path: R.ASSETS_ICONS_TOOL_CZXS_PNG),
+  MarketData(name: '服饰箱包', path: R.ASSETS_ICONS_TOOL_FSXB_PNG),
+  MarketData(name: '母婴玩具', path: R.ASSETS_ICONS_TOOL_MYWJ_PNG),
+  MarketData(name: '饮料酒水', path: R.ASSETS_ICONS_TOOL_YLJS_PNG),
+];
+
+@Deprecated('NO NEED THIS WIDGET IN FUTURE')
+class MockableMarketWidget extends StatelessWidget {
+  final MarketData data;
+  const MockableMarketWidget({Key? key, required this.data}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialButton(
+      child: Column(
+        children: [
+          Spacer(),
+          Image.asset(
+            data.path,
+            height: 75.w,
+            width: 75.w,
+          ),
+          12.hb,
+          Text(
+            data.name,
+            style: TextStyle(
+              fontSize: 24.sp,
+              color: Color(0xFF4A4B51),
+            ),
+          ),
+          Spacer(),
+        ],
+      ),
+      onPressed: () {
+        Get.to(
+          () => BeeScaffold(
+            title: data.name,
+          ),
+        );
+      },
+    );
+  }
+}
+
+@Deprecated('NO NEED THIS WIDGET IN FUTURE')
+class MockableMarketList extends StatefulWidget {
+  MockableMarketList({Key? key}) : super(key: key);
+
+  @override
+  _MockableMarketListState createState() => _MockableMarketListState();
+}
+
+class _MockableMarketListState extends State<MockableMarketList> {
+  @override
+  Widget build(BuildContext context) {
+    return EasyRefresh(
+      header: MaterialHeader(completeDuration: Duration(milliseconds: 300)),
+      onRefresh: () async {},
+      child: ListView(),
+    );
+  }
+}

lib/ui/market/market_page.dart

@@ -0,0 +1,100 @@
+import 'package:aku_community/ui/market/_market_data.dart';
+import 'package:aku_community/widget/bee_scaffold.dart';
+import 'package:aku_community/widget/tab_bar/bee_tab_bar.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class MarketPage extends StatefulWidget {
+  MarketPage({Key? key}) : super(key: key);
+
+  @override
+  _MarketPageState createState() => _MarketPageState();
+}
+
+class _MarketPageState extends State<MarketPage>
+    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
+  late TabController _tabController;
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    final mediaWidth = MediaQuery.of(context).size.width;
+    print({
+      'height': MediaQuery.of(context).size.height,
+      'width': MediaQuery.of(context).size.width,
+    });
+    return BeeScaffold(
+      title: '商城',
+      body: NestedScrollView(
+        headerSliverBuilder: (context, value) {
+          return [
+            SliverAppBar(
+              //AppBar top Widget height
+              //bottom height: 48
+              // flexibleSpace的高为 (设备宽 - 边距)/4*2 + 外边距 + bottom高
+              expandedHeight: (mediaWidth - 32.w * 2) / 4 * 2 + 16.w * 2 + 48,
+              backgroundColor: Colors.transparent,
+              flexibleSpace: FlexibleSpaceBar(
+                background: Container(
+                  color: Color(0xFFF9F9F9),
+                  padding: EdgeInsets.only(
+                    top: 16.w,
+                    left: 32.w,
+                    right: 32.w,
+                    bottom: 16.w + 48, //底部边距需要加上bottom高
+                  ),
+                  child: Material(
+                    color: Colors.white,
+                    clipBehavior: Clip.antiAlias,
+                    borderRadius: BorderRadius.circular(8.w),
+                    child: GridView(
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 4,
+                        childAspectRatio: 1,
+                      ),
+                      shrinkWrap: true,
+                      children: mockableMarketData
+                          .map((e) => MockableMarketWidget(data: e))
+                          .toList(),
+                    ),
+                  ),
+                ),
+              ),
+              pinned: true,
+              toolbarHeight: 0,
+              bottom: PreferredSize(
+                child: Material(
+                  color: Color(0xFFF9F9F9),
+                  child: Align(
+                    alignment: Alignment.centerLeft,
+                    child: BeeTabBar(
+                      scrollable: true,
+                      controller: _tabController,
+                      tabs: ['社区商城', '二手市场'],
+                    ),
+                  ),
+                ),
+                preferredSize: Size.fromHeight(48),
+              ),
+            ),
+          ];
+        },
+        body: TabBarView(
+          children: [
+            MockableMarketList(),
+            MockableMarketList(),
+          ],
+          controller: _tabController,
+        ),
+      ),
+    );
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}