登录

lib/main.dart

@@ -6,14 +6,23 @@ import 'styles/theme.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
-  runApp(GetMaterialApp(
-    debugShowCheckedModeBanner: true,
-    title: '小飞龙定向场控',
-    theme: appThemeData(),
-    darkTheme: appThemeData(),
-    home: const InitView(),
-  ));
+  runApp(const App());
 }
 
+class App extends StatelessWidget{
+  const App({super.key});
 
+  @override
+  Widget build(BuildContext context) {
+
+    return GetMaterialApp(
+      debugShowCheckedModeBanner: true,
+      title: '小飞龙定向场控',
+      theme: appThemeData(),
+      darkTheme: appThemeData(),
+      home: const InitView(),
+    );
+  }
+
+}
 

lib/view/home/app_bar.dart

@@ -1,15 +1,19 @@
+import 'package:common_pub/common_pub.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:track_offical/generated/assets.dart';
 import 'home_controller.dart';
 
 class HomeAppBar extends GetView<HomeController> implements PreferredSizeWidget{
-  const HomeAppBar({super.key});
+  const HomeAppBar({super.key, required this.tab});
+  final Widget tab;
 
   @override
   Widget build(BuildContext context) {
+    final statusBarHeight = MediaQuery.of(context).viewPadding.top;
+
     return SizedBox.expand(child: Container(
-      padding: EdgeInsets.only(top: MediaQuery.of(context).viewPadding.top),
+      padding: EdgeInsets.only(top: statusBarHeight),
       decoration: const BoxDecoration(image: DecorationImage(
           image: AssetImage(Assets.imagesBkCommonPage), fit:  BoxFit.fitWidth),
         boxShadow: [
@@ -20,6 +24,9 @@ class HomeAppBar extends GetView<HomeController> implements PreferredSizeWidget{
         mainAxisSize: MainAxisSize.max,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
+          SizedBox(
+              width: context.wp(70),
+              height: double.infinity, child: tab),
           IconButton(onPressed: (){}, icon: const Icon(Icons.radio))
         ],
       ),

lib/view/home/home_view.dart

@@ -1,9 +1,13 @@
+import 'package:common_pub/common_pub.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:track_offical/view/home/app_bar.dart';
+import '../../generated/assets.dart';
+import '../../logger.dart';
+import 'app_bar.dart';
+import 'map/map_page.dart';
 import 'home_controller.dart';
 
-class HomeView extends GetView<HomeController>{
+class HomeView extends GetView<HomeController> {
   const HomeView({super.key});
 
   static Bindings bindings() {
@@ -12,18 +16,79 @@ class HomeView extends GetView<HomeController>{
     });
   }
 
-
   @override
   Widget build(BuildContext context) {
-    return const Scaffold(
-      appBar:  HomeAppBar(),
-    );
+    return DefaultTabController(
+        initialIndex: 0,
+        length: _tabElems.length,
+        child: Scaffold(
+          appBar: HomeAppBar(
+            tab:
+                TabBar(
+                    tabs: _tabElems.map((e) => Tab(text: e.title)).toList(),
+                    labelColor: Colors.white,
+                    unselectedLabelColor: Colors.white,
+                    indicatorSize: TabBarIndicatorSize.tab,
+                    indicatorPadding: const EdgeInsets.only(bottom: 0),
+                    indicator: CustomTabIndicator(),
+                    dividerColor: Colors.transparent
+                ),
+          ),
+          body: Container(
+            decoration: const BoxDecoration(image: DecorationImage(image: AssetImage(Assets.imagesBkCommonPage), fit: BoxFit.fill)),
+            child: TabBarView(
+              physics: const NeverScrollableScrollPhysics(),
+              children: _tabElems.map((e) => e.child).toList(),
+            )
+          ) ,
+        ));
   }
+}
+
+final _tabElems = [
+  _TabElem(title: '设置', child: const SizedBox()),
+  _TabElem(title: '地图', child: const MapPage()),
+  _TabElem(title: '用户管理', child: const SizedBox()),
+  _TabElem(title: '个人排名', child: const SizedBox()),
+  _TabElem(title: '分组排名', child: const SizedBox()),
+  _TabElem(title: '数据详情', child: const SizedBox()),
+];
 
+class _TabElem {
+  _TabElem({required this.title, required this.child});
+
+  final String title;
+  final Widget child;
+}
+class CustomTabIndicator extends Decoration {
+  @override
+  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
+    return _CustomPainter(this, onChanged!);
+  }
 }
 
+class _CustomPainter extends BoxPainter {
 
+  final CustomTabIndicator decoration;
 
+  _CustomPainter(this.decoration, VoidCallback onChanged)
+      : super(onChanged);
 
+  @override
+  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
+    final size = configuration.size;
+    assert(size != null);
+    final Paint paint = Paint();
+    paint.color = const Color(0xff003656);
+    paint.style = PaintingStyle.fill;
+    final path = Path();
+    final rect = offset & size!;
+    path.moveTo(rect.center.dx - 12 , rect.bottom);
+    path .lineTo(rect.center.dx + 12, rect.bottom);
+    path.lineTo(rect.center.dx, rect.height - 12);
+    path.close();
 
+    canvas.drawPath(path, paint);
+  }
 
+}

lib/view/home/map/map_page.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class MapPageController extends GetxController{
+
+}
+
+
+class MapPage extends StatelessWidget{
+  const MapPage({super.key});
+
+
+
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder(
+        init: MapPageController(),
+        builder: (c){
+          return Container(
+            margin: const EdgeInsets.all(20),
+            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16)),
+          );
+        });
+  }
+
+}