flutter 封装webview和使用本地网页
在Flutter中,你可以使用webview_flutter
插件来封装WebView,并使用html
和flutter_webview_plugin
来嵌入和使用本地网页。以下是一个简单的例子:
首先,在pubspec.yaml
中添加依赖:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^0.3.10+1 # 用于封装WebView的官方插件
# 如果需要嵌入本地网页,还需要html和flutter_webview_plugin
html: ^0.14.0+2 # 用于加载本地网页的库
flutter_webview_plugin: ^0.3.5 # 用于嵌入网页的插件
然后,你可以创建一个封装WebView的Widget:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewExample extends StatefulWidget {
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
@override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://www.example.com', // 替换为你的网址
);
}
}
如果你想嵌入本地网页,可以使用flutter_webview_plugin
:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:html/dom.dart' as dom;
class LocalWebViewExample extends StatefulWidget {
@override
_LocalWebViewExampleState createState() => _LocalWebViewExampleState();
}
class _LocalWebViewExampleState extends State<LocalWebViewExample> {
FlutterWebviewPlugin flutterWebviewPlugin;
String localHtml;
@override
void initState() {
super.initState();
flutterWebviewPlugin = FlutterWebviewPlugin();
// 假设你有一个本地html文件
loadLocalHtml();
}
// 加载本地HTML文件
void loadLocalHtml() async {
String fileHtml = await rootBundle.loadString('assets/web/index.html');
dom.Document document = dom.Document.html(fileHtml);
localHtml = document.body.innerHtml;
setState(() {});
}
@override
Widget build(BuildContext context) {
return WebviewScaffold(
appBar: AppBar(
title: Text("Local WebView"),
),
body: localHtml == null ? Center(child: CircularProgressIndicator()) : Container(
child: Column(
children: <Widget>[
Expanded(
child: InAppWebView(
initialData: InAppWebViewInitialData(
data: localHtml
),
),
),
],
),
),
);
}
@override
void dispose() {
flutterWebviewPlugin.dispose();
super.dispose();
}
}
评论已关闭