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});

  @override
  State<RecordPage> createState() => _RecordPageState();
}

class _RecordPageState extends State<RecordPage> with WidgetsBindingObserver {
  //键盘的高度
  double _keyboardHeight = 0;

  final GlobalKey _key = GlobalKey();

  @override
  Widget 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,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void 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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unbuntu20.04 git push和pull相关问题

文章目录 Unbuntu20.04 git push和pull使用&#xff11;&#xff0e;下载[Git工具包](https://git-scm.com/downloads)&#xff12;&#xff0e;建立本地仓库&#xff13;&#xff0e;将本地仓库与github远程仓库关联&#xff14;&#xff0e;将本地仓库文件上传到github远程仓…

nuxt3项目总结

nuxt3项目总结 仓库 前言 大半年的时间&#xff0c;项目从秋天到春天&#xff0c;从管理后台到APP再到数据大屏&#xff0c;技术栈从vue3到uniApp再到nuxt3&#xff0c;需求不停的改&#xff0c;注释掉代码都快到项目总体的三分之一。 一、准备-搭建项目架子 1.1 创建一个…

图片怎么转jpg格式?一键完成图片格式转换

jpg图片格式作为最常用的图片类型之一&#xff0c;经常出现在不同的使用场景中&#xff0c;如果遇到手上的图片不是jpg格式的话&#xff0c;就需要图片转jpg之后再操作&#xff0c;那么该如何进行图片转换格式呢&#xff1f;试试本文分享的这个图片转格式的方法吧&#xff0c;利…

【经验分享】Wubuntu------体验Windows和Ubuntu的结合体

【经验分享】Wubuntu------体验Windows和Ubuntu的结合体 最近看到有一款Wubuntu的文章&#xff0c;对于习惯使用windows操作系统&#xff0c;又不熟悉ubuntu系统的程序员小白来说&#xff0c;可以说是福音了。目前的Wubuntu兼容性可能还有一点问题&#xff0c;如果再迭代几次的…

YOLOV5 改进:增加注意力机制模块(SE)

1、前言 本章将介绍yolov5的改进项目,为v5增加新的模块---注意力机制、SE模块 大部分更改的代码是重复的,只有少部分需要更改,下面会详细讲解 yolov5的yaml文件介绍:YOLOV5 模型:利用tensorboard查看网络结构和yaml文件介绍-CSDN博客 yolov5的模块更改,C3更改为C2f模块…

18个惊艳的可视化大屏(第27辑):安防与安全预警

可视化大屏在安防和安全预警领域具有以下几个重要作用&#xff1a; 实时监控和预警 可视化大屏可以将各种安防设备&#xff08;如摄像头、传感器等&#xff09;的监控画面和数据集中显示在一个屏幕上&#xff0c;实现对安全状况的实时监控。同时&#xff0c;通过设置预警规则…

【保姆级教程】YOLOv8_Pose多目标+关键点检测:训练自己的数据集

Yolov8官方给出的是单类别的人体姿态关键点检测&#xff0c;本文将记录如果实现训练自己的多类别的关键点检测。 一、YOLOV8环境准备 1.1 下载安装最新的YOLOv8代码 仓库地址&#xff1a; https://github.com/ultralytics/ultralytics1.2 配置环境 pip install -r requiremen…

JNDI+LDAP攻击手法

服务端&#xff1a; package com.naihe3; import java.net.InetAddress; import java.net.MalformedURLException; import java.net.URL;import javax.net.ServerSocketFactory; import javax.net.SocketFactory; import javax.net.ssl.SSLSocketFactory;import com.unboundid.…

27-4 文件上传漏洞 - 黑名单绕过

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、黑名单绕过和黑白名单机制: 黑名单:黑名单中的文件不允许通过。白名单:白名单中的文件允许通过。二、黑白名单判断: 当输入一串后缀如"sfahkfhakj"时,黑名单不…

docker安装配置dnsmasq

docker下载安装 参考&#xff1a;docker安装、卸载、配置、镜像 如果是低版本的额ubuntu&#xff0c;比如ubuntu16.04.7 LTS&#xff0c;为了加快下载速度&#xff0c;参考&#xff1a;Ubuntu16.04LTS安装Docker。 docker安装dnsmasq 下载dnsmasq镜像 首先镜像我们可以选择…

Solidity Uniswap V2 Output amount calculation

现在&#xff0c;我们即将实现高级交换&#xff0c;包括链式交换&#xff08;例如&#xff0c;通过token B 将token A 交换为token C&#xff09;。在实现之前&#xff0c;我们需要了解 Uniswap 如何计算输出量。让我们先弄清楚金额与价格的关系。 什么是价格&#xff1f;就是你…

KVM安装-kvm彻底卸载-docker安装Webvirtmgr

KVM安装和使用 一、安装 检测硬件是否支持KVM需要硬件的支持,使用命令查看硬件是否支持KVM。如果结果中有vmx(Intel)或svm(AMD)字样,就说明CPU的支持的 egrep ‘(vmx|svm)’ /proc/cpuinfo关闭selinux将 /etc/sysconfig/selinux 中的 SELinux=enforcing 修改为 SELinux=d…

工业智能网关的功能特点、应用及其对企业产生的价值-天拓四方

一、工业智能网关的功能特点 工业智能网关是一种具备数据采集、传输、处理能力的智能设备&#xff0c;它能够将工业现场的各种传感器、执行器、控制器等设备连接起来&#xff0c;实现设备间的信息互通与协同工作。同时&#xff0c;工业智能网关还具备强大的数据处理能力&#…

超火短剧分销推广项目cps,现在做还不晚(完整教程)

短剧是一种介于短视频和长视频之间的中视频模式&#xff0c;以爽点和反转为特点&#xff0c;讲究引人入胜&#xff0c;刺激消费。更白话一点表达&#xff0c;短剧就是压缩版的电视剧&#xff0c;易上头上瘾&#xff0c;易冲动消费。 所以&#xff0c;使用“蜂小推”进行短剧分…

xss.pwnfunction(DOM型XSS)靶场

环境进入该网站 Challenges (pwnfunction.com) 第一关&#xff1a;Ma Spaghet! 源码&#xff1a; <!-- Challenge --> <h2 id"spaghet"></h2> <script>spaghet.innerHTML (new URL(location).searchParams.get(somebody) || "Somebo…

实地研究降本增效的杀伤力,LSTM算法实现全国失业率分析预测

前言 ​ 降本增效降本增笑&#xff1f;增不增效暂且不清楚&#xff0c;但是这段时间大厂的产品频繁出现服务器宕机和产品BUG确实是十分增笑。目前来看降本增效这一理念还会不断渗透到各行各业&#xff0c;不单单只是互联网这块了&#xff0c;那么对于目前就业最为严峻的一段时…

五款软件让效率飞跃

幸运的是&#xff0c;随着信息技术的不断演进&#xff0c;一系列高效的软件工具应运而生&#xff0c;它们旨在简化我们的日常工作&#xff0c;帮助我们以更少的时间完成更多的任务。下面&#xff0c;将介绍五款能够有效提升您工作效率的软件神器。 1、亿可达 他是一款自动化工…

从自动化到测开,测试人员逆袭之路从此起步!

在当今竞争激烈的软件测试行业中&#xff0c;近期的招聘市场确实面临一些挑战。大量的求职者争相涌入岗位&#xff0c;许多热衷于功能测试的人士甚至难以找到理想的工作机会。更不幸的是&#xff0c;连自动化测试和性能测试这些专业领域也受到了测试开发人员的竞争压力。然而&a…

Ubuntu使用Docker部署Nginx容器并结合内网穿透实现公网访问本地服务

目录 ⛳️推荐 1. 安装Docker 2. 使用Docker拉取Nginx镜像 3. 创建并启动Nginx容器 4. 本地连接测试 5. 公网远程访问本地Nginx 5.1 内网穿透工具安装 5.2 创建远程连接公网地址 5.3 使用固定公网地址远程访问 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#…

作业:基于udp的tftp文件传输实例

#include <head.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <errno.h>#define PORT 69 //服务器绑定的端口号 #define IP "192.168.1.107" //服务器的IP地址int do_download(i…