如何在Flutter InAppWebView中自定义TradingView.widget？

我需要对嵌入在InAppWebView组件中的TradingView图表组件进行自定义配置。目前图表可正常显示，但我希望修改图表的背景颜色、字体以及价格滚动条类型，尝试将图表样式调整为类似币安平台的图表效果。我在Stack Overflow上搜索了大量方案，但均未生效，请问该如何实现？是否有相关官方文档可供参考？

感谢各位的回复！:)

当前代码 #

生成TradingView HTML的方法

String _testCode() {
    return """
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">  
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "AAPL",
  "interval": "D",
  "timezone": "exchange",
  "theme": "dark",
  "style": "1",
  "toolbar_bg": "#ff7518", <!-- Does Not Work-->
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "save_image": false,
  "show_popup_button": true,
  "popup_width": "1000",
  "popup_height": "650",
  "locale": "en",
  "overrides": {  <!-- Does Not Work-->
        "paneProperties.background": "#ffffff",
  },

  }
  );
  </script>
</div>
<!-- TradingView Widget END -->
""";
  }

InAppWebView构建代码

@override
  Widget build(BuildContext context) {
    return InAppWebView(
      initialOptions: InAppWebViewGroupOptions(
        crossPlatform: InAppWebViewOptions(
          transparentBackground: true,
          javaScriptEnabled: true,
        ),
        ios: IOSInAppWebViewOptions(
          disallowOverScroll: true,
        ),
      ),
      onWebViewCreated: (InAppWebViewController controller) async {
        controller.loadUrl(
          urlRequest: URLRequest(
            url: Uri.dataFromString(
              //_generateCode(binanceSymbol),
              _testCode(),
              mimeType: 'text/html',
              encoding: Encoding.getByName('utf-8'),
            ),
          ),
        );
      },
    );
  }

1. 解决overrides不生效的核心问题 #

你设置的"theme": "dark"全局主题会强制覆盖overrides里的部分样式属性。要让自定义配置生效，要么删掉theme配置项，要么改成"theme": "light"，再在overrides里细化所有需要调整的样式。

2. 修复工具栏背景色问题 #

原来的toolbar_bg是控制组件外部容器的工具栏，如果你要修改图表内部的工具栏背景，得用overrides里的toolbarProperties.background属性。

3. 自定义背景、字体、滚动条的具体配置 #

用下面的overrides配置替换你原来的，就能接近币安的浅色简洁风格：

"overrides": {
  // 图表面板背景
  "paneProperties.background": "#ffffff",
  // 网格线颜色
  "paneProperties.vertGridColor": "#f0f0f0",
  "paneProperties.horzGridColor": "#f0f0f0",
  // 字体设置（可替换成你需要的字体，比如币安用的PingFang SC）
  "paneProperties.fontFamily": "PingFang SC, sans-serif",
  "scalesProperties.fontFamily": "PingFang SC, sans-serif",
  // 价格刻度文字颜色
  "scalesProperties.textColor": "#666666",
  // 价格滚动条样式（仿币安的橙色滑块+透明轨道）
  "scalesProperties.scrollBarColor": "#ff7518",
  "scalesProperties.scrollBarWidth": 3,
  "scalesProperties.scrollBarTrackColor": "transparent",
  // 内部工具栏背景
  "toolbarProperties.background": "#ff7518"
}

4. 官方参考依据 #

TradingView有官方的Widget可视化配置工具，你可以在里面拖拽调整所有样式，直接导出可用的配置代码，比手动写更不容易出错。官方文档里列了所有可自定义的属性，包括主题、字体、滚动条等细节，完全满足仿币安样式的需求。

调整后的完整_testCode代码 #

String _testCode() {
    return """
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">  
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "AAPL",
  "interval": "D",
  "timezone": "exchange",
  // 移除全局theme，让overrides完全生效
  "style": "1",
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "save_image": false,
  "show_popup_button": true,
  "popup_width": "1000",
  "popup_height": "650",
  "locale": "en",
  "overrides": {
        "paneProperties.background": "#ffffff",
        "paneProperties.vertGridColor": "#f0f0f0",
        "paneProperties.horzGridColor": "#f0f0f0",
        "paneProperties.fontFamily": "PingFang SC, sans-serif",
        "scalesProperties.fontFamily": "PingFang SC, sans-serif",
        "scalesProperties.textColor": "#666666",
        "scalesProperties.scrollBarColor": "#ff7518",
        "scalesProperties.scrollBarWidth": 3,
        "scalesProperties.scrollBarTrackColor": "transparent",
        "toolbarProperties.background": "#ff7518"
  }
  }
  );
  </script>
</div>
<!-- TradingView Widget END -->
""";
  }

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