这是对this question的后续调查,询问这一切是否可能.

WebView package人看起来真的很傻.但到目前为止,它对我来说似乎真的很晦涩和密集.

我所能找到的几乎所有的例子都指的是看到其他现有的Web页面,然后对它们进行更改,但我的用例是关于有一个空页面,在这个页面中,我将使用更成熟的JS可视化库来绘制图表或图形.

我也不清楚,但这个包是关于为非Web环境添加视图的吗?如果是这样的话,在Ffltter Web上使用它会怎么样?也许这对有经验的人来说是显而易见的,但对于那些开始使用它的人来说,这一点一点都不清楚……

例如,我正在try 实现this simple D3.js example,在包的文档中有这个简单的示例:

import 'dart:io';

import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  @override
  void initState() {
    super.initState();
    // Enable virtual display.
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',
    );
  }
}

我不知道在Web的情况下,我会为WebView.platform做什么,没有 Select .而且,当我在Chrome上试用它时,我得到--我在Linux上使用了Chrome,而我的应用does的其余部分--:

The following UnsupportedError was thrown building WebView(dirty, state: _WebViewState#2d89e):
Unsupported operation: Trying to use the default webview implementation for TargetPlatform.linux 
but there isn't a default one

我确实try 了上面代码的其他变体,包括try 将其设置为不带initStateStatelessWidget,但结果是相同的:

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: WebView(
        initialUrl: 'https://flutter.dev',
      ),
    );
  }
}

有没有人能在Flutter 网上完成the simple D3.js example I mentioned次(如果你能把数据从DART发送到JS就更好了……)?那将会有很大的帮助.

推荐答案

webview_flutter插件目前不支持Web平台.

你可以使用flutter_inappwebview%的插件(我是作者).从6.x.x版开始,它支持Web和MacOS平台!

要正确设置Web平台支持,请关注官方的Setup Web guide

以下是Flutter 网的一个简单示例,显示了当前可用的版本6的D3.js Scatter plot example和最新版本flutter_inappwebview(6.0.0-beta.17):

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb &&
      kDebugMode &&
      defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("InAppWebView test"),
        ),
        body: Column(children: <Widget>[
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialData: InAppWebViewInitialData(
                data: """
<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
  <h2>D3.js Scatter-Plot</h2>
  <svg id="myPlot" style="width:500px;height:500px"></svg>
  <script>
    // Set Dimensions
    const xSize = 500;
    const ySize = 500;
    const margin = 40;
    const xMax = xSize - margin * 2;
    const yMax = ySize - margin * 2;

    // Create Random Points
    const numPoints = 100;
    const data = [];
    for (let i = 0; i < numPoints; i++) {
      data.push([Math.random() * xMax, Math.random() * yMax]);
    }

    // Append SVG Object to the Page
    const svg = d3.select("#myPlot")
      .append("svg")
      .append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")");

    // X Axis
    const x = d3.scaleLinear()
      .domain([0, 500])
      .range([0, xMax]);

    svg.append("g")
      .attr("transform", "translate(0," + yMax + ")")
      .call(d3.axisBottom(x));

    // Y Axis
    const y = d3.scaleLinear()
      .domain([0, 500])
      .range([yMax, 0]);

    svg.append("g")
      .call(d3.axisLeft(y));

    // Dots
    svg.append('g')
      .selectAll("dot")
      .data(data).enter()
      .append("circle")
      .attr("cx", function (d) { return d[0] })
      .attr("cy", function (d) { return d[1] })
      .attr("r", 3)
      .style("fill", "Red");
  </script>
</body>
</html>
"""
              ),
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
            ),
          ),
        ]));
  }
}

Flutter inappwebview web example

Javascript相关问答推荐

如何使用侧边滚动按钮具体滚动每4个格?

使用axios.获取实时服务器时的404响应

没有输出到带有chrome.Devtools扩展的控制台

如何解决CORS政策的问题

使用JavaScript重新排序行

在执行异步导入之前判断模块是否已导入()

在Reaction中的handleSubmit按钮内,useSelector值仍然为空

在SHINY R中的嵌套模块中,不能使用Java代码

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

FireBase云函数-函数外部的ENV变量

FireBase FiRestore安全规则-嵌套对象的MapDiff

有没有办法通过使用不同数组中的值进行排序

通过解构/功能组件接收props-prop验证中缺少错误"

我的NavLink活动类在REACT-ROUTER-V6中出现问题

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

当S点击按钮时,我如何才能改变它的样式?

使用Java脚本替换字符串中的小文本格式hashtag

如何从嵌套的json中获取最大值

CSS网格使页面自动滚动

如何在父IF条件和单个IF条件中形成嵌套的三元语句