一、核心交互逻辑拆解

微信新版语音发送的交互流程包含三个关键阶段：长按触发录音、滑动取消判断、松手结束处理。每个阶段都需要精确的状态管理和动画反馈。

1.1 长按触发机制

使用GestureDetector的onLongPress事件作为录音起点，配合AbsorbPointer防止误触。关键参数配置：

GestureDetector(
  onLongPress: () {
    _startRecording();
    _showRecordingUI();
  },
  onLongPressUp: () {
    _stopRecording(cancelled: false);
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.grey[200],
    child: Center(child: Text('按住说话')),
  ),
)

1.2 滑动取消判定

通过PanGestureRecognizer监听手指移动方向，当Y轴位移超过阈值（建议屏幕高度的1/5）时触发取消状态：

final _panRecognizer = PanGestureRecognizer()
  ..onUpdate = (details) {
    if (details.delta.dy.abs() > 50) { // 50像素阈值
      setState(() => _isCanceling = details.delta.dy < 0); // 向上滑动取消
    }
  };

1.3 松手结束处理

根据_isCanceling状态决定是否保存录音文件，使用Future.delayed实现0.3秒的松手动画延迟：

void _handleRelease() {
  Future.delayed(Duration(milliseconds: 300), () {
    if (_isCanceling) {
      _deleteTempFile();
    } else {
      _uploadRecording();
    }
    _resetState();
  });
}

二、波形动画实现方案

2.1 音频数据可视化

使用flutter_sound库获取实时音频振幅，通过CustomPaint绘制动态波形：

class WavePainter extends CustomPainter {
  final List<double> amplitudes;
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2;
    final path = Path();
    for (int i = 0; i < amplitudes.length; i++) {
      final x = size.width * (i / amplitudes.length);
      final y = size.height / 2 - amplitudes[i] * 50;
      if (i == 0) {
        path.moveTo(x, y);
      } else {
        path.lineTo(x, y);
      }
    }
    canvas.drawPath(path, paint);
  }
}

2.2 性能优化策略

使用List.generate固定波形点数（建议64个点）
通过ValueNotifier实现波形更新，避免不必要的重建
启用硬件加速：renderMethod: RenderMethod.canvas

三、状态管理架构设计

3.1 状态机模型

定义五种核心状态：

enum RecordingState {
  idle,
  preparing,
  recording,
  canceling,
  processing
}

3.2 Provider实现示例

class RecordingProvider with ChangeNotifier {
  RecordingState _state = RecordingState.idle;
  void startRecording() {
    _state = RecordingState.recording;
    notifyListeners();
  }
  // 其他状态变更方法...
}

四、完整组件实现

4.1 语音按钮组件

class VoiceButton extends StatefulWidget {
  @override
  _VoiceButtonState createState() => _VoiceButtonState();
}
class _VoiceButtonState extends State<VoiceButton> {
  bool _isCanceling = false;
  final _amplitudes = <double>[];
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        GestureDetector(
          onLongPress: _startRecording,
          onLongPressUp: _stopRecording,
          child: AnimatedContainer(
            duration: Duration(milliseconds: 200),
            decoration: BoxDecoration(
              color: _isCanceling ? Colors.red[100] : Colors.blue[100],
              borderRadius: BorderRadius.circular(50),
            ),
            child: Icon(
              _isCanceling ? Icons.close : Icons.mic,
              size: 48,
            ),
          ),
        ),
        if (_amplitudes.isNotEmpty)
          Positioned(
            bottom: 20,
            child: WavePainter(amplitudes: _amplitudes),
          ),
      ],
    );
  }
  // 录音方法实现...
}

五、常见问题解决方案

5.1 录音权限处理

Future<bool> _checkPermission() async {
  final status = await Permission.microphone.request();
  return status.isGranted;
}

5.2 内存泄漏防护

使用WidgetsBinding.instance.addPostFrameCallback清理资源
实现dispose方法释放音频播放器

5.3 跨平台适配

iOS需在Info.plist添加：

<key>NSMicrophoneUsageDescription</key>
<string>需要麦克风权限发送语音消息</string>

六、性能优化建议

录音采样率设置为16000Hz（CD质量为44100Hz）
波形更新频率控制在30FPS
使用isolate处理音频编码
启用Skia图形库硬件加速

七、扩展功能实现

7.1 语音转文字

集成flutter_tts和speech_recognition插件：

Future<void> _recognizeSpeech() async {
  final SpeechRecognition _speech = SpeechRecognition();
  await _speech.activate();
  _speech.listen(onResult: (text) {
    setState(() => _transcription = text);
  });
}

7.2 语音进度条

使用AnimatedContainer实现进度动画：

AnimatedContainer(
  duration: Duration(milliseconds: 100),
  width: MediaQuery.of(context).size.width * _progress,
  height: 4,
  color: Colors.blue,
)

八、完整项目结构建议

lib/
├── components/
│   └── voice_button.dart
├── providers/
│   └── recording_provider.dart
├── utils/
│   ├── audio_processor.dart
│   └── wave_generator.dart
└── main.dart

通过以上实现方案，开发者可以构建出与微信新版高度相似的语音交互体验。实际开发中建议先实现核心录音功能，再逐步添加波形动画、滑动取消等高级特性。对于商业项目，可考虑使用flutter_sound或audio_service等专业音频库提升稳定性。

Flutter仿微信新版语音交互：从长按到松手的完整实现指南