logo

开发者热搜

Flutter实战：从零实现微信式语音发送交互

作者：c4t2025.09.23 11:56浏览量：1

简介：本文深入解析Flutter中实现微信风格语音按钮和页面的完整方案，涵盖手势识别、音频录制、UI动画等核心功能，提供可复用的代码实现和优化建议。

一、需求分析与功能拆解

微信语音发送功能包含三个核心交互：

  1. 长按录音：手指按下触发录音，松开结束
  2. 滑动取消：向左滑动显示”松开手指取消发送”提示
  3. 视觉反馈：按钮按下动画、录音波纹效果、取消状态样式

技术实现需解决三个关键问题：

  • 精确的手势状态监听（按下/移动/松开）
  • 音频录制与停止的精准控制
  • 多状态UI的流畅过渡动画

二、核心组件实现

1. 自定义语音按钮组件

  1. class VoiceButton extends StatefulWidget {
  2.   const VoiceButton({Key? key}) : super(key: key);
  4.   @override
  5.   State<VoiceButton> createState() => _VoiceButtonState();
  6. }
  8. class _VoiceButtonState extends State<VoiceButton> {
  9.   bool _isRecording = false;
  10.   bool _isCanceling = false;
  11.   Offset? _startPosition;
  13.   @override
  14.   Widget build(BuildContext context) {
  15.     return GestureDetector(
  16.       onPanStart: (details) {
  17.         _startPosition = details.localPosition;
  18.         setState(() => _isRecording = true);
  19.         _startRecording();
  20.       },
  21.       onPanUpdate: (details) {
  22.         final dx = details.localPosition.dx - (_startPosition?.dx ?? 0);
  23.         setState(() => _isCanceling = dx < -50); // 向左滑动50px触发取消
  24.       },
  25.       onPanEnd: (details) {
  26.         if (_isRecording) {
  27.           _stopRecording(!_isCanceling);
  28.           setState(() {
  29.             _isRecording = false;
  30.             _isCanceling = false;
  31.           });
  32.         }
  33.       },
  34.       child: Container(
  35.         width: 80,
  36.         height: 80,
  37.         decoration: BoxDecoration(
  38.           shape: BoxShape.circle,
  39.           color: _isRecording 
  40.             ? (_isCanceling ? Colors.red : Colors.green) 
  41.             : Colors.blue,
  42.           boxShadow: [
  43.             BoxShadow(
  44.               color: Colors.black26,
  45.               blurRadius: 5,
  46.               offset: Offset(0, 2),
  47.             )
  48.           ],
  49.         ),
  50.         child: Center(
  51.           child: Icon(
  52.             _isRecording ? Icons.mic : Icons.mic_none,
  53.             color: Colors.white,
  54.             size: 32,
  55.           ),
  56.         ),
  57.       ),
  58.     );
  59.   }
  61.   void _startRecording() {
  62.     // 实际项目中调用录音插件
  63.     debugPrint('开始录音...');
  64.   }
  66.   void _stopRecording(bool shouldSend) {
  67.     // 实际项目中停止录音并处理结果
  68.     debugPrint(shouldSend ? '发送语音' : '取消发送');
  69.   }
  70. }

2. 录音状态管理

推荐使用provider或riverpod进行状态管理：

  1. class VoiceRecorderProvider with ChangeNotifier {
  2.   RecordingStatus _status = RecordingStatus.idle;
  3.   double _volume = 0.0;
  5.   RecordingStatus get status => _status;
  6.   double get volume => _volume;
  8.   Future<void> startRecording() async {
  9.     _status = RecordingStatus.recording;
  10.     notifyListeners();
  12.     // 模拟音量变化
  13.     for (int i = 0; i < 10; i++) {
  14.       await Future.delayed(Duration(milliseconds: 300));
  15.       _volume = Random().nextDouble() * 0.8 + 0.2;
  16.       notifyListeners();
  17.     }
  18.   }
  20.   void stopRecording(bool shouldSend) {
  21.     _status = shouldSend 
  22.       ? RecordingStatus.finished 
  23.       : RecordingStatus.cancelled;
  24.     notifyListeners();
  25.   }
  26. }
  28. enum RecordingStatus { idle, recording, finished, cancelled }

3. 录音波纹动画实现

使用CustomPaint绘制动态波纹：

  1. class VoiceWavePainter extends CustomPainter {
  2.   final double volume;
  3.   final double radius;
  5.   VoiceWavePainter({required this.volume, required this.radius});
  7.   @override
  8.   void paint(Canvas canvas, Size size) {
  9.     final paint = Paint()
  10.       ..color = Colors.blue.withOpacity(0.6)
  11.       ..style = PaintingStyle.stroke
  12.       ..strokeWidth = 2;
  14.     final center = Offset(size.width / 2, size.height / 2);
  16.     // 绘制5个同心圆，半径随音量变化
  17.     for (int i = 0; i < 5; i++) {
  18.       final currentRadius = radius * (0.3 + i * 0.15) * volume;
  19.       canvas.drawCircle(center, currentRadius, paint);
  20.     }
  21.   }
  23.   @override
  24.   bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
  25. }

