Flutter-仿淘宝京东录音识别图标效果

效果

custom.gif

需求
  • 弹起键盘,录制按钮紧挨着输入框
  • 收起键盘,录制按钮回到初始位置
实现
  • 第一步:监听键盘弹起并获取键盘高度
  • 第二步:根据键盘高度,录制按钮高度计算偏移高度,并动画移动
  • 第三步:键盘收起,录制按钮回到原始位置
涉及知识点
  • WidgetsBindingObserver
  • didChangeMetrics()
  • MediaQuery.of(context).viewInsets.bottom
  • AnimatedPositioned
代码
import 'package:flutter/material.dart';
import 'package:flutter_xy/widgets/xy_app_bar.dart';import '../../r.dart';class RecordPage extends StatefulWidget {const RecordPage({super.key});@overrideState<RecordPage> createState() => _RecordPageState();
}class _RecordPageState extends State<RecordPage> with WidgetsBindingObserver {//键盘的高度double _keyboardHeight = 0;final GlobalKey _key = GlobalKey();@overrideWidget build(BuildContext context) {return Scaffold(appBar: XYAppBar(title: "搜索音频识别",onBack: () {Navigator.pop(context);},),body: Stack(children: [const Positioned(top: 0,left: 0,right: 0,child: TextField(decoration: InputDecoration(labelText: "请输入内容"),),),AnimatedPositioned(duration: const Duration(milliseconds: 800),curve: Curves.easeInOut,bottom: _offsetHeight <= 0 ? 0 : _offsetHeight,left: 0,right: 0,child: Image.asset(R.record_png,key: _key,width: 50,height: 50,),),],),);}@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overridevoid didChangeMetrics() {WidgetsBinding.instance.addPostFrameCallback((_) {if (mounted) {setState(() {//键盘高度_keyboardHeight = MediaQuery.of(context).viewInsets.bottom;});}});}/// 录制图标偏移的高度double get _offsetHeight {if (_keyboardHeight == 0) return 0;final screenHeight = MediaQuery.of(context).size.height;final inputBox = _key.currentContext?.findRenderObject() as RenderBox?;final offset = inputBox?.localToGlobal(Offset.zero);final inputPosition = offset?.dy ?? 0;final inputHeight = inputBox?.size.height ?? 0;var offsetHeight =(inputPosition + inputHeight) - (screenHeight - _keyboardHeight);return offsetHeight;}
}

详情见:github.com/yixiaolunhui/flutter_xy

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

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

相关文章

C语言 02 安装

C 语言的编译器有很多&#xff0c;其中最常用的是 GCC&#xff0c;这里以安装 GCC 为例。 Windows 这里以 Windows 11 为例 官方下载地址&#xff1a;https://www.mingw-w64.org/ 选择 Downloads 选择 Windows 的 GCC 环境 MingW-W64-builds 选择 GitHub 根据操作系统位…

Qt5.14.2 深入理解Qt多线程编程,掌握线程池架构实现高效并发

在高并发的软件系统中&#xff0c;多线程编程是解决性能瓶颈和提高系统吞吐量的有效手段。作为跨平台的应用程序开发框架&#xff0c;Qt为我们提供了强大的多线程支持。本文将深入探讨Qt多线程编程的实现细节&#xff0c;并介绍线程池的设计思想&#xff0c;帮助读者彻底掌握Qt…

网盘聚合工具:统筹管理所有网盘资源 | 开源日报 No.203

alist-org/alist Stars: 35.6k License: AGPL-3.0 alist 是一个支持多存储的文件列表/WebDAV 程序&#xff0c;使用 Gin 和 Solidjs。 该项目的主要功能、关键特性、核心优势包括&#xff1a; 支持多种存储方式易于部署和开箱即用文件预览&#xff08;PDF、markdown、代码等&…

SpringBoot2.7集成Swagger3

Swagger2已经在17年停止维护了&#xff0c;取而代之的是 Swagger3&#xff08;基于openApi3&#xff09;&#xff0c;所以新项目要尽量使用Swagger3. Open API OpenApi是业界真正的 api 文档标准&#xff0c;其是由 Swagger 来维护的&#xff0c;并被linux列为api标准&#x…

Web基础06-AJAX,Axios,JSON数据

目录 一、AJAX 1.概述 2.主要作用 3.快速入门 4.AJAX的优缺点 &#xff08;1&#xff09;优点 &#xff08;2&#xff09;缺点 5.同源策略 二、Axios 1.概述 2.快速入门 3.请求方式别名 三、JSON 1.概述 2.主要作用 3.基础语法 4.JSON数据转换 &#xff08;1…

Windows11安装Msql8.0版本详细安装步骤!

