Flutter 仿新版微信长按发送语音

6452e1fda340455a8242e0405fa230f9.jpg

4ce5065bf0a947fc9233497077054337.jpg

 最近刚好做到一个有IM的项目,设计给的图,我一看,这不是微信的语音发送界面嘛,奈何没得轮子,自己撸了一个,语音转文字没有去实现,主要是收费的,除了转文字,和微信也大差不差了。

都是通过GestureDetector处理长按事件,

开始录制语音后,添加一个OverlayEntry,当手指在底部扇形区域,松开发送,离开扇形区域,松开取消,判断手指所在区域的方法:

录音和波形用到了 audio_waveforms,感谢;

其中audio_waveforms的音频振幅数据是全部返回的连贯波形,项目中只需要显示部分,所以波形这块是自己写的。

  • 10
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
你可以使用 `GestureDetector` 组件来监听按事件,并在按时显示一个底部的菜单栏,用于选择多个消息。下面是一个简单的示例代码: ```dart class ChatMessage { final String content; bool selected; ChatMessage(this.content, {this.selected = false}); } class ChatScreen extends StatefulWidget { @override _ChatScreenState createState() => _ChatScreenState(); } class _ChatScreenState extends State<ChatScreen> { final List<ChatMessage> messages = [ ChatMessage("Hello!"), ChatMessage("How are you?"), ChatMessage("I'm fine, thanks."), ChatMessage("What about you?"), ChatMessage("I'm good."), ]; List<ChatMessage> selectedMessages = []; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Chat"), ), body: ListView.builder( itemCount: messages.length, itemBuilder: (context, index) { final message = messages[index]; return GestureDetector( onLongPress: () { setState(() { message.selected = true; selectedMessages.add(message); }); }, child: Container( padding: EdgeInsets.all(16.0), color: message.selected ? Colors.grey[300] : null, child: Text(message.content), ), ); }, ), bottomNavigationBar: selectedMessages.isNotEmpty ? BottomAppBar( child: Row( children: [ IconButton( icon: Icon(Icons.delete), onPressed: () { setState(() { messages.removeWhere((message) => selectedMessages.contains(message)); selectedMessages.clear(); }); }, ), Text("${selectedMessages.length} selected"), ], ), ) : null, ); } } ``` 在这个示例中,我们创建了一个 `ChatMessage` 类来表示聊天消息。`selected` 属性表示该消息是否被选中。在 `ChatScreen` 中,我们创建了一个 `messages` 列表来存储所有的消息,以及一个 `selectedMessages` 列表来存储被选中的消息。在 `ListView.builder` 中,我们使用 `GestureDetector` 来监听按事件,并在按时将消息标记为选中状态,并将其添加到 `selectedMessages` 列表中。在底部菜单栏中,我们显示了一个删除按钮和一个文本框,用于显示选中的消息数量。当用户点击删除按钮时,我们从 `messages` 列表中删除所有被选中的消息,并清空 `selectedMessages` 列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值