三、完整页面实现

  1. class VoiceMessagePage extends StatelessWidget {
  2.   const VoiceMessagePage({Key? key}) : super(key: key);
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(title: Text('语音消息')),
  8.       body: Column(
  9.         mainAxisAlignment: MainAxisAlignment.end,
  10.         children: [
  11.           // 录音提示区域
  12.           Container(
  13.             padding: EdgeInsets.symmetric(horizontal: 20),
  14.             child: Consumer<VoiceRecorderProvider>(
  15.               builder: (context, provider, child) {
  16.                 if (provider.status == RecordingStatus.recording) {
  17.                   return Column(
  18.                     children: [
  19.                       SizedBox(height: 20),
  20.                       Text(
  21.                         '手指上滑，取消发送',
  22.                         style: TextStyle(color: Colors.grey),
  23.                       ),
  24.                       SizedBox(height: 30),
  25.                       CustomPaint(
  26.                         size: Size(200, 200),
  27.                         painter: VoiceWavePainter(
  28.                           volume: provider.volume,
  29.                           radius: 80,
  30.                         ),
  31.                       ),
  32.                       SizedBox(height: 10),
  33.                       Text('${(provider.volume * 5).toInt()}秒'),
  34.                     ],
  35.                   );
  36.                 }
  37.                 return SizedBox.shrink();
  38.               },
  39.             ),
  40.           ),
  42.           // 语音按钮
  43.           Padding(
  44.             padding: EdgeInsets.only(bottom: 50),
  45.             child: VoiceButton(),
  46.           ),
  47.         ],
  48.       ),
  49.     );
  50.   }
  51. }

四、关键技术点解析

1. 音频录制实现

推荐使用flutter_sound插件：

  1. // 初始化录音器
  2. final _audioRecorder = FlutterSoundRecorder();
  3. await _audioRecorder.openAudioSession();
  5. // 开始录音
  6. await _audioRecorder.startRecorder(
  7.   toFile: 'audio_path.aac',
  8.   codec: Codec.aacADTS,
  9. );
  11. // 停止录音
  12. final path = await _audioRecorder.stopRecorder();

2. 手势处理优化

  • 使用GestureDetector的onPan系列方法替代onLongPress，获得更精确的控制
  • 计算滑动距离时考虑按钮中心点而非触摸起点
  • 添加防抖处理避免误触发

3. 性能优化策略

  1. 动画优化：使用const构造器减少Widget重建
  2. 录音控制：及时释放音频资源避免内存泄漏
  3. 状态管理：避免不必要的notifyListeners调用

五、完整项目集成建议

  1. 插件依赖：

    1. dependencies:
    2. flutter_sound: ^9.2.0
    3. provider: ^6.0.0

  2. 权限配置：
    ```xml

// iOS

NSMicrophoneUsageDescription

需要麦克风权限来录制语音消息

  2. 3. **测试建议**：
  3. - 使用模拟器测试不同设备尺寸
  4. - 测试各种手势操作边界情况
  5. - 监控内存使用情况
  7. # 六、扩展功能实现
  8. ## 1. 语音时长显示
  9. ```dart
  10. class VoiceDurationIndicator extends StatelessWidget {
  11.   final int duration; // 秒数
  13.   @override
  14.   Widget build(BuildContext context) {
  15.     return Text(
  16.       '${Duration(seconds: duration).format()}',
  17.       style: TextStyle(
  18.         color: Colors.white,
  19.         fontSize: 16,
  20.         fontWeight: FontWeight.bold,
  21.       ),
  22.     );
  23.   }
  24. }
  26. extension on Duration {
  27.   String format() {
  28.     final minutes = inMinutes.remainder(60);
  29.     final seconds = inSeconds.remainder(60);
  30.     return '$minutes:${seconds.toString().padLeft(2, '0')}';
  31.   }
  32. }

2. 发送状态反馈

  1. enum SendStatus {
  2.   sending,
  3.   success,
  4.   failed
  5. }
  7. class SendStatusIndicator extends StatelessWidget {
  8.   final SendStatus status;
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return AnimatedSwitcher(
  13.       duration: Duration(milliseconds: 300),
  14.       child: status == SendStatus.sending
  15.           ? CircularProgressIndicator()
  16.           : status == SendStatus.success
  17.               ? Icon(Icons.check_circle, color: Colors.green)
  18.               : Icon(Icons.error, color: Colors.red),
  19.     );
  20.   }
  21. }

七、常见问题解决方案

  1. 录音权限问题：

    • 确保在Info.plist和AndroidManifest.xml中正确配置
    • 运行时检查权限：Permission.microphone.request()

  2. 录音中断处理：

    1. _audioRecorder.setSubscriptionDurationCallback(
    2. const Duration(milliseconds: 100),
    3. (recordingData) {
    4.  if (recordingData.duration.inSeconds > 60) {
    5.    _stopRecording(true); // 超过60秒自动停止
    6.  }
    7. },
    8. );

  3. UI卡顿问题：

    • 将录音波纹动画放在CustomPaint中而非多个Container
    • 使用RepaintBoundary隔离动画区域

八、总结与展望

本实现完整复现了微信语音发送的核心交互，通过组合GestureDetector、CustomPaint和状态管理实现了流畅的用户体验。实际项目中可进一步优化：

  1. 添加语音波形可视化
  2. 实现语音试听功能
  3. 增加发送进度显示
  4. 适配多语言环境

完整代码示例已包含核心功能实现，开发者可根据实际需求进行调整扩展。建议在实际项目中使用riverpod进行状态管理，并添加更完善的错误处理机制。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询