Question

我的资产目录中有一个.html文件。

如何在Flutter中显示/渲染它？

Answer 1

您可以使用flutter_webview_plugin这也适用于本地文件。

它适用于Android和iOS

<强>达特

var flutterWebviewPlugin = new FlutterWebviewPlugin();

flutterWebviewPlugin.launch("https://flutter.io");
await flutterWebviewPlugin.onDestroy.first;

Android清单

<activity android:name="com.flutter_webview_plugin.WebviewActivity"
                  android:parentActivityName=".MainActivity"/>

Answer 2

Flutter团队发布的软件包昨天发布：

webview_flutter

如何加载本地资产：

将文件添加到项目并更新您的pubspec：

//...
child:

                        FutureBuilder<String>(
                            future: LocalLoader().loadLocal(),
                            builder: (context, snapshot) {
                              if (snapshot.hasData) {
//                                return Text("${snapshot.data}");

                                return WebView(
                                  initialUrl: new Uri.dataFromString(snapshot.data, mimeType: 'text/html').toString(), // maybe you Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName("UTF-8")).toString()
                                  javascriptMode: JavascriptMode.unrestricted,
                                );

                              } else if (snapshot.hasError) {
                                return Text("${snapshot.error}");
                              }
                              return CircularProgressIndicator();
                            }
                        )

在您的小部件中：

class LocalLoader {
  Future<String> loadLocal() async {
    return await rootBundle.loadString('assets/yourFile.html');
  }
}

从文件中加载文本：

nodemailer

Answer 3

您可以尝试使用我的flutter_inappbrowser插件，它是Flutter插件，可让您添加与小部件树集成的内联网络视图或打开应用内浏览器< / strong>窗口！

您可以使用InAppWebView小部件类或InAppBrowser类并使用其Webview控制器。

关于InAppWebView：内联WebView有一些限制，因为AndroidView和UiKitView尚未正式稳定！因此，您将受到一些限制，例如无法使用键盘！但是，它具有许多可以测试和使用的方法和事件。

您可以使用InAppWebViewController.loadFile方法。

要能够加载本地文件（html，js，css等），您需要将它们添加到pubspec.yaml文件的Assets部分中，否则找不到它们！

pubspec.yaml文件的示例：

... # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - assets/index.html - assets/css/ - assets/images/ ...

然后，在您的业务逻辑中调用该方法：

... inAppWebViewController.loadFile("assets/index.html"); ...

Answer 4

解压缩apk包，我发现原因：路径错误；

对于Android：

"assets/test.html" == "file:///android_asset/flutter_assets/assets/test.html"

所以，就像这样：

WebView(
initialUrl: "file:///android_asset/flutter_assets/assets/test.html",
javascriptMode: JavascriptMode.unrestricted,

）

您可以加载“ assets / test.html”。

Answer 5

如果您只需要呈现简单的HTML标签（p，img，a，h1等），则可以尝试使用flutter_html plugin

它还不够成熟，无法进行生产，但值得恕我直言。

Answer 6

要渲染HTML标记如（），请使用此插件flutter_html

您还可以使用此插件open_file打开文件

如何显示HTML资产文件？

6 个答案: