Flutter鸿蒙next 实现长按录音按钮及动画特效

在 Flutter 中实现长按录音按钮并且添加动画特效,是一个有趣且实用的功能。本文将通过实现一个具有动画效果的长按录音按钮,带领你一步步了解如何使用 Flutter 完成这个任务,并解释每一部分的实现。

一、功能需求

我们需要一个按钮,当用户长按时,开始录音并且显示相应的录音进度。长按结束时,停止录音并显示录音的结果。同时,在长按时,按钮应该具备一个动画效果,展示录音进度或指示正在录音。

二、实现思路

  1. 按钮UI设计:使用 GestureDetector 监听长按手势,设置不同的状态(长按开始、录音中、录音结束)。
  2. 动画效果:使用 AnimatedContainer 或 AnimationController 配合 Tween 实现按钮的尺寸变化、颜色变化等动画效果,提升用户体验。
  3. 录音功能:利用 Flutter 的录音插件 flutter_sound 来实现录音功能。

三、代码实现

1. 添加依赖

pubspec.yaml 文件中添加所需的依赖:

yamldependencies: flutter: sdk: flutter flutter_sound: ^9.1.9 # 音频录制插件

2. 编写UI和动画逻辑

import 'package:flutter/material.dart';
import 'package:flutter_sound/flutter_sound.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: '长按录音按钮',theme: ThemeData(primarySwatch: Colors.blue),home: RecordingButton(),);}
}class RecordingButton extends StatefulWidget {@override_RecordingButtonState createState() => _RecordingButtonState();
}class _RecordingButtonState extends State<RecordingButton> with TickerProviderStateMixin {FlutterSoundRecorder _recorder;  // 录音器bool _isRecording = false;  // 是否正在录音double _progress = 0.0;  // 录音进度AnimationController _animationController;  // 动画控制器Animation<double> _scaleAnimation;  // 缩放动画Animation<Color?> _colorAnimation;  // 颜色变化动画@overridevoid initState() {super.initState();_recorder = FlutterSoundRecorder();_initRecorder();_initAnimations();}// 初始化录音器void _initRecorder() async {await _recorder.openAudioSession();}// 初始化动画控制器void _initAnimations() {_animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 200),);_scaleAnimation = Tween<double>(begin: 1.0, end: 1.2).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),);_colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),);}// 开始录音void _startRecording() async {await _recorder.startRecorder(toFile: 'audio.aac');setState(() {_isRecording = true;});_animationController.forward();_recordingProgress();}// 停止录音void _stopRecording() async {await _recorder.stopRecorder();setState(() {_isRecording = false;_progress = 0.0;});_animationController.reverse();}// 录音进度void _recordingProgress() async {while (_isRecording) {await Future.delayed(Duration(milliseconds: 100));final progress = await _recorder.getRecordingDuration();setState(() {_progress = progress.inSeconds.toDouble();});if (_progress >= 10) { // 假设录音最大为10秒_stopRecording();}}}@overridevoid dispose() {_recorder.closeAudioSession();_animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('长按录音按钮')),body: Center(child: GestureDetector(onLongPress: _startRecording,onLongPressEnd: (_) => _stopRecording(),child: AnimatedBuilder(animation: _animationController,builder: (context, child) {return Container(width: 150,height: 150,decoration: BoxDecoration(color: _colorAnimation.value,shape: BoxShape.circle,),child: Center(child: ScaleTransition(scale: _scaleAnimation,child: Icon(_isRecording ? Icons.stop : Icons.mic,color: Colors.white,size: 80,),),),);},),),),);}
}

3. 代码详细解释

1. UI 和手势操作

我们使用了 GestureDetector 来监听用户的长按手势:

  • onLongPress:当用户长按按钮时,调用 _startRecording 函数开始录音。
  • onLongPressEnd:当长按结束时,调用 _stopRecording 停止录音。

通过 AnimatedBuilder 来监听动画状态变化,更新 UI。

2. 录音功能

