使用flutter_webview_plugin 加载一个H5页面,是从dart页面中跳转h5页面,h5页面中可返回dart页面,也可跳转到其他dart页面。
经测试,在Android上可正常使用,但在ios上关闭web页面时显示白屏,web页面并没有close,还没找到原因。。。
import 'dart:io';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:nav_router/nav_router.dart'; // 路由插件
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'class_room.dart'; // dart文件
class ClassRoomWebView extends StatefulWidget {
ClassRoomWebView({this.url}) : super();
final String url; // 外部传入的URL
@override
_ClassRoomWebViewState createState() => _ClassRoomWebViewState();
}
class _ClassRoomWebViewState extends State<ClassRoomWebView> {
BuildContext _context;
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
double _navBarHeight = 27;// 刘海高度
@override
void initState() {
super.initState();
flutterWebviewPlugin.onUrlChanged.listen((loadUrl){
//WebviewScaffold 加载的url变化时触发此方法
// print('===>>当前 url:$loadUrl');
// h5 点退出按钮,关闭webView
if (loadUrl.endsWith('/backapp')){
flutterWebviewPlugin.close();
pop();
}
// 跳转到dart页面
else if (loadUrl.endsWith('/policy')){
// 因为flutter_webview_plugin 是浮在flutterUI上的一层视图,它不在widget树中,跳转到dart页面时,需要隐藏掉web页面,再跳回来时再显示web页面
flutterWebviewPlugin.hide();
routePush(ClassRoomPage()).then((value) {
flutterWebviewPlugin.show();
flutterWebviewPlugin.reloadUrl(widget.url);
});
//跳转到dart页面时,也可以关闭掉web页面,再跳回来时再创建一个web页面
// flutterWebviewPlugin.close();
// routePush(ClassRoomPage()).then((value){
// flutterWebviewPlugin.launch(widget.url,
// rect: new Rect.fromLTWH( // 设置web页面的尺寸
// 0.0,
// _navBarHeight,
// MediaQuery.of(_context).size.width,
// MediaQuery.of(_context).size.height-_navBarHeight,
// ),
// );
// });
}
});
//加载错误时监听
// flutterWebviewPlugin.onHttpError.listen((error){
// print('加载错误:${error.code} ${error.url}');
// });
//加载状态变化监听
// flutterWebviewPlugin.onStateChanged.listen((state){
// print('状态监听:${state.type.toString()}');
// });
}
@override
void dispose() {
flutterWebviewPlugin.dispose(); // 页面退出时销毁flutter_webview_plugin
super.dispose();
}
@override
Widget build(BuildContext context) {
_context = context;
_navBarHeight = MediaQuery.of(context).padding.top; //屏幕刘海高度
return WebviewScaffold(
// 导航栏是H5页面的,这里需要留出刘海的高度
appBar: PreferredSize(
child: Container(
color: Colors.white,
),
preferredSize: Size.fromHeight(0)
),
url: widget.url,
initialChild: Container(
color: Colors.green,
child: Center(
child: Text('加载中...',style: TextStyle(fontSize: 14, color: Colors.black),),
),
),
);
}
}