import 'package:ef/ef.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:flutterflow_ui/flutterflow_ui.dart'; import 'package:vbvs_app/common/color/appConstants.dart'; import 'package:vbvs_app/common/color/app_uri_status.dart'; import 'package:vbvs_app/common/util/FitTool.dart'; import 'package:vbvs_app/common/util/MyUtils.dart'; import 'package:vbvs_app/component/NullDataComponentWidget.dart'; import 'package:vbvs_app/component/tool/ClickableContainer.dart'; import 'package:vbvs_app/component/tool/CustomCard.dart'; import 'package:vbvs_app/component/tool/TopSlideNotification.dart'; import 'package:vbvs_app/controller/device/body_device_controller.dart'; import 'package:vbvs_app/controller/theme_controller/ThemeController.dart'; import 'package:vbvs_app/pages/device/component/DeviceDataComponentWidget.dart'; class BodyDeviceWidget extends StatefulWidget { const BodyDeviceWidget({super.key}); @override State createState() => _BodyDevicePageState(); } class _BodyDevicePageState extends State { final ThemeController themeController = Get.find(); final BodyDeviceController bodyDeviceController = Get.find(); final GlobalKey addIconKey = GlobalKey(); OverlayEntry? _popupEntry; void _showPopup() { final renderBox = addIconKey.currentContext?.findRenderObject() as RenderBox?; if (renderBox == null) return; final position = renderBox.localToGlobal(Offset.zero); final size = renderBox.size; double popupWidth = 190.rpx; // 移除之前的弹窗 _popupEntry?.remove(); // 创建新的 OverlayEntry _popupEntry = OverlayEntry( builder: (context) => Stack( children: [ // 半透明背景，点击后关闭弹窗 ModalBarrier( dismissible: true, color: Colors.transparent, onDismiss: _hidePopup, ), // 弹窗内容 Positioned( top: position.dy + size.height + 26.rpx, left: position.dx + size.width - popupWidth - 40.rpx, child: Material( color: Colors.transparent, child: Container( width: popupWidth, padding: EdgeInsets.all(20.rpx), decoration: BoxDecoration( color: themeController.currentColor.sc17, borderRadius: BorderRadius.circular(12.rpx), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.5), blurRadius: 12.rpx, spreadRadius: 2.rpx, offset: Offset(0, 6.rpx), ), ], ), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox(height: 11.rpx), ClickableContainer( padding: EdgeInsets.symmetric(vertical: 10.rpx), backgroundColor: Colors.transparent, highlightColor: themeController.currentColor.sc16.withOpacity(0.1), borderRadius: 0.rpx, onTap: () { print('点击扫一扫'); _hidePopup(); TopSlideNotification.show( context, text: "待开发.提示".tr, textColor: themeController.currentColor.sc2, ); }, child: Container( width: double.infinity, child: Center( child: Text( '扫一扫'.tr, style: TextStyle( fontSize: AppConstants().normal_text_fontSize, color: themeController.currentColor.sc3, ), ), ), ), ), SizedBox(height: 35.rpx), ClickableContainer( padding: EdgeInsets.symmetric(vertical: 10.rpx), backgroundColor: Colors.transparent, highlightColor: themeController.currentColor.sc16.withOpacity(0.1), borderRadius: 0.rpx, onTap: () { _hidePopup(); Get.toNamed("/deviceType"); }, child: Container( width: double.infinity, child: Center( child: Text( '蓝牙绑定'.tr, style: TextStyle( fontSize: AppConstants().normal_text_fontSize, color: themeController.currentColor.sc3, ), ), ), ), ), SizedBox(height: 13.rpx), ], ), ), ), ), ], ), ); // 插入新的 OverlayEntry Overlay.of(context)!.insert(_popupEntry!); } void _hidePopup() { _popupEntry?.remove(); _popupEntry = null; } @override void initState() { bodyDeviceController.keyWord.value = ""; super.initState(); bodyDeviceController.getDeviceList().then((apiResponse) { if (apiResponse.code != HttpStatusCodes.ok) { TopSlideNotification.show( Get.context!, text: apiResponse.msg!, textColor: themeController.currentColor.sc9, ); } }); } @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, bodysize) => GestureDetector( onTap: () => FocusScope.of(context).unfocus(), child: Container( // width: bodysize.maxWidth, // height: bodysize.maxHeight * 1, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/img/bgNoImg.png'), // 本地图片 fit: BoxFit.fill, // 填满整个 Container ), ), child: Scaffold( backgroundColor: Colors.transparent, // 加上这一行 appBar: AppBar( backgroundColor: themeController.currentColor.sc17, automaticallyImplyLeading: false, iconTheme: IconThemeData( color: themeController.currentColor.sc3, ), titleSpacing: 0, title: Container( width: double.infinity, height: 180.rpx, child: Stack( alignment: Alignment.center, children: [ /// 居中标题 Text( '体征检测设备.标题'.tr, style: TextStyle( fontFamily: 'Readex Pro', color: themeController.currentColor.sc3, letterSpacing: 0, fontSize: 30.rpx, ), ), Positioned( left: 0, // child: returnIconButtom, child: returnIconButtomAddCallback(() { bodyDeviceController.getDeviceNum(); bodyDeviceController.getDeviceList(); bodyDeviceController.updateAll(); }), ), Positioned( right: 20.rpx, child: ClickableContainer( key: addIconKey, backgroundColor: Colors.transparent, highlightColor: themeController.currentColor.sc16, padding: EdgeInsets.all(8.rpx), onTap: () { // 点击图标时，展示弹窗 if (_popupEntry == null) { _showPopup(); } else { _hidePopup(); } }, child: SvgPicture.asset( 'assets/img/icon/add.svg', width: 39.rpx, height: 39.rpx, color: themeController.currentColor.sc16, ), ), ), ], ), ), actions: [], centerTitle: false, ), body: GestureDetector( onTap: _hidePopup, // 点击空白处自动关闭弹窗 child: SafeArea( top: true, child: Padding( padding: EdgeInsetsDirectional.fromSTEB(0.rpx, 0, 0.rpx, 0), child: Column( mainAxisSize: MainAxisSize.min, children: [ Padding( padding: EdgeInsetsDirectional.fromSTEB(0, 30.rpx, 0, 0), child: Container( width: double.infinity, constraints: BoxConstraints( minHeight: 90.rpx, ), decoration: BoxDecoration( color: themeController.currentColor.sc5), child: Padding( padding: EdgeInsetsDirectional.fromSTEB( 30.rpx, 15.rpx, 30.rpx, 15.rpx), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // Row( // mainAxisSize: MainAxisSize.max, // children: [ // Obx(() { // return ClickableContainer( // backgroundColor: // Colors.transparent, // 或者你想设置的背景色 // highlightColor: themeController // .currentColor.sc3, // 点击涟漪颜色 // borderRadius: 8.rpx, // 自定义圆角 // padding: EdgeInsets.all( // 0), // 外部已经排版，这里不用加内边距 // onTap: () async { // // 点击事件处理逻辑 // bodyDeviceController.model.type = 1; // await bodyDeviceController // .getDeviceList(); // bodyDeviceController.updateAll(); // }, // child: Column( // mainAxisSize: MainAxisSize.max, // children: [ // Text( // '体征检测设备.我的e护'.tr, // style: // FlutterFlowTheme.of(context) // .bodyMedium // .override( // fontFamily: 'Inter', // fontSize: AppConstants() // .title_text_fontSize, // letterSpacing: 0.0, // color: // bodyDeviceController // .model // .type == // 2 // ? themeController // .currentColor // .sc3 // : themeController // .currentColor // .sc2, // ), // ), // SizedBox( // width: 100.rpx, // child: Divider( // height: 1.rpx, // thickness: 2.rpx, // color: bodyDeviceController // .model.type == // 2 // ? Colors.transparent // : themeController // .currentColor.sc2, // ), // ), // ].divide(SizedBox(height: 10.rpx)), // ), // ); // }), // Obx(() { // return ClickableContainer( // backgroundColor: Colors.transparent, // highlightColor: // themeController.currentColor.sc3, // borderRadius: 8.rpx, // padding: EdgeInsets.all(0), // onTap: () async { // // 这里写你的点击逻辑 // bodyDeviceController.model.type = 2; // await bodyDeviceController // .getDeviceList(); // bodyDeviceController.updateAll(); // }, // child: Column( // mainAxisSize: MainAxisSize.max, // children: [ // Text( // '体征检测设备.云关爱'.tr, // style: // FlutterFlowTheme.of(context) // .bodyMedium // .override( // fontFamily: 'Inter', // fontSize: 30.rpx, // letterSpacing: 0.0, // color: // bodyDeviceController // .model // .type == // 1 // ? themeController // .currentColor // .sc3 // : themeController // .currentColor // .sc2, // ), // ), // SizedBox( // width: 100.rpx, // child: Divider( // height: 1.rpx, // thickness: 2.rpx, // color: bodyDeviceController // .model.type == // 1 // ? Colors.transparent // : themeController // .currentColor.sc2, // ), // ), // ].divide(SizedBox(height: 10.rpx)), // ), // ); // }), // ].divide(SizedBox(width: 60.rpx)), // ), Stack( alignment: Alignment.bottomLeft, children: [ Row( mainAxisSize: MainAxisSize.max, children: [ Obx(() { return ClickableContainer( backgroundColor: Colors.transparent, highlightColor: themeController .currentColor.sc3, borderRadius: 8.rpx, padding: EdgeInsets.all(0), onTap: () async { bodyDeviceController.model.type = 1; await bodyDeviceController .getDeviceList(); bodyDeviceController.updateAll(); }, child: Column( mainAxisSize: MainAxisSize.max, children: [ Container( width: 160.rpx, // 固定宽度为 160.rpx alignment: Alignment.center, // 文字居中 child: Text( '体征检测设备.我的e护'.tr, style: FlutterFlowTheme.of( context) .bodyMedium .override( fontFamily: 'Inter', fontSize: AppConstants() .title_text_fontSize, letterSpacing: 0.0, color: bodyDeviceController .model .type == 2 ? themeController .currentColor .sc3 : themeController .currentColor .sc2, ), ), ), SizedBox(height: 10.rpx), ], ), ); }), Obx(() { return ClickableContainer( backgroundColor: Colors.transparent, highlightColor: themeController .currentColor.sc3, borderRadius: 8.rpx, padding: EdgeInsets.all(0), onTap: () async { bodyDeviceController.model.type = 2; await bodyDeviceController .getDeviceList(); bodyDeviceController.updateAll(); }, child: Column( mainAxisSize: MainAxisSize.max, children: [ Container( width: 160.rpx, // 固定宽度为 160.rpx alignment: Alignment.center, // 文字居中 child: Text( '体征检测设备.云关爱'.tr, style: FlutterFlowTheme.of( context) .bodyMedium .override( fontFamily: 'Inter', fontSize: AppConstants() .title_text_fontSize, letterSpacing: 0.0, color: bodyDeviceController .model .type == 1 ? themeController .currentColor .sc3 : themeController .currentColor .sc2, ), ), ), SizedBox(height: 10.rpx), ], ), ); }), ], ), Obx(() { // 横线宽度固定为 160.rpx double lineWidth = 160.rpx; return AnimatedPositioned( duration: Duration(milliseconds: 300), curve: Curves.easeInOut, bottom: 0, left: bodyDeviceController.model.type == 1 ? 0 : 160.rpx, // 第二个按钮横线从 160.rpx 开始 child: Container( width: lineWidth, // 横线宽度固定为 160.rpx height: 4.rpx, decoration: BoxDecoration( color: themeController .currentColor.sc2, borderRadius: BorderRadius.circular(2.rpx), ), ), ); }), ], ), Container( width: MediaQuery.sizeOf(context).width * 0.38, constraints: BoxConstraints( minWidth: 285.rpx, ), decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20.rpx), ), child: Padding( padding: EdgeInsetsDirectional.fromSTEB( 0.rpx, 0, 20.rpx, 0), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: Container( height: 80.rpx, child: Align( alignment: AlignmentDirectional(-1, 0), child: TextFormField( onChanged: (value) { bodyDeviceController .keyWord.value = value; }, autofocus: false, obscureText: false, decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB( 12.rpx, 0, 0.rpx, 0), isDense: true, labelStyle: FlutterFlowTheme.of( context) .labelMedium .override( fontFamily: 'Inter', fontSize: 26.rpx, letterSpacing: 0.0, ), hintText: '体征检测设备.输入关键词'.tr, hintStyle: FlutterFlowTheme .of(context) .labelMedium .override( fontFamily: 'Inter', fontSize: 26.rpx, letterSpacing: 0.0, color: themeController .currentColor .sc4), enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Color(0x00000000), width: 1.rpx, ), borderRadius: BorderRadius.circular( 8.rpx), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Color(0x00000000), width: 1.rpx, ), borderRadius: BorderRadius.circular( 8.rpx), ), errorBorder: OutlineInputBorder( borderSide: BorderSide( color: FlutterFlowTheme.of( context) .error, width: 1.rpx, ), borderRadius: BorderRadius.circular( 8.rpx), ), focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: FlutterFlowTheme.of( context) .error, width: 1.rpx, ), borderRadius: BorderRadius.circular( 8.rpx), ), filled: false, fillColor: FlutterFlowTheme.of( context) .secondaryBackground, ), style: FlutterFlowTheme.of(context) .bodyMedium .override( fontFamily: 'Inter', fontSize: 26.rpx, letterSpacing: 0.0, color: themeController .currentColor.sc3, ), cursorColor: FlutterFlowTheme.of(context) .primaryText, ), ), ), ), Padding( padding: EdgeInsetsDirectional.fromSTEB( 26.rpx, 0, 0, 0), child: Row( mainAxisSize: MainAxisSize.max, children: [ SizedBox( height: 40.rpx, child: VerticalDivider( thickness: 2.rpx, color: themeController .currentColor.sc2, ), ), // Text( // '体征检测设备.搜索'.tr, // style: // FlutterFlowTheme.of(context) // .bodyMedium // .override( // fontFamily: 'Inter', // fontSize: AppConstants() // .normal_text_fontSize, // letterSpacing: 0.0, // color: themeController // .currentColor.sc2, // ), // ), ClickableContainer( backgroundColor: Colors.transparent, highlightColor: themeController .currentColor.sc5, borderRadius: 6.rpx, padding: EdgeInsets.zero, onTap: () async { await bodyDeviceController .getDeviceList( key: bodyDeviceController .keyWord .value); bodyDeviceController .updateAll(); }, child: Text( '体征检测设备.搜索'.tr, style: FlutterFlowTheme.of( context) .bodyMedium .override( fontFamily: 'Inter', fontSize: AppConstants() .normal_text_fontSize, letterSpacing: 0.0, color: themeController .currentColor.sc2, ), ), ), ].divide(SizedBox(width: 14.rpx)), ), ), ], ), ), ), ], ), ), ), ), Obx(() { final isEmpty = bodyDeviceController.deviceList.value.isEmpty; return isEmpty ? Expanded( child: NullDataWidget(), ) : Padding( padding: EdgeInsetsDirectional.fromSTEB( 30.rpx, 26.rpx, 30.rpx, 0), child: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.max, children: bodyDeviceController .deviceList.value .map((device) => DeviceDataComponentWidget( device: device)) .toList() .divide(SizedBox(height: 25.rpx)), ), ), ); }), ], ), ), ), ), ), ), ), ); } Widget _buildDeviceCard(BuildContext context, {required String title, required String imageUrl, required String type}) { return CustomCard( borderRadius: 20.rpx, // 圆角大小 onTap: () { if (type != null) { if (type == '1') { Get.toNamed("/blueteethDevice"); } } }, colors: [themeController.currentColor.sc17], // 背景色 child: Container( width: double.infinity, height: MediaQuery.sizeOf(context).height * 0.135, constraints: BoxConstraints( minHeight: 220.rpx, ), padding: EdgeInsetsDirectional.fromSTEB(77.rpx, 0, 21.rpx, 0), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( title, style: TextStyle( fontFamily: 'Inter', color: const Color(0xFFC2CED7), fontSize: 30.rpx, letterSpacing: 0.0, ), ), ClipRRect( borderRadius: BorderRadius.circular(8.rpx), child: Image.asset( imageUrl, width: 212.rpx, height: 168.rpx, ), ), ], ), ), ); } }