如何在Android设备的Flet WebView中显示本地HTML文件？

在Android设备上使用Flet的WebView组件显示包含JavaScript和CSS的本地HTML文件时遇到以下问题：

• 直接通过file://协议加载本地文件无法正常工作
• 搭建本地HTTP服务器后，访问http://localhost:8000/file.html出现ERR_CLEARTEXT_NOT_PERMITTED安全错误
• 改用自签名SSL证书的HTTPS服务器后，WebView页面空白，但Android Firefox浏览器确认安全提示后可正常加载

核心需求：无需手动反编译APK，实现Flet WebView加载本地HTML文件。

方案1：通过Flet构建配置自动启用明文流量（推荐） #

Flet支持在构建APK时自定义AndroidManifest.xml属性，无需手动修改APK文件，步骤如下：

1. 在项目根目录创建android文件夹，新建AndroidManifest.xml模板文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">

    <application
        android:usesCleartextTraffic="true"
        android:label="你的应用名称"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name="io.flutter.embedding.android.FlutterActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

注意：替换package为你的应用包名，android:label为应用名称。

2. 执行构建命令时指定自定义manifest：

flet build apk --android-manifest android/AndroidManifest.xml

构建完成后，APK会自动包含android:usesCleartextTraffic="true"属性，解决明文流量限制问题，之前的HTTP服务器方案即可正常工作。

方案2：直接加载HTML内容（无需本地服务器） #

如果不想搭建本地服务器，可以直接读取本地HTML文件内容，通过以下两种方式加载到WebView：

方法A：使用data URI（兼容所有Flet版本） #

import flet as ft
import os

def main(page: ft.Page):
    # 读取本地HTML文件
    html_path = os.path.join(os.path.dirname(__file__), "assets/html/file.html")
    with open(html_path, "r", encoding="utf-8") as f:
        html_content = f.read()
    
    # 通过data URI加载到WebView
    wv = ft.WebView(
        url=f"data:text/html;charset=utf-8,{html_content}",
        expand=True
    )
    page.add(wv)

ft.app(main)

方法B：使用WebView的html属性（Flet v0.20+支持） #

新版本Flet的WebView支持直接传入HTML内容，无需转换为data URI：

import flet as ft
import os

def main(page: ft.Page):
    html_path = os.path.join(os.path.dirname(__file__), "assets/html/file.html")
    with open(html_path, "r", encoding="utf-8") as f:
        html_content = f.read()
    
    wv = ft.WebView(
        html=html_content,
        expand=True
    )
    page.add(wv)

ft.app(main)

注意：HTML中引用的CSS/JS文件需使用相对路径，或直接内嵌到HTML文件中。

方案3：解决HTTPS自签证书空白问题 #

如果坚持使用HTTPS服务器，需让WebView信任自签证书，步骤如下：

1. 创建android/res/xml/network_security_config.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="false">
        <domain includeSubdomains="true">localhost</domain>
        <trust-anchors>
            <certificates src="@raw/cert"/>
        </trust-anchors>
    </domain-config>
</network-security-config>

2. 将自签证书cert.pem转换为.crt格式，放到android/res/raw/目录下。

3. 在自定义AndroidManifest.xml的<application>标签中添加：

android:networkSecurityConfig="@xml/network_security_config"

4. 重新构建APK，WebView即可信任自签证书并正常加载页面。

内容的提问来源于stack exchange，提问作者PhunkyBob