Android Studio中WebView跳转本地页面时白屏闪烁问题求助

问题描述 #

开发一款基于本地HTML文件的App，index.html包含指向settings.html、add.html、edit.html等本地文件的链接。在Android Studio模拟器及真机运行时，点击任意链接，页面加载前会出现快速的白色背景闪屏。

相关代码 #

MainActivity.java #

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView webView=findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.loadUrl("file:///android_asset/index.html");

    getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
}

activity_main.xml #

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"/>

</LinearLayout>

解决方案 #

1. 统一WebView与页面背景色 #

白闪的核心原因是WebView默认背景为白色，切换页面时旧页面卸载、新页面加载的间隙会露出WebView的白色背景。将WebView背景色设置为与HTML页面一致的颜色即可缓解：

// 在初始化WebView时添加
webView.setBackgroundColor(getResources().getColor(R.color.your_page_background));
// 如果页面背景是透明或深色，也可以直接设置：
// webView.setBackgroundColor(Color.TRANSPARENT);

同时确保HTML页面的body背景色与WebView设置的颜色完全匹配。

2. 拦截链接加载，避免WebView重定向闪屏 #

通过WebViewClient拦截本地链接，直接读取HTML文件内容并加载，跳过系统默认的页面跳转流程，消除闪屏：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        // 只拦截本地asset中的链接
        if (url.startsWith("file:///android_asset/")) {
            try {
                // 读取本地HTML文件内容
                InputStream is = getAssets().open(url.replace("file:///android_asset/", ""));
                BufferedReader reader = new BufferedReader(new InputStreamReader(is));
                StringBuilder content = new StringBuilder();
                String line;
                while ((line = reader.readLine()) != null) {
                    content.append(line);
                }
                is.close();
                // 加载文件内容，保持baseURL不变以确保资源路径正确
                view.loadDataWithBaseURL("file:///android_asset/", content.toString(), "text/html", "UTF-8", null);
                return true;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return super.shouldOverrideUrlLoading(view, request);
    }
});

3. 启用硬件加速提升渲染速度 #

开启WebView的硬件加速可以加快页面加载速度，减少闪屏持续时间：

• 在AndroidManifest.xml的对应Activity中添加：

<activity android:name=".MainActivity"
    android:hardwareAccelerated="true">

• 或者在代码中设置：

webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

4. 改用单页应用(SPA)模式 #

如果场景允许，将多HTML页面改为单页应用，通过JavaScript动态切换页面内容，完全避免页面跳转带来的闪屏。例如使用Vue、React等框架，或原生JS实现内容切换。

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