Flutter语音笔记应用麦克风按钮状态更新延迟问题求助
Flutter语音笔记应用麦克风按钮状态更新延迟问题求助
大家好,我最近在开发一款支持麦克风输入的语音笔记App,目前核心功能都跑通了,但遇到了一个影响体验的棘手问题——麦克风按钮的状态更新实在太慢了!
每次点击按钮,麦克风图标本该立刻切换(从mic_off变mic,或者反过来),但现在要等1到2秒才会变化,这完全不符合预期,用户体验特别差。我用了第三方的语音转文字包,下面是这个麦克风按钮组件的完整代码,麻烦各位大佬帮忙看看问题出在哪?
import 'package:ai_notes_app/core/constants/colors.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; class MicButton extends ConsumerStatefulWidget { const MicButton({super.key, required this.onTap}); final VoidCallback onTap; @override ConsumerState<MicButton> createState() => _MicButtonState(); } class _MicButtonState extends ConsumerState<MicButton> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _glowAnimation; bool isAnimating = false; @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 1000), ); _glowAnimation = Tween<double>( begin: 0.0, end: 20.0, ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut)); } void _toggleMic() { final shouldAnimate = !isAnimating; setState(() { isAnimating = shouldAnimate; }); WidgetsBinding.instance.addPostFrameCallback((_) { if (shouldAnimate) { _controller ..reset() ..forward() ..repeat(reverse: true); } else { _controller ..stop() ..reset(); } widget.onTap(); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return GestureDetector( onTap: _toggleMic, child: AnimatedBuilder( animation: _glowAnimation, builder: (context, child) { return Container( decoration: BoxDecoration( shape: BoxShape.circle, boxShadow: [ const BoxShadow( color: Colors.blue, blurRadius: 10, spreadRadius: 3, ), if (isAnimating) BoxShadow( color: Colors.blue.withOpacity(0.5), blurRadius: _glowAnimation.value, spreadRadius: _glowAnimation.value, ), ], ), child: child, ); }, child: Card( shape: const CircleBorder(), child: CircleAvatar( radius: 40, backgroundColor: AppColors.paleBlue, child: Icon( isAnimating ? Icons.mic : Icons.mic_off, size: 40, color: AppColors.black, ), ), ), ), ); } }
我本来以为把setState放在最前面,先更新isAnimating状态,再处理动画和回调逻辑会立刻生效,但实际图标还是要等很久才变。会不会是widget.onTap()里的语音初始化/停止逻辑阻塞了UI线程?或者我的动画状态更新的写法有问题?麻烦各位帮忙排查一下,谢谢啦!
内容来源于stack exchange
相关产品推荐
相关产品推荐

