IOT/flutterApp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加急停渐变呼吸效果

Browse Source
This commit is contained in:
Songzex
2026-03-25 15:24:52 +08:00
parent 8b0bc814d8
commit 5d28338ed8
1 changed files with 170 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
lib/features/remote_control/presentation/widgets/emergency_overlay.dart
View File

@@ -15,16 +15,18 @@ class _EmergencyOverlayState extends State<EmergencyOverlay>
@override
void initState() {
super.initState();
// 设置动画循环时间，例如 600ms 闪烁一次
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 600),
)..repeat(reverse: true); // 反转运行实现呼吸效果
duration: const Duration(milliseconds: 1500),
)..repeat(reverse: true);
_opacityAnimation = Tween<double>(
begin: 0.0,
end: 0.5,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
begin: 0.3,
end: 0.6,
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));
}
@override
@@ -39,22 +41,169 @@ class _EmergencyOverlayState extends State<EmergencyOverlay>
animation: _opacityAnimation,
builder: (context, child) {
return IgnorePointer(
// 极其重要：确保光晕不遮挡下方的点击事件
child: Container(
decoration: BoxDecoration(
// 使用径向渐变，让四周红，中间透明
border: Border.all(
color: Colors.red.withOpacity(_opacityAnimation.value),
width: 20, // 边框宽度决定了红边的厚度
),
boxShadow: [
BoxShadow(
color: Colors.red.withOpacity(_opacityAnimation.value),
blurRadius: 40,
spreadRadius: 10,
child: Stack(
children: [
// 顶部渐变
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
],
),
),
// 底部渐变
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
// 左侧渐变
Positioned(
top: 0,
bottom: 0,
left: 0,
child: Container(
width: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
// 右侧渐变
Positioned(
top: 0,
bottom: 0,
right: 0,
child: Container(
width: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
// 左上角渐变
Positioned(
top: 0,
left: 0,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment.topLeft,
radius: 1.2,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
// 右上角渐变
Positioned(
top: 0,
right: 0,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment.topRight,
radius: 1.2,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
// 左下角渐变
Positioned(
bottom: 0,
left: 0,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment.bottomLeft,
radius: 1.2,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
// 右下角渐变
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment.bottomRight,
radius: 1.2,
colors: [
Colors.red.withOpacity(_opacityAnimation.value),
Colors.transparent,
],
stops: const [0.0, 1.0],
),
),
),
),
],
),
);
},