我们使用 flutter_sound 插件来处理录音功能:

  • _recorder.startRecorder(toFile: 'audio.aac'):开始录音并保存为 audio.aac 文件。
  • _recorder.stopRecorder():停止录音。
  • _recorder.getRecordingDuration():获取录音进度,通过 inSeconds 获取已录制的时间。
3. 动画效果

我们通过 AnimationControllerTween 来控制动画:

  • _scaleAnimation:通过 ScaleTransition 实现按钮的缩放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468526.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构 —— 红黑树

目录 1. 初识红黑树 1.1 红黑树的概念 1.2 红⿊树的规则 1.3 红黑树如何确保最长路径不超过最短路径的2倍 1.4 红黑树的效率:O(logN) 2. 红黑树的实现 2.1 红黑树的基础结构框架 2.2 红黑树的插⼊ 2.2.1 情况1&#xff1a;变色 2.2.2 情况2&#xff1a;单旋变色 2.2…

丹摩征文活动|AIGC实践-基于丹摩算力和CogVideoX-2b实现文生视频

一、CogVideoX简介 CogVideoX 是由智谱AI开源的新一代视频生成模型&#xff0c;属于大型语言模型在多模态应用中的重要突破。CogVideoX-2b 版本在参数规模和推理速度上进行了优化&#xff0c;支持视频从文本描述生成&#xff0c;并进一步提升了视频的分辨率和流畅度。相比于上…

麦当劳自助点餐机——实现

餐厅自助点餐优点 1. 降低服务成本&#xff1a; - 减少了对服务员数量的需求&#xff0c;降低了人力成本。 - 减轻了服务员的工作负担&#xff0c;使其能够更专注于提供优质的服务&#xff0c;如解决顾客的特殊需求和处理复杂问题。 2. 提升点餐效率和准确性&#xf…

Linux【基础篇】T

如何安装Linux操作系统&#xff1f; 1.直接把笔记本的Windows干掉&#xff0c;单独安装Linux系统&#xff08;初学者对于Linux使用还是比较苦难&#xff09;。 2.可以安装双系统&#xff08;开机也是命令行&#xff09;&#xff0c;电脑配置要高。 3.可以安装虚拟机。 --如果…

Linux操作系统之软件安装与包管理器工具

一、实验目的 1、掌握常用的软件包管理器RPM、YUM的使用&#xff1b; 2、掌握内网YUM源的配置方法。 二、实验环境 1台PC、VMware虚拟机、2个CentOS7操作系统 三、实验步骤及内容 1、使用RPM软件包管理器安装软件 (1)从阿里云https://mirrors.aliyun.com/下载CentOS7操作…

贯穿式学习MySQL

注&#xff1a;MySQL版本众多&#xff0c;本次讲述的内容以MySQL8.0.34版本为准 范式化设计 范式具体是用来干嘛的&#xff1f; 我们在设计关系数据库时&#xff0c;要遵从不同的规范要求&#xff0c;设计出合理的关系型数据库&#xff0c;这些不同的规范要求被称为不同的范式…

web——[SUCTF 2019]EasySQL1——堆叠注入

这个题主要是讲述了堆叠注入的用法&#xff0c;来复现一下 什么是堆叠注入 堆叠注入&#xff1a;将多条SQL语句放在一起&#xff0c;并用分号;隔开。 1.查看数据库的名称 查看数据库名称 1;show databases; 发现有名称为ctftraining的数据库 2.对表进行查询 1;show tabl…

「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件

本篇将带你实现一个自定义评分星级组件&#xff0c;用户可以通过点击星星进行评分&#xff0c;并实时显示评分结果。为了让界面更具吸引力&#xff0c;我们还将添加一只小猫图片作为评分的背景装饰。 关键词 UI互动应用评分系统自定义星级组件状态管理用户交互 一、功能说明 …

发布 VectorTraits v3.0(支持 X86架构的Avx512系列指令集,支持 Wasm架构及PackedSimd指令集等)

文章目录 支持 X86架构的Avx512系列指令集支持Avx512时的输出信息 支持 Wasm架构及PackedSimd指令集支持PackedSimd时的输出信息VectorTraits.Benchmarks.Wasm 使用说明 新增了向量方法支持 .NET 8.0 新增的向量方法提供交织与解交织的向量方法YGroup3Unzip的范例代码 提供重新…

