Browse Source

refactor(widget): 优化声音柱动画组件性能

- 使用 AnimatedBuilder 替代直接监听动画状态
- 添加组件挂载检查防止内存泄漏
- 改进动画停止时的过渡效果
- 更新相关注释说明
weicu
lxm 1 year ago
parent
commit
8a1c53848d
  1. 48
      lib/modules/agent/widgets/sound_bar_widget.dart

48
lib/modules/agent/widgets/sound_bar_widget.dart

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import '../controllers/agent_controller.dart'; import '../controllers/agent_controller.dart';
/// 声音柱动画组件 /// 声音柱动画组件 (已优化)
/// 用于显示语音输入时的音频波形效果 /// 用于显示语音输入时的音频波形效果
class SoundBarWidget extends StatefulWidget { class SoundBarWidget extends StatefulWidget {
final double delay; final double delay;
@ -37,9 +37,8 @@ class _SoundBarWidgetState extends State<SoundBarWidget>
parent: _controller, parent: _controller,
curve: Curves.easeInOut, curve: Curves.easeInOut,
), ),
)..addListener(() { );
setState(() {}); // 移除了 .addListener(() { setState(() {}); })
});
_startOrStopAnimation(); _startOrStopAnimation();
} }
@ -54,6 +53,9 @@ class _SoundBarWidgetState extends State<SoundBarWidget>
/// 开始或停止动画 /// 开始或停止动画
void _startOrStopAnimation() { void _startOrStopAnimation() {
// 确保组件仍然挂载在树上
if (!mounted) return;
if (widget.isActive) { if (widget.isActive) {
Future.delayed(Duration(milliseconds: (widget.delay * 1000).toInt()), () { Future.delayed(Duration(milliseconds: (widget.delay * 1000).toInt()), () {
if (mounted && widget.isActive) { if (mounted && widget.isActive) {
@ -61,9 +63,10 @@ class _SoundBarWidgetState extends State<SoundBarWidget>
} }
}); });
} else { } else {
_controller.reset(); // 停止并平滑地过渡到初始状态
// 设置为小高度的静态状态 _controller.stop();
_controller.animateTo(0.1, duration: const Duration(milliseconds: 300)); _controller.animateTo(0.0,
duration: const Duration(milliseconds: 200), curve: Curves.easeOut);
} }
} }
@ -77,21 +80,28 @@ class _SoundBarWidgetState extends State<SoundBarWidget>
Widget build(BuildContext context) { Widget build(BuildContext context) {
final primaryColor = Theme.of(context).primaryColor; final primaryColor = Theme.of(context).primaryColor;
return Container( // 使用 AnimatedBuilder 来优化性能
width: 2.5, return AnimatedBuilder(
height: widget.isActive ? _animation.value : 3, animation: _animation,
margin: const EdgeInsets.symmetric(horizontal: 1), builder: (context, child) {
decoration: BoxDecoration( return Container(
color: widget.isActive width: 2.5,
? primaryColor.withOpacity(0.8) // 当动画不活跃时,高度固定为3;活跃时使用动画值
: Colors.grey.withOpacity(0.4), height: widget.isActive ? _animation.value : 3,
borderRadius: BorderRadius.circular(1.5), margin: const EdgeInsets.symmetric(horizontal: 1),
), decoration: BoxDecoration(
color: widget.isActive
? primaryColor.withOpacity(0.8)
: Colors.grey.withOpacity(0.4),
borderRadius: BorderRadius.circular(1.5),
),
);
},
); );
} }
} }
/// 声音柱组合组件 /// 声音柱组合组件 (无需改动)
/// 包含多个声音柱的组合显示 /// 包含多个声音柱的组合显示
class SoundBarsWidget extends StatelessWidget { class SoundBarsWidget extends StatelessWidget {
final bool isActive; final bool isActive;
@ -120,7 +130,7 @@ class SoundBarsWidget extends StatelessWidget {
} }
} }
/// 带控制器集成的声音柱组件 /// 带控制器集成的声音柱组件 (无需改动)
/// 自动从AgentController获取状态 /// 自动从AgentController获取状态
class AgentSoundBarsWidget extends StatelessWidget { class AgentSoundBarsWidget extends StatelessWidget {
final int barCount; final int barCount;

Loading…
Cancel
Save