网站制作公司站建设,招生网站建设的意义,上海普陀网站建设,学习资料网flutter开发实战-webview插件flutter_inappwebview使用
在开发过程中#xff0c;经常遇到需要使用WebView#xff0c;Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter#xff0c;flutter_inappwebview。之前整理了一下webview_flutter…flutter开发实战-webview插件flutter_inappwebview使用
在开发过程中经常遇到需要使用WebViewWebview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutterflutter_inappwebview。之前整理了一下webview_flutter查看https://blog.csdn.net/gloryFlow/article/details/131683122
这里我们使用flutter_inappwebview来加载网页。 一、引入flutter_inappwebview
使用flutter_inappwebview需要在pubspec.yaml引入插件。 # 浏览器flutter_inappwebview: 5.4.37二、使用flutter_inappwebview
使用flutter_inappwebview插件前我们先看下flutter_inappwebview提供的webview的属性
WebView({this.windowId,this.onWebViewCreated,this.onLoadStart,this.onLoadStop,this.onLoadError,this.onLoadHttpError,this.onProgressChanged,this.onConsoleMessage,this.shouldOverrideUrlLoading,this.onLoadResource,this.onScrollChanged,Deprecated(Use onDownloadStartRequest instead)this.onDownloadStart,this.onDownloadStartRequest,this.onLoadResourceCustomScheme,this.onCreateWindow,this.onCloseWindow,this.onJsAlert,this.onJsConfirm,this.onJsPrompt,this.onReceivedHttpAuthRequest,this.onReceivedServerTrustAuthRequest,this.onReceivedClientCertRequest,this.onFindResultReceived,this.shouldInterceptAjaxRequest,this.onAjaxReadyStateChange,this.onAjaxProgress,this.shouldInterceptFetchRequest,this.onUpdateVisitedHistory,this.onPrint,this.onLongPressHitTestResult,this.onEnterFullscreen,this.onExitFullscreen,this.onPageCommitVisible,this.onTitleChanged,this.onWindowFocus,this.onWindowBlur,this.onOverScrolled,this.onZoomScaleChanged,this.androidOnSafeBrowsingHit,this.androidOnPermissionRequest,this.androidOnGeolocationPermissionsShowPrompt,this.androidOnGeolocationPermissionsHidePrompt,this.androidShouldInterceptRequest,this.androidOnRenderProcessGone,this.androidOnRenderProcessResponsive,this.androidOnRenderProcessUnresponsive,this.androidOnFormResubmission,Deprecated(Use onZoomScaleChanged instead)this.androidOnScaleChanged,this.androidOnReceivedIcon,this.androidOnReceivedTouchIconUrl,this.androidOnJsBeforeUnload,this.androidOnReceivedLoginRequest,this.iosOnWebContentProcessDidTerminate,this.iosOnDidReceiveServerRedirectForProvisionalNavigation,this.iosOnNavigationResponse,this.iosShouldAllowDeprecatedTLS,this.initialUrlRequest,this.initialFile,this.initialData,this.initialOptions,this.contextMenu,this.initialUserScripts,this.pullToRefreshController,this.implementation WebViewImplementation.NATIVE});
}列一下常用的几个
initialUrlRequest加载url的请求initialUserScripts初始化设置的scriptinitialOptions初始化设置的配置onWebViewCreatedwebview创建后的callback回调onTitleChanged网页title变换的监听回调onLoadStart网页开始加载shouldOverrideUrlLoading确定路由是否可以替换比如可以控制某些连接不允许跳转。onLoadStop网页加载结束onProgressChanged页面加载进度progressonLoadError页面加载失败onUpdateVisitedHistory更新访问的历史页面回调onConsoleMessage控制台消息用于输出console.log信息
使用WebView加载网页
class WebViewInAppScreen extends StatefulWidget {const WebViewInAppScreen({Key? key,required this.url,this.onWebProgress,this.onWebResourceError,required this.onLoadFinished,required this.onWebTitleLoaded,this.onWebViewCreated,}) : super(key: key);final String url;final Function(int progress)? onWebProgress;final Function(String? errorMessage)? onWebResourceError;final Function(String? url) onLoadFinished;final Function(String? webTitle)? onWebTitleLoaded;final Function(InAppWebViewController controller)? onWebViewCreated;overrideStateWebViewInAppScreen createState() _WebViewInAppScreenState();
}class _WebViewInAppScreenState extends StateWebViewInAppScreen {final GlobalKey webViewKey GlobalKey();InAppWebViewController? webViewController;InAppWebViewOptions viewOptions InAppWebViewOptions(useShouldOverrideUrlLoading: true,mediaPlaybackRequiresUserGesture: true,applicationNameForUserAgent: dface-yjxdh-webview,);overridevoid initState() {// TODO: implement initStatesuper.initState();}overridevoid dispose() {// TODO: implement disposewebViewController?.clearCache();super.dispose();}// 设置页面标题void setWebPageTitle(data) {if (widget.onWebTitleLoaded ! null) {widget.onWebTitleLoaded!(data);}}// flutter调用H5方法void callJSMethod() {}overrideWidget build(BuildContext context) {return Column(children: Widget[Expanded(child: InAppWebView(key: webViewKey,initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),initialUserScripts: UnmodifiableListViewUserScript([UserScript(source:document.cookietoken${ApiAuth().token};domain.laileshuo.cb;path/,injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START),]),initialOptions: InAppWebViewGroupOptions(crossPlatform: viewOptions,),onWebViewCreated: (controller) {webViewController controller;if (widget.onWebViewCreated ! null) {widget.onWebViewCreated!(controller);}},onTitleChanged: (controller, title) {if (widget.onWebTitleLoaded ! null) {widget.onWebTitleLoaded!(title);}},onLoadStart: (controller, url) {},shouldOverrideUrlLoading: (controller, navigationAction) async {// 允许路由替换return NavigationActionPolicy.ALLOW;},onLoadStop: (controller, url) async {// 加载完成widget.onLoadFinished(url.toString());},onProgressChanged: (controller, progress) {if (widget.onWebProgress ! null) {widget.onWebProgress!(progress);}},onLoadError: (controller, Uri? url, int code, String message) {if (widget.onWebResourceError ! null) {widget.onWebResourceError!(message);}},onUpdateVisitedHistory: (controller, url, androidIsReload) {},onConsoleMessage: (controller, consoleMessage) {print(consoleMessage);},),),Container(height: ScreenUtil().bottomBarHeight 50.0,color: Colors.white,child: Column(children: [Expanded(child: Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: Widget[ElevatedButton(child: Icon(Icons.arrow_back),onPressed: () {webViewController?.goBack();},),SizedBox(width: 25.0,),ElevatedButton(child: Icon(Icons.arrow_forward),onPressed: () {webViewController?.goForward();},),SizedBox(width: 25.0,),ElevatedButton(child: Icon(Icons.refresh),onPressed: () {// callJSMethod();webViewController?.reload();},),],),),Container(height: ScreenUtil().bottomBarHeight,),],),),],);}
}三、小结
flutter开发实战-webview插件flutter_inappwebview使用。描述可能不准确请见谅。
https://blog.csdn.net/gloryFlow/article/details/133489866
学习记录每天不停进步。
