flutter - Flutter webview显示空白屏幕

Question

我正在尝试在我的颤振应用程序上使用 WebView() 。在我编写代码之后，没有任何错误，但是，在我的模拟器上运行调试模式时，页面是空白的。AppBar 在那里，文本也在上面，但正文是一个空白屏幕。

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Audio"),
      ),
      body: WebView(
        key: UniqueKey(),
        initialUrl: "http://google.com",
        javascriptMode: JavascriptMode.unrestricted

      ),
    );
  }
}

Answer 1

这几乎是一种预期的行为。initialUrl您提供的似乎是一个不安全的 HTTP 连接。

文档“默认情况下在 iOS 和 Android 上禁用不安全的 HTTP 连接”解释了有关此的所有内容：

从 Android API 28 和iOS 9开始，这些平台默认禁用不安全的 HTTP 连接。

通过此更改，Flutter 还禁用了移动平台上的不安全连接。其他平台（桌面、Web 等）不受影响。

您可以通过遵循特定于平台的指南来定义特定于域的网络策略来覆盖此行为。有关详细信息，请参阅下面的迁移指南。

就像平台一样，应用程序仍然可以打开不安全的套接字连接。Flutter 不会在套接字级别强制执行任何策略；您将负责保护连接。

以下是示例场景：

场景 1： 使用“http://google.com”

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

void main() {
  runApp(Audio());
}

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Audio"),
        ),
        body: WebView(
            key: UniqueKey(),
            initialUrl: "http://google.com",
            javascriptMode: JavascriptMode.unrestricted),
      ),
    );
  }
}

场景 2： 使用“google.com”

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

void main() {
  runApp(Audio());
}

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Audio"),
        ),
        body: WebView(
            key: UniqueKey(),
            initialUrl: "google.com",
            javascriptMode: JavascriptMode.unrestricted),
      ),
    );
  }
}

场景 3： 使用“https://www.google.com/”

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

void main() {
  runApp(Audio());
}

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Audio"),
        ),
        body: WebView(
            key: UniqueKey(),
            initialUrl: "https://www.google.com/",
            javascriptMode: JavascriptMode.unrestricted),
      ),
    );
  }
}