diff --git a/lib/routes/app_pages.dart b/lib/routes/app_pages.dart index 180776b..d05c11f 100644 --- a/lib/routes/app_pages.dart +++ b/lib/routes/app_pages.dart @@ -27,7 +27,7 @@ class AppPages { ), GetPage( name: AppRoutes.home, - page: () => const HomeView(), + page: () => HomeView(), binding: HomeBinding(), ), GetPage( diff --git a/lib/views/home/home_view.dart b/lib/views/home/home_view.dart index 32b699f..5b6ec5d 100644 --- a/lib/views/home/home_view.dart +++ b/lib/views/home/home_view.dart @@ -4,6 +4,7 @@ import 'package:flutter/widgets.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:get/get.dart'; import 'package:starwork_flutter/base/app_permission.dart'; +import 'package:super_tooltip/super_tooltip.dart'; import 'package:starwork_flutter/views/home/widget/home_attendance_chart_area_widget.dart'; import 'package:starwork_flutter/views/home/widget/home_carousel_area_widget.dart'; import 'package:starwork_flutter/views/home/widget/home_function_list_area_widget.dart'; @@ -15,7 +16,10 @@ import 'package:starwork_flutter/views/home/widget/home_team_notice_row_widget.d import 'home_controller.dart'; class HomeView extends GetView { - const HomeView({super.key}); + HomeView({super.key}); + + // 气泡提示框控制器 + final SuperTooltipController _tooltipController = SuperTooltipController(); @override Widget build(BuildContext context) { @@ -89,9 +93,32 @@ class HomeView extends GetView { ) ], ), - Icon( - Icons.add_circle_outline, - size: 22.sp, + SuperTooltip( + controller: _tooltipController, + popupDirection: TooltipDirection.down, + backgroundColor: Colors.white, + borderColor: Colors.transparent, + borderWidth: 0, + borderRadius: 8.0, + arrowLength: 8.0, + arrowBaseWidth: 12.0, + arrowTipDistance: 14.0.h, + hasShadow: false, + shadowColor: Colors.black26, + shadowBlurRadius: 8.0, + shadowSpreadRadius: 2.0, + touchThroughAreaShape: ClipAreaShape.rectangle, + barrierColor: Colors.transparent, + content: _buildTooltipContent(), + child: GestureDetector( + onTap: () { + _tooltipController.showTooltip(); + }, + child: Icon( + Icons.add_circle_outline, + size: 22.sp, + ), + ), ), ], ), @@ -229,4 +256,104 @@ class HomeView extends GetView { // 调用controller的刷新方法 await controller.refreshHome(); } + + /// 构建气泡提示框内容 + Widget _buildTooltipContent() { + final List> menuItems = [ + { + 'title': '搜索设备', + 'icon': Icons.sensors_rounded, + 'onTap': () => _handleMenuTap('添加设备'), + }, + { + 'title': '加入团队', + 'icon': Icons.group_add, + 'onTap': () => _handleMenuTap('创建群组'), + }, + ]; + + return Container( + width: 100.w, + alignment: Alignment.center, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: menuItems.asMap().entries.map((entry) { + final index = entry.key; + final item = entry.value; + return _buildMenuItem( + title: item['title'], + icon: item['icon'], + onTap: item['onTap'], + isLast: index == menuItems.length - 1, + ); + }).toList(), + ), + ); + } + + /// 构建单个菜单项 + Widget _buildMenuItem({ + required String title, + required IconData icon, + required VoidCallback onTap, + required bool isLast, + }) { + return GestureDetector( + onTap: () { + _tooltipController.hideTooltip(); + onTap(); + }, + child: Container( + padding: EdgeInsets.all(8.w), + width: double.infinity, + alignment: Alignment.center, + decoration: BoxDecoration( + border: !isLast + ? const Border( + bottom: BorderSide( + color: Colors.grey, + width: 0.5, + ), + ) + : null, + ), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + icon, + size: 18.sp, + color: Colors.black87, + ), + SizedBox(width: 8.w,), + Flexible( + child: Text( + title, + style: TextStyle( + fontSize: 14.sp, + color: Colors.black87, + ), + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), + ), + ], + ), + ), + ); + } + + /// 处理菜单点击事件 + void _handleMenuTap(String menuTitle) { + Get.snackbar( + '提示', + '点击了：$menuTitle', + snackPosition: SnackPosition.TOP, + duration: const Duration(seconds: 2), + ); + } } diff --git a/pubspec.lock b/pubspec.lock index beb4685..a921ca1 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -477,14 +477,6 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "2.4.1" - skeletonizer: - dependency: "direct main" - description: - name: skeletonizer - sha256: "0dcacc51c144af4edaf37672072156f49e47036becbc394d7c51850c5c1e884b" - url: "https://pub.flutter-io.cn" - source: hosted - version: "1.4.3" sky_engine: dependency: transitive description: flutter @@ -530,6 +522,14 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "1.2.0" + super_tooltip: + dependency: "direct main" + description: + name: super_tooltip + sha256: "06f734caa2ddb2313813dac2c939f096222beece9c146ec7d71e07e6e869bef2" + url: "https://pub.flutter-io.cn" + source: hosted + version: "2.1.0" term_glyph: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index da4ca4f..49c5c39 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -32,10 +32,10 @@ dependencies: # loading 动画库 需要指定flutter_spinkit为固定版本 flutter_easyloading: ^3.0.0 flutter_spinkit: 5.2.1 - # 骨架屏 - skeletonizer: ^1.4.3 # 轮播图 carousel_slider: ^5.1.1 + # 气泡提示框 + super_tooltip: ^2.0.8 dev_dependencies: