flutter 在Web视图中禁用深色模式

bprjcwpo  于 2023-03-03  发布在  Flutter
关注(0)|答案(5)|浏览(268)

我正在Flutter中开发一个应用程序(带有WebView),当设备上激活黑暗模式时,WebView会改变网页的颜色(文本和背景)使其变暗,造成可怕的结果。
有没有办法在网络视图中禁用暗模式?
我正在使用此插件flutter_webview_plugin

cnh2zyt3

cnh2zyt31#

我设法通过在android/app/src/res/values/styles.xml中添加以下行来修复它:
<item name="android:forceDarkAllowed">false</item>
这里我的完整代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>
gpnt7bae

gpnt7bae2#

这个问题被浏览了超过973次,我无法阻止发帖的冲动。
你不能在flutter.youll nedd中编辑webview插件中的原生android代码。
我用Android Studio 找到webview插件源代码下:外部库〉Flutter插件〉webview_flutter-2.0.13
你也可以使用vs代码。
所以现在你需要编辑软件包中的2个文件
1.在webview_flutter-2.0.13〉安卓下构建. gradle

dependencies {
    implementation 'androidx.annotation:annotation:1.0.0'
    implementation 'androidx.webkit:webkit:1.2.0' //here update the version to 1.2.0
    testImplementation 'junit:junit:4.12'
    testImplementation 'org.mockito:mockito-inline:3.11.1'
    testImplementation 'androidx.test:core:1.3.0'
}

保存。
接下来是webview_flutter-2.0.13/android/源代码/主代码/java/io/flutter/插件/webviewflutter/www.example.com文件。WebViewBuilder.java file.
你需要导入一些东西或者更好的替换

package io.flutter.plugins.webviewflutter;
import android.content.Context;
import android.view.View;
import android.webkit.DownloadListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.webkit.WebViewFeature;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.webkit.WebSettingsCompat;

在同一个文件中,您要修改"build"方法:

public WebView build() {
    WebView webView = WebViewFactory.create(context, usesHybridComposition, containerView);
    //this is the thing that we add
    if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
      WebSettingsCompat.setForceDark(webView.getSettings(), WebSettingsCompat.FORCE_DARK_OFF);
    }
    WebSettings webSettings = webView.getSettings();
    webSettings.setDomStorageEnabled(enableDomStorage);
    webSettings.setJavaScriptCanOpenWindowsAutomatically(javaScriptCanOpenWindowsAutomatically);
    webSettings.setSupportMultipleWindows(supportMultipleWindows);
    webView.setWebChromeClient(webChromeClient);
    webView.setDownloadListener(downloadListener);
    return webView;
  }

你们走吧,我的懒虫们😁

ddrv8njm

ddrv8njm3#

您可以通过将所需的小部件 Package 在Theme小部件中来覆盖当前主题。

@override
  Widget build(BuildContext context) {
    return new Theme(
      child: InAppWebViewWidget(),
      data: new ThemeData.light()
    );
  }
n9vozmp4

n9vozmp44#

因此,我使用的是InAppWebView,在启用黑暗模式后,会出现黑屏,直到数据无法加载到Web视图中
为了避免在黑暗模式下黑屏,我已经禁用了应用程序的黑暗模式,并启用了“transparentBackground”

==〉禁用“黑暗模式”

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: AppLocalization.appTitle,
      theme: ThemeData.light(),
      themeMode: ThemeMode.light,
      darkTheme: ThemeData.light(),
      initialRoute: AppRoutes.splashScreen,
      debugShowCheckedModeBanner: false,
      routes: AppRoutes.getRoutes(),
    );
  }
}

==〉启用“透明背景”

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse(widget.initialUrlRequest)),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      transparentBackground: true,
    ),
  ),
);
deyfvvtc

deyfvvtc5#

我认为这个插件没有像“忽略主题模式”这样的参数。但是,你可以简单地尝试下面的方法。

Theme(
                  data: ThemeData(
                    // Unique Theme Data
                  ),
                  child: InAppWebView(
                    //....
                  ),
                ),

相关问题