文章目录 前言一、下载Mysql二、安装Mysql三、登录验证三、环境变量配置总结 前言 每次搭建新环境的时候&#xff0c;都需要网上搜寻安装的步骤教程&#xff01;为了以后方便查阅&#xff01;那么本次就记录一下Windows11安装Msql8.0的详细步骤&#xff01;也希望能帮助到有需…

npm和pnpm安装、更换镜像源

安装pnpm 1 wins 在系统中搜索框 输入“Windos PowerShell”右击“管理员身份运行” 2 输入“set-ExecutionPolicy RemoteSigned”回车,根据提示输入A&#xff0c;回车 3 输入 pnpm -v 查看版本 如果没有版本好就是没有安装 pnpm 输入安装命令 npm install -g pnpm 4 再次 …

【配置虚拟机网络ping通开发板,以及网络转发工作环境】

文章目录 【配置虚拟机网络ping通开发板&#xff0c;以及网络转发工作环境】配置虚拟机网络ping通开发板网络转发工作环境 【配置虚拟机网络ping通开发板&#xff0c;以及网络转发工作环境】 配置虚拟机网络ping通开发板 设置好板子的ip192.168.64.20后 现在主机windows上配置…

抖音无水印视频关键词批量下载|视频下载工具

抖音无水印视频关键词批量下载操作说明 我们根据自己的需要开发了抖音视频批量下载工具&#xff0c;现在市面上的视频无水印工具只能通过单个视频链接进行提取&#xff0c;太不方便 所以我们延伸出了 不仅可以通过单个视频链接进行提取也可通过关键词进行视频搜索 进行批量和有…

Python基于深度学习的中文情感分析系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

计算机设计大赛 题目:基于深度学习的中文汉字识别 - 深度学习 卷积神经网络 机器视觉 OCR

文章目录 0 简介1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &a…

【AAAI 2024】MuLTI:高效视频与语言理解

一、背景 1.1 多模态的发展 多模态理解模型具有广泛的应用&#xff0c;比如多标签分类&#xff08;Classification&#xff09;、视频问答&#xff08;videoQA&#xff09;和文本视频检索&#xff08;Retrieval&#xff09;等。现有的方法已经在视频和语言理解方面取得了重大…

智能驾驶安全包含哪些内容?

智能驾驶安全是一个综合性的概念&#xff0c;涵盖了多个方面的内容&#xff0c;以确保智能驾驶系统的可靠性、稳定性和安全性。以下是智能驾驶安全包含的主要内容&#xff1a; 硬件安全&#xff1a; 传感器安全&#xff1a;智能驾驶系统依赖各种传感器来获取周围环境信息&…

unity发布安卓获取读取权限

一、Player Settings 设置 Player Settings>Player>Other Settings> Android > Write Permission > External (SDCard). 二、代码 using System.Collections; using System.Collections.Generic; using System.IO; using UnityEngine; using UnityEngine.Andr…

【c++】内联-引用-重载

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;c_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.【c】内联函数 1.1 背景 1.2 内联函数的概念 1.3 内联函数的特性 1.4 宏和内联的小知识 宏的优缺点&#xff1f; C有哪些技术替代…

mac npm install 很慢或报错

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/pnpm failed, reason: certificate has expired 1、取消ssl验证&#xff1a; npm config set strict-ssl false 修改后一般就可以了&#xff0c;…

win7、win10、win11 系统能安装的.net framework 版本以

win7、win10、win11 系统能安装的.net framework 版本分别是多少&#xff1f;以及能安装的最高版本是多少&#xff1f; 以下是各Windows系统能够安装和支持的.NET Framework版本及其最高可安装版本的概述&#xff1a; Windows 7&#xff1a; 自带 .NET Framework 3.5.1&#x…

kingbase 服务器配置(参数修改)

引言&#xff1a; 人大金仓作为国产数据库的佼佼者(单机)&#xff0c;也是每位数据库从业者必须数据库之一 配置文件 kingbase 参数配置 主要由 kingbase.conf 和 kingbase.auto.conf 设置 kingbase.conf 该参数文件为主配置文件&#xff0c;一般情况下&#xff0c;需要 重启…

day03vue学习

day03 一、今日目标 1.生命周期 生命周期介绍生命周期的四个阶段生命周期钩子声明周期案例 2.综合案例-小黑记账清单 列表渲染添加/删除饼图渲染 3.工程化开发入门 工程化开发和脚手架项目运行流程组件化组件注册 4.综合案例-小兔仙首页 拆分模块-局部注册结构样式完善…

数据可视化-ECharts Html项目实战(3)

在之前的文章中&#xff0c;我们学习了如何创建堆积折线图&#xff0c;饼图以及较难的瀑布图并更改图标标题。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 …