按下设备后退按钮上的 Flutter WebView 异常
Posted
技术标签:
【中文标题】按下设备后退按钮上的 Flutter WebView 异常【英文标题】:Flutter WebView exception on device back button pressed 【发布时间】:2020-08-03 10:13:11 【问题描述】:我对 Flutter 很陌生,所以如果这是一个基本问题,请原谅我。
我正在尝试创建一个仅显示全屏 web 视图的 Flutter 应用程序,但我需要设备返回按钮才能返回历史记录。第一项任务我很轻松地完成了,但第二项任务却是一场斗争。
我按照answer 中的说明进行操作,但我无法消除仅按后退按钮的 360 多行答案的所有混乱并使其正常工作。
我的代码很简单:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
WebViewController _controller;
Future<void> _onWillPop(BuildContext context) async
if (await _controller.canGoBack())
_controller.goBack();
else
exit(0);
return Future.value(false);
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
SystemChrome.setEnabledSystemUIOverlays([]);
return WillPopScope(
onWillPop: () => _onWillPop(context),
child: MaterialApp(title: 'Test App', home: WebView(
initialUrl: 'https://google.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController c) => _controller = c,
)),
);
但是当我尝试按下设备返回按钮时,它会抛出以下错误:
java.lang.RuntimeException: Cannot execute operation because FlutterJNI is not attached to native.
at io.flutter.embedding.engine.FlutterJNI.ensureAttachedToNative(FlutterJNI.java:227)
at io.flutter.embedding.engine.FlutterJNI.markTextureFrameAvailable(FlutterJNI.java:554)
at io.flutter.embedding.engine.renderer.FlutterRenderer.markTextureFrameAvailable(FlutterRenderer.java:274)
at io.flutter.embedding.engine.renderer.FlutterRenderer.access$300(FlutterRenderer.java:38)
at io.flutter.embedding.engine.renderer.FlutterRenderer$SurfaceTextureRegistryEntry$1.onFrameAvailable(FlutterRenderer.java:145)
at android.graphics.SurfaceTexture$1.handleMessage(SurfaceTexture.java:211)
at android.os.Handler.dispatchMessage(Handler.java:107)
at android.os.Looper.loop(Looper.java:224)
at android.app.ActivityThread.main(ActivityThread.java:7520)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:539)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:950)
flutter 的 github 上至少有 3 个线程,但没有一个解决方案对我有用。我在这里错过了什么?
【问题讨论】:
我认为这是因为您没有使用 Completer您可以在下面复制粘贴运行完整代码
您可以使用Completer
代码 sn -p
WebViewController controller;
final Completer<WebViewController> _controllerCompleter =
Completer<WebViewController>();
...
onWebViewCreated: (WebViewController c)
_controllerCompleter.future.then((value) => controller = value);
_controllerCompleter.complete(c);
,
工作演示
完整代码
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
WebViewController controller;
final Completer<WebViewController> _controllerCompleter =
Completer<WebViewController>();
Future<void> _onWillPop(BuildContext context) async
print("onwillpop");
if (await controller.canGoBack())
controller.goBack();
else
exit(0);
return Future.value(false);
@override
Widget build(BuildContext context)
return WillPopScope(
onWillPop: () => _onWillPop(context),
child: Scaffold(
body: WebView(
initialUrl: 'https://flutter.dev/',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController c)
_controllerCompleter.future.then((value) => controller = value);
_controllerCompleter.complete(c);
,
),
),
);
【讨论】:
很高兴为您提供帮助。如果对您有帮助,请将其标记为答案。谢谢。【参考方案2】:在 Android MainActivity.kt 中,只需添加以下内容:
override fun onDestroy() flutterEngine?.platformViewsController?.onFlutterViewDestroyed() super.onDestroy()
【讨论】:
【参考方案3】:这是可行的解决方案(100% 工作)-
// Use any webview plugin
// WebView _controller;
Future<void> _handleBack(context) async
var status = await _controller.canGoBack();
if (status)
_controller.goBack();
else
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Do you want to exit'),
actions: <Widget>[
FlatButton(
onPressed: ()
Navigator.of(context).pop();
,
child: Text('No'),
),
FlatButton(
onPressed: ()
SystemNavigator.pop();
,
child: Text('Yes'),
),
],
));
这里是调用 WillPopScope
@override
Widget build(BuildContext context)
return WillPopScope(
onWillPop: () => _handleBack(context),
child: SafeArea(
top: true,
child: Scaffold(......)))
【讨论】:
以上是关于按下设备后退按钮上的 Flutter WebView 异常的主要内容,如果未能解决你的问题,请参考以下文章
Flutter:通过按下后退按钮解除键盘时,不关注文本字段(多行)
使用flutter webview作为主页并按下后退按钮关闭应用程序