广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter软键盘的原理浅析
  • 206
分享到

Flutter软键盘的原理浅析

2024-04-02 19:04:59 206人浏览 安东尼
摘要

Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。 当这个值为true的时候,

Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。

当这个值为true的时候,页面会进行重新布局。那么我们应该如何监听 Flutter 的键盘弹出和页面的高度变化?

我们从 Flutter 键盘弹出说起。当一个输入框 TextField 的焦点变化的时候,焦点变化会执行
_openOrCloseInputConnectionIfNeeded 方法:


if (_hasFocus && widget.focusnode.consumeKeyboardToken()) {
      _openInputConnection();
    } else if (!_hasFocus) {
      _closeInputConnectionIfNeeded();
      widget.controller.clearComposing();
    }

这里会调用 TextInputConnection 的 show 方法打开键盘:


void _show() {
    _channel.invokeMethod<void>('TextInput.show');
  }

这里会通过 _show 的调用,去调 TextInput.show 这个方法


// Android 端实现
mImm = (InputMethodManager) view.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);

// TextInputHandler
private void showTextInput(View view) {
    view.requestFocus();
    mImm.showSoftInput(view, 0);
 }

在Android 端,最后是调用 InputMethodManager 来打开软键盘。这里的 view 指的就是 FlutterView 。

此时 View 的 onApplyWindowInsets 会被调用:


// FlutterView
mMetrics.physicalViewInsetBottom =
          navigationBarVisible
              ? insets.getSystemWindowInsetBottom()
              : guessBottomKeyboardInset(insets);

updateViewportMetrics();


private int guessBottomKeyboardInset(WindowInsets insets) {
    int screenHeight = getRootView().getHeight();
    // Magic number due to this being a heuristic. This should be replaced, but we have not
    // found a clean way to do it yet (Sept. 2018)
    final double keyboardHeightRatioHeuristic = 0.18;
    if (insets.getSystemWindowInsetBottom() < screenHeight * keyboardHeightRatioHeuristic) {
      // Is not a keyboard, so return zero as inset.
      return 0;
    } else {
      // Is a keyboard, so return the full inset.
      return insets.getSystemWindowInsetBottom();
    }
  }

这里我们可以看到,在 Android 端,软键盘的高度在底部栏可见的时候取的就是系统 window inset 的 bottom。

如果不可见,就会根据 bottom inset 的占比去猜测。当这个高度大于 0.18 的时候,就会认为是键盘弹出。

当判断是软键盘后,会通过刷新 ViewportMetrics 来触发页面重绘:


// FlutterView
private void updateViewportMetrics() {
	if (!isAttached()) return;

	mNativeView
		.getFlutterJNI()
        .setViewportMetrics(
            mMetrics.devicePixelRatio,
            mMetrics.physicalWidth,
            mMetrics.physicalHeight,
            mMetrics.physicalPaddingTop,
            mMetrics.physicalPaddingRight,
            mMetrics.physicalPaddingBottom,
            mMetrics.physicalPaddingLeft,
            mMetrics.physicalViewInsetTop,
            mMetrics.physicalViewInsetRight,
            mMetrics.physicalViewInsetBottom,
            mMetrics.physicalViewInsetLeft,
            mMetrics.systemGestureInsetTop,
            mMetrics.systemGestureInsetRight,
            mMetrics.systemGestureInsetBottom,
            mMetrics.systemGestureInsetLeft);
}

metrics 更新在 dart 端的入口在 hooks.dart 中


@pragma('vm:entry-point')
void _updateWindowMetrics(
  	//...省略参数
) {
	_invoke(window.onMetricsChanged, window._onMetricsChangedZone);

}

经过上面的理论分析,我们可以得出结论,Flutter 软键盘的高度变化体现在 metrics  的变化。具体的值,则体现在 window.viewInsets.bottom 中。

总结

到此这篇关于Flutter软键盘原理的文章就介绍到这了,更多相关Flutter软键盘原理内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Flutter软键盘的原理浅析

