Flutter webview_flutter插件弹起键盘或输入框卡死问题解决（卡顿、闪屏）

最新推荐文章于 2025-07-07 10:07:24 发布

原创最新推荐文章于 2025-07-07 10:07:24 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

flutter 专栏收录该内容

10 篇文章

订阅专栏

本文介绍在安卓端如何使用混合WebView，并推荐使用SurfaceAndroidWebView来优化键盘输入体验。注意，在Android 10之前可能存在性能问题。

部署运行你感兴趣的模型镜像

安卓端使用混合webview
根据官方介绍

The WebView is relying on Platform Views to embed the Android’s webview within the Flutter app. By default a Virtual Display based platform view backend is used, this implementation has multiple keyboard. When keyboard input is required we recommend using the Hybrid Composition based platform views implementation. Note that on Android versions prior to Android 10 Hybrid Composition has some performance drawbacks.

WebView依靠 Platform Views将Android的Webview嵌入Flutter应用程序中。默认情况下，使用基于虚拟显示的平台视图后端，此实现具有多个键盘。当需要键盘输入时，我们建议使用基于混合组合的平台视图实现。请注意，在Android 10 Hybrid Composition之前的Android版本上，存在一些性能缺陷。

在webview前加上

if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();

参考

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿明今天不练腿

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Flutter】flutter WebView加载网页时闪烁

It一zhai男

06-30

2089

webview加载网页闪烁问题

Flutter 输入框在iOS打开密码填充后会闪烁问题

qq_52871405的博客

09-14

1197

iOS如果在设置中打开了【自动填充密码】就会显示出这个密码栏，输入时会一闪一闪的。【原因】：在TextField里，只要obscureText为true时，也就是密码框显示全是【•】时，iOS的密码填充栏就会显示出来。

参与评论您还未登录，请先登录后发表或查看评论

flutter 卡顿_Flutter WebView 卡顿问题

weixin_32687283的博客

12-24

3779

使用的是官方 webview_flutter 库，感觉 flutter 的 webview 挺多坑的，所以记录一下。路由切换卡顿问题：使用 Navigator.of(context).push(...) 路由切换到一个含有 webview 的 page 时，首次渲染会卡顿，这是因为 WebView 第一次构造的时候很慢导致的(也就是看不到了路由切换动画)一种临时解决方案，在切换动画加载完毕后，再去...

Flutter WebView键盘弹起关闭导致闪烁

u010152805的专栏

09-23

2283

在使用InAppWebView或者原生WebView时，当网页调起键盘或者关闭键盘的情况下，网页内容会闪烁一次。为了解决这个问题，需要在AndroidManifest.xml中修改 android:windowSoftInputMode为adjustPan。在新建flutter工程时android:windowSoftInputMode默认为adjustResize。在改为adjustPan，确实没有闪烁的现象了。 ...

flutter中键盘遮挡了webview_flutter中的输入框input解决办法

zon的专栏

04-09

1352

1. iOS系统解决办法：（同时解决了闪屏问题，估计是iOS加入了IOKeyboardManager类库同时操作的问题）Widget build(BuildContext context) {...}里面。我的处理方法更简单一点，针对特定的网页，直接滚动到一个固定的值，代码写在方法。获取键盘状态，滚动webview。

Flutter_Webview 键盘弹出问题

weixin_34293141的博客

06-07

2570

Flutter_Webview 键盘弹出问题 webview_flutter ^0.3.7+1 pub链接 webview_flutter在Android上没有办法弹出键盘,github上的issue已经提了很久,但是官方的milestone还要到19年的十月 issue #19718,(截止发稿时已经有一个PR到master分支了,但是stable分支的同学可能就还要等一哈了),但是PR的解...

Flutter webview弹起软键盘后页面自动刷新问题

MoonAndroid的博客

11-13

2861

flutter中关于软键盘弹起导致的问题 1.当布局高度写死时，例如设置为屏幕高度，这时候键盘弹起页面上会出现布局overflow的提示 2.软键盘弹起后遮挡输入框 原因：在flutter中，键盘弹起时系统会缩小Scaffold的高度并重建解决问题1中overflow提示的两种办法： 1）把Scaffold的resizeToAvoidBottomInset属性设置为false，这样在键盘弹出时将不会resize 2）把写死的高度改为原高度 - MediaQuery.of(context).viewIns

使用 Flutter 中的 WebView 加载本地html时，会出现黑屏或闪屏的问题;不使用PageView、flutter_inappwebview ，怎么解决，给出具体代码

05-31

