flutter_webview_plugin|flutter_webview_plugin 加载全屏页面的简单使用
由于使用webview_flutter的安卓应用存在键盘问题
(number输入框打开的是全键盘，而且键盘无法自动收起)
经过打合，可以舍弃此前已修改好的原生js的confirm、alert等弹窗适配功能，
优先保证键盘正常。
经测试，当前版本flutter_webview_plugin 0.4.0 支持弹窗
因此弃用原本采用的修改过的webview_flutter-0.3.21，改用最新的flutter_webview_plugin。
【flutter_webview_plugin|flutter_webview_plugin 加载全屏页面的简单使用】直接使用全屏会出现状态栏遮挡问题，因此需要对demo稍作修改。
自适应高度(状态栏问题)的思路：
issue:Statusbar overlapping in webview
MediaQuery 的使用方法：
Flutter MediaQuery简单使用
class MyApp extends StatelessWidget {
final flutterWebViewPlugin = FlutterWebviewPlugin();
@override
Widget build(BuildContext context) {
return new MaterialApp(
routes: {
"/": (_) {
Rect _buildRect() {
final topPadding = MediaQueryData.fromWindow(window).padding.top;
final top = topPadding;
var height = MediaQueryData.fromWindow(window).size.height - top;
//height -= 56.0 + MediaQueryData.fromWindow(window).padding.bottom;
height -= MediaQueryData.fromWindow(window).padding.bottom;
if (height < 0.0) {
height = 0.0;
}
return new Rect.fromLTWH(
0.0, top, MediaQueryData.fromWindow(window).size.width, height);
}flutterWebViewPlugin.resize(_buildRect());
//渲染页面
return new WebviewScaffold(
url: "https://segmentfault.com",
javascriptChannels: {},
);
},
},
);
}
} 推荐阅读
- Flutter的ListView
- OC:|OC: WKWebView详解
- WKWebview|WKWebview js 调用oc 和oc调用js
- 运用flutter|运用flutter 构建一个发布版（release）APK
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- Flutter|Flutter SwiftUI React 对比
- flutter设置沉浸式状态栏
- vue的SEO优化方法一（prerender-spa-plugin预渲染）
- 2019-12-02|2019-12-02 flutter的环境配置
- Flutter开发之布局Widget