本文链接: https://www.lsjlt.com/news/137481.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter软键盘的原理浅析
    Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。 当这个值为true的时候,...
    99+
    2022-11-12
  • Android软键盘windowSoftInputMode的使用与原理(使用篇)
    文章目录 前言一、模式介绍二、可见性使用1.stateUnchanged2.stateHidden3.stateAlwaysHidden4.stateVisible5.stateAlwaysV...
    99+
    2023-09-17
    android
  • 浅析Java中的SPI原理
    在面向对象的程序设计中,模块之间交互采用接口编程,通常情况下调用方不需要知道被调用方的内部实现细节,因为一旦涉及到了具体实现,如果需要换一种实现就需要修改代码,这违反了程序设计的&q...
    99+
    2022-11-13
  • Html5软键盘兼容方案的示例分析
    小编给大家分享一下Html5软键盘兼容方案的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言最近一段时间在做 H5 聊...
    99+
    2022-10-19
  • 深入浅析Java中 JVM的原理
    这篇文章将为大家详细讲解有关深入浅析Java中 JVM的原理,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真...
    99+
    2023-05-31
    java jvm ava
  • 浅析Golang中map的实现原理
    Golang是一门支持面向对象编程的编程语言,它拥有高效的内存管理机制和灵活的语法特性,被广泛用于服务器端开发、网络编程、云计算等领域。在Golang中,map是一种非常重要的数据结构,它可以存储键值对,并提供快速的查找和插入操作。本文将介...
    99+
    2023-05-14
    go语言 Golang map
  • Node.js中require的工作原理浅析
    几乎所有的Node.js开发人员可以告诉你`require()`函数做什么,但我们又有多少人真正知道它是如何工作的?我们每天都使用它来加载库和模块,但它的行为,对于我们来说反而是一个谜。 出于好奇,我钻研了...
    99+
    2022-06-04
    工作原理 Node js
  • 浅析Spring的事务实现原理
    目录SQL事务实现简介编程式事务声明式事务注释事务属性源事务拦截器Bean工厂事务属性源指导事务多样性支持总结SQL事务实现简介 首先我们来了解下,最简单的事务是怎么实现的呢?以JD...
    99+
    2022-11-13
    Spring事务原理 Spring事务
  • 深入浅析HashMap的工作原理
    这篇文章给大家介绍深入浅析HashMap的工作原理,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。实际上,HashSet 和 HashMap 之间有很多相似之处,对于 HashSet 而言,系统采用 Hash 算法决定集...
    99+
    2023-05-31
    hashmap
  • Android EditText被软键盘遮盖的处理方法
    这两天android app新增了透明栏效果,结果发现键盘弹起后会遮盖屏幕底部的EditText,没有像想象中的调整窗口大小,并滚动ScrollView,将EditText显示...
    99+
    2022-06-06
    edittext 方法 软键盘 Android
  • Android WebView无法弹出软键盘的原因及解决办法
    requestFoucs();无效。 requestFoucsFromTouch();无效。 webview.setTouchListener;无效。 问题所在: 继承We...
    99+
    2022-06-06
    webview 软键盘 Android
  • 解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法
    1、//隐藏软键盘    ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE))...
    99+
    2022-06-06
    自动 方法 软键盘 Android
  • 深入浅析java中反射的原理
    深入浅析java中反射的原理?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.Class类任何一个类都是Class的实例对象,这个实例对象有三种表示方式//第一种表示方式---...
    99+
    2023-05-31
    java 反射 ava
  • 深入浅析JAVA中封装的原理
    本篇文章为大家展示了深入浅析JAVA中封装的原理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。第一节 什么是JAVA中的封装面向对象的三大特性:封装、继承、多态。概念:将类的某些信息隐藏在类的内部,...
    99+
    2023-05-31
    java 封装 ava
  • Android软键盘状态并隐藏输入法的示例分析
    这篇文章主要介绍了Android软键盘状态并隐藏输入法的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Android 软键盘状态并隐藏输入法的实例1 软键盘状态的切换...
    99+
    2023-05-30
    android
  • 浅析对Java关键字final和static的理解
    一、final            根据程序上下文环境,Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修...
    99+
    2023-05-31
    java static final
  • 深入浅析Java中线程池的原理
    这篇文章将为大家详细讲解有关深入浅析Java中线程池的原理,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。ThreadPoolExecutor简介ThreadPoolExecutor是线程池类...
    99+
    2023-05-31
    java ava 线程池
  • 深入浅析Java中输出HelloWorld的原理
    今天就跟大家聊聊有关深入浅析Java中输出HelloWorld的原理,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。我们初学java的第一个程序是"hello world&q...
    99+
    2023-05-31
    java helloworld ava
  • 深入浅析java中堆排序的原理
    本篇文章为大家展示了深入浅析java中堆排序的原理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。从堆排序的简介到堆排序的算法实现等如下:1. 简介  堆排序是建立在堆这种数据结构基础上的选择排序,是...
    99+
    2023-05-31
    java 堆排序 ava
  • 深入浅析java 中volatile与lock的原理
    深入浅析java 中volatile与lock的原理?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。java 中volatile和lock原理分析volatile和lock是...
    99+
    2023-05-31
    java volatile lock
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作