flutter WebView 中关闭小米 MIUI 深色模式

Question

flutter WebView 中关闭小米 MIUI 深色模式

我正在使用webview_flutter插件，当 webview 在深色模式设备上的任何小米上打开时，它会强制深色模式，我不知道如何避免它

这是我的代码：

import 'dart:async';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class CdsWebView extends StatefulWidget {
  const CdsWebView({
    Key key,
    @required this.url,
  }) : super(key: key);

  final String url;

  @override
  _CdsWebViewState createState() => _CdsWebViewState();
}

class _CdsWebViewState extends State<CdsWebView> {
  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  WebViewController _webViewController;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Builder(builder: (BuildContext context) {
          return Stack(children: <Widget>[
            WebView(
              initialUrl: widget.url,
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController webViewController) {
                _controller.complete(webViewController);
                _webViewController = webViewController;
              },
              onPageFinished: (finish) {
                this.setState(() {
                  isLoading = false;
                });
              },
            ),
            isLoading
                ? Container(
              child: Center(
                child: CircularProgressIndicator(
                  valueColor:
                  AlwaysStoppedAnimation<Color>(Colors.red),
                ),
              ),
            )
                : Container()
          ]);
        }),
      ),
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

如果在flutter中无法阻止，有没有办法在webview页面中阻止？

它会像这样更改背景和文本颜色：

普通的

小米深色模式设备

WebView测试页代码：

<html>
  <head>
  </head>
  <body style="
    display: flex;
    justify-content: center;
    align-items: center;">
    <h1 style="font-family: Arial;">
      My WebView Page
    </h1>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nai*_*bir 6

实施强制黑暗是为了让开发人员更容易切换到黑暗主题，为用户提供统一的体验。

它分析浅色主题应用程序的每个视图，并在将其绘制到屏幕上之前自动应用深色主题。

在基于 Android 10 或更高版本的 MIUI 中，应用程序被迫使用其深色主题，这可能会导致难看的强制深色网页视图和 PWA 应用程序，例如“LinkedIn Go”。

要关闭此功能，请转到您的 android 文件夹，然后转到该\app\src\main\res\values\themes.xml文件。将forceDarkAllowed 设置为 false <style name="Theme.YOUR_APP_NAME" parent="Theme.MaterialComponents.DayNight"> ，如下所示

    <item name="android:forceDarkAllowed">false</item>

Run Code Online (Sandbox Code Playgroud)

如果这不起作用，请在values-night/themes.xml. 这应该可以解决问题。

如果你仍然困惑，把它放在哪里，你的最终代码应该看起来像这样 -

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.YOUR_APP_NAME" parent="Theme.MaterialComponents.DayNight">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/blue_grey_500</item>
        <item name="colorPrimaryVariant">@color/blue_grey_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/grey_200</item>
        <item name="colorSecondaryVariant">@color/grey_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Customize your theme here. -->
        <item name="android:forceDarkAllowed">false</item>
    </style>

</resources>

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，6 月前
查看次数：	1565 次
最近记录：	4 年，6 月前