您可以尝试在Flutter中使用webview_flutter插件来加载本地HTML文件，避免出现黑屏或闪屏的问题。具体步骤如下： 1. 首先，在pubspec.yaml文件中添加webview_flutter插件： ``` dependencies: flutter: sdk: ...

Android Webview滑进出屏幕闪烁的解决方法

08-26

Android Webview 滑进出屏幕闪烁的问题是一个非常棘手的问题，但是通过禁止 Webview 的硬件加速和设置 Webview 的背景颜色，我们可以解决这个问题。同时，我们需要考虑到很多因素，选择适合的解决方案。相关知识点...

深入解析与彻底解决 Android 集成 Flutter Boost 时页面闪烁问题

最新发布

s297165331的专栏

07-07

620

本文分析了Android应用中集成Flutter模块时出现的页面闪烁问题，并提出三种解决方案。问题主要由渲染冲突和生命周期管理不一致造成，表现为从原生页面返回Flutter页面时动画组件闪烁。

flutter弹起键盘页面布局超限问题

01-20

BOTTOM OVERFLOWED BY 17 PIXELS 这是由于页面高度写死导致的， 1.scaffold 根布局添加 resizeToAvoidBottomPadding:false 是否自动调整body属性控件的大小，以避免脚手架底部被覆盖。例如，如果在脚手架上方显示屏幕键盘，则可调整body属性控件的大小以避免被键盘覆盖。如果你不需要此功能，可以将resizeToAvoidBottomPadding属性设置为false @override Widget build(BuildContext context) { return Scaffold( r

flutter 按钮固定底部和键盘弹出问题

qq_36392571的博客

11-27

4374

需求：按钮固定底部，键盘弹出，不能覆盖输入框，并且能滚动页面。解决方法过程：方案一： resizeToAvoidBottomPadding: false, //输入框抵住键盘结果：点击最底部输入框被键盘覆盖。方案二：使用界面变化的观察者 WidgetsBinding.instance.addObserver(this) @override void didChangeMetrics() { super.didChangeMetrics(); Widget

Flutter——踩坑之旅（webview_flutter 加载H5 包含输入框时页面跳转键盘无法收回）

五个木

07-27

3031

程序猿日常 flutter填坑——webview_flutter 加载H5 包含输入框时页面跳转键盘无法收回问题描述使用官方webview库 webview_flutter: ^0.3.22+1 ，在加载H5页面中，包含input标签输入框。问题1：输入框获取焦点后，键盘弹出，Android出现输入的内容不显示，需要输入两次或多次才能输入成功，实际上是输入框没有真正获取焦点，可以注意下键盘的变化，可以输入的时候键盘右下角显示前往，输入后不显示的情况键盘右下角显示的回车，不同键盘展示的可能不同。问题

Flutter 点击输入框后键盘闪出后立刻消失

phetppy的博客

05-20

2341

flutter 在布局最顶端使用的是Scaffold组件，在点击输入框键盘弹出后，布局的默认反应是改变屏幕大小重新布局。这时通常会在Scaffold中添加选项： resizeToAvoidBottomPadding:false 添加之后，应用整体布局不会随着键盘弹出而刷新改变。但是键盘的弹出仍然会改变 MediaQuery.of(context).size获取到的数值，因此如果有输入框的父组件通过MediaQuery来决定自身大小的话，在键盘弹出的时候整个组件仍然会进行刷新导致键盘隐藏。

解决 Flutter 在 iOS 模拟器中运行卡住问题

技术小黑屋

05-09

2041

当我们尝试在 iOS 模拟器运行flutter run可能会出现类似如下的卡住问题。executing:xcrunsimctllaunchxxx-54F9-427F-8119-xxxxcom.hahaha.app--enable-dart-profiling--enable-checked-mode--verify-entry-points--obs...

Flutter键盘弹出造成布局异常解决

01-06

5566

在使用flutter开发时，经常会遇到输入框弹起的时候，debug环境下会提示布局异常。下面我们分两种情况进行讨论分析 输入框在可滚动widget上 输入框如果在滚动的widget上时，键盘弹起，滚动的widget会自动滚动，不存在这个布局异常的问题，如果出现了这种情况，可以排查下Scaffold的resizeToAvoidBottomInset属性设置为false，这个默认是true. 输入框在不可滚动widget上这种情况不要把输入框距离底部的高度写死，而是加上键盘的动态高度。MediaQuery

ios登录账号密码输入账号键盘疯狂闪烁问题

weixin_56203236的博客

07-31

708

问题出现在ios同时使用两个input一个number一个password时出现，在中间加一个input设置宽高0（实现隐藏就行了）。也可以在第一个input设置text通过change来设置只能输入数字。

解决创建Flutter项目卡住/卡死/无响应等问题

Lewis的博客

03-06

6774

搭建Flutter开发环境后，大多数人在使用Android Studio、命令行等创建Flutter项目时都会遇到卡住/卡死/无响应的问题，虽然表述方式不一样，但都是一个意思，无法完成项目的创建。为什么创建一个项目要这么久呢？不用想也能猜到一定是伟大的墙的功劳。为了解决这个掉头发的问题，网上网友们打开脑洞，研究出了不少的解决方案，比较常见解决方案包括强制退出Android Studio，再重启打开项目和配置Android Studio等方案，但是这些和创建离线项目的效果无异，都没有从根本上解决问.

一文解决Flutter中使用TextField遇到的各种疑难杂症

wapchief的博客

08-06

4162

####页面中有输入框，键盘弹起，页面溢出可以使用 SingleChildScrollView 包裹布局这里还需要了解一个 Scaffold 中的一个属性 resizeToAvoidBottomInset /// If true the [body] and the scaffold’s floating widgets should size /// themselves to avoid the onscreen keyboard whose height is defined by the //

Flutter webview_flutter 使用常见问题解析

标题“Flutter webview-flutter 问题”以及描述中的相同文字，明确指向了在使用 `webview_flutter` 插件过程中遇到的技术难题或异常情况。结合压缩包文件名 `webview_flutter-4.8.0`，可以判断该问题出现在 `webview...