You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 11:22:57