134 lines
4.0 KiB
Dart
134 lines
4.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:flutter_svg/svg.dart';
|
|
|
|
import '../bloc/remote_control_cubit.dart';
|
|
|
|
class EmergencyStopButton extends StatefulWidget {
|
|
final double width;
|
|
const EmergencyStopButton({
|
|
Key? key,
|
|
this.width = 120,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
State<EmergencyStopButton> createState() => _EmergencyStopButtonState();
|
|
}
|
|
|
|
class _EmergencyStopButtonState extends State<EmergencyStopButton>
|
|
with TickerProviderStateMixin {
|
|
late AnimationController _progressController;
|
|
bool _isPressing = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_progressController = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(seconds: 3),
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_progressController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// 监听 Cubit 中的急停状态
|
|
final isEmergencyActive = context
|
|
.watch<RemoteControlCubit>()
|
|
.state
|
|
.isEmergency;
|
|
|
|
final width = widget.width * 0.65;
|
|
final double indicatorSize = width + 10;
|
|
|
|
return GestureDetector(
|
|
// 1. 处理点击：仅在未急停时触发
|
|
onTap: () {
|
|
if (!isEmergencyActive) {
|
|
context.read<RemoteControlCubit>().updateEmergency(true);
|
|
HapticFeedback.heavyImpact(); // 震动反馈
|
|
}
|
|
},
|
|
// 2. 处理长按开始：仅在已急停时触发解除逻辑
|
|
onLongPressStart: (_) {
|
|
if (isEmergencyActive) {
|
|
setState(() => _isPressing = true);
|
|
_progressController.forward(from: 0).then((_) {
|
|
if (_isPressing) {
|
|
// 进度走完且仍在按压
|
|
context.read<RemoteControlCubit>().updateEmergency(false);
|
|
HapticFeedback.vibrate();
|
|
setState(() => _isPressing = false);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
// 3. 处理松手：重置进度
|
|
onLongPressEnd: (_) {
|
|
_isPressing = false;
|
|
_progressController.stop();
|
|
_progressController.value = 0;
|
|
setState(() {});
|
|
},
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
// 对应 Compose 的 Canvas 绘制进度环
|
|
if (_isPressing)
|
|
SizedBox(
|
|
width: indicatorSize,
|
|
height: indicatorSize,
|
|
child: CircularProgressIndicator(
|
|
value: _progressController.value,
|
|
strokeWidth: 10,
|
|
color: Colors.red.withOpacity(0.8),
|
|
backgroundColor: Colors.red.withValues(alpha: 0.2),
|
|
),
|
|
),
|
|
|
|
Container(
|
|
width: width,
|
|
height: width,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
// 根据状态切换颜色，对应 Color(0x80C53030)
|
|
color: isEmergencyActive
|
|
? Colors.red.withOpacity(0.5)
|
|
: const Color(0x80C53030),
|
|
boxShadow: isEmergencyActive
|
|
? [
|
|
BoxShadow(
|
|
color: Colors.red.withValues(alpha: 0.5),
|
|
blurRadius: 20,
|
|
),
|
|
]
|
|
: [],
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
SvgPicture.asset('assets/svgs/remote_alert.svg',width: width * 0.4,color: Colors.white.withValues(alpha: 0.5),),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
isEmergencyActive ? "急停中" : "急停",
|
|
style: TextStyle(
|
|
color: Colors.white.withValues(alpha: 0.5),
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w900,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|