分布式数据库中间件mycat

MyCat MyCat是一个开源的分布式数据库系统&#xff0c;它实现了MySQL协议&#xff0c;可以作为数据库代理使用。 MyCat(中间件)的核心功能是分库分表&#xff0c;即将一个大表水平分割为多个小表&#xff0c;存储在后端的MySQL服务器或其他数据库中。 它不仅支持MySQL&#xff…

操作系统学习笔记-3.2虚拟内存

文章目录 虚拟内存请求分页管理方式页面置换算法最佳置换算法工作原理OPT 算法的示例最佳置换算法的优点和缺点 先进先出置换算法最近最久未使用时钟置换算法时钟置换算法的工作原理&#xff1a;算法的步骤&#xff1a; 改进型时钟置换算法改进型时钟置换算法的特点&#xff1a…

【计网】物理层学习笔记

【计网】物理层 物理层概述 物理层要实现的功能 在各种传输媒体上传输比特0和1&#xff0c;进而为上面的数据链路层提供透明传输比特流的作用。 物理层接口特性 物理层之下的传输媒体 传输媒体是计网设备之间的物理通路&#xff0c;也称为传输介质。 传输媒体并不包含在…

python机器人Agent编程——实现一个本地大模型和爬虫结合的手机号归属地天气查询Agent

目录 一、前言二、准备工作三、Agent结构四、python模块实现4.1 实现手机号归属地查询工具4.2实现天气查询工具4.3定义创建Agent主体4.4创建聊天界面 五、小结PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源ps3.wifi小车控制相关…

Spring MVC(一)

1. Spring MVC是什么&#xff1f; 搞清楚Spring MVC之前先搞清楚MVC是什么&#xff1f;MVC是一种架构设计模式&#xff0c;也就是一种思想&#xff0c;M是Model&#xff0c;V是View&#xff0c;C是Controller。他们之间的关系举一个例子来介绍。比如去饭店吃饭&#xff0c;一进…

文件操作:Xml转Excel

1 添加依赖 Spire.Xls.jar <dependency><groupId>e-iceblue</groupId><artifactId>spire.xls</artifactId><version>5.3.3</version></dependency>2 代码使用 package cctd.controller;import com.spire.xls.FileFormat; im…

C语言中的 printf( ) 与 scanf( )

时隔多日&#xff0c;小编我又回来咯小编相信之前的博客能够给大家带来不少的收获。在我们之前的文章中&#xff0c;许多代码块的例子都用到了printf( ) 与 scanf( )这两个函数&#xff0c;大家都知道他们需要声明头文件之后才能使用&#xff0c;那这两个函数是什么呢&#xff…

Yocto 项目下通过网络更新内核、设备树及模块

Yocto 项目下通过网络更新内核、设备树及模块 前言 在 Yocto 项目的开发过程中&#xff0c;特别是在进行 BSP&#xff08;Board Support Package&#xff09;开发时&#xff0c;经常需要调整特定软件包的版本&#xff0c;修改内核、设备树以及内核模块。然而&#xff0c;每次…

算法每日双题精讲——双指针(移动零,复写零)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…

数据库的使用02:SQLServer的连接字符串、备份、还原、SQL监视相关设置

目录 一、连接字符串 【本地连接字符串】 【远程连接字符串】 二、备份 三、还原 &#xff08;1&#xff09;还原数据库-bak、btn文件 &#xff08;2&#xff09;附加数据库mdf文件 四、SQL监视器的使用 一、连接字符串 【本地连接字符串】 server DESKTOP-FTH2P3S; Da…

使用SearXNG-搭建个人搜索引擎(附国内可用Docker镜像源)

介绍 SearXNG是聚合了七十多种搜索服务的开源搜索工具。我们可以匿名浏览页面&#xff0c;不会被记录和追踪。作为开发者&#xff0c;SearXNG也提供了清晰的API接口以及完整的开发文档。 部署 我们可以很方便地使用Docker和Docker compose部署SearXNG。下面给出Docker部署Se…