Flutter开发macOS应用：内嵌显示HTML字符串的问题求助

方案一：使用flutter_inappwebview（推荐） #

该插件对macOS支持完善，支持内嵌WebView、加载本地HTML字符串，处理复杂HTML的稳定性表现良好。

步骤： #

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter_inappwebview: ^6.0.0 # 使用最新稳定版

2. 实现内嵌WebView加载HTML字符串：

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

class HtmlDisplayScreen extends StatelessWidget {
  final String gmailHtml; // 从Gmail API获取的HTML字符串

  const HtmlDisplayScreen({super.key, required this.gmailHtml});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: InAppWebView(
            initialData: InAppWebViewInitialData(
              data: gmailHtml,
              baseUrl: Uri.parse('https://mail.google.com/'), // 设置baseUrl解决资源加载问题
            ),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                supportZoom: false,
                javaScriptEnabled: true, // 启用JS支持Gmail HTML交互
              ),
              macos: MacOSInAppWebViewOptions(
                allowsInlineMediaPlayback: true,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

方案二：使用webview_flutter_wkwebview #

webview_flutter官方通过该插件支持macOS，适合偏好官方生态的场景。

步骤： #

1. 添加依赖：

dependencies:
  webview_flutter: ^4.0.0
  webview_flutter_wkwebview: ^3.0.0

2. 初始化并加载HTML：

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

class HtmlWebView extends StatefulWidget {
  final String htmlContent;

  const HtmlWebView({super.key, required this.htmlContent});

  @override
  State<HtmlWebView> createState() => _HtmlWebViewState();
}

class _HtmlWebViewState extends State<HtmlWebView> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // macOS使用WKWebView实现
    final WKWebViewControllerCreationParams params =
        WKWebViewControllerCreationParams();
    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);

    // 加载HTML字符串
    controller.loadHtmlString(
      widget.htmlContent,
      baseUrl: Uri.parse('https://mail.google.com/'),
    );

    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: WebViewWidget(controller: _controller),
      ),
    );
  }
}

方案三：预处理HTML后使用flutter_widget_from_html_core #

如果不想用WebView，可以先清理Gmail HTML中的复杂标签，再用轻量版的flutter_widget_from_html_core降低崩溃概率。

步骤： #

1. 添加依赖：

dependencies:
  flutter_widget_from_html_core: ^0.10.0
  html: ^0.15.0 # 用于HTML预处理

2. 预处理并显示：

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;

class HtmlTextDisplay extends StatelessWidget {
  final String rawHtml;

  const HtmlTextDisplay({super.key, required this.rawHtml});

  String _cleanGmailHtml(String html) {
    final document = parse(html);
    // 移除Gmail中可能导致崩溃的复杂脚本、样式或iframe
    document.querySelectorAll('script, style, iframe').forEach((element) => element.remove());
    // 保留核心内容
    final body = document.body;
    return body?.innerHtml ?? html;
  }

  @override
  Widget build(BuildContext context) {
    final cleanedHtml = _cleanGmailHtml(rawHtml);
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: HtmlWidget(
        cleanedHtml,
        renderMode: RenderMode.column,
      ),
    );
  }
}

额外提示： #

• 加载Gmail HTML时设置baseUrl为https://mail.google.com/，可解决图片、样式等资源的跨域加载问题。
• 如果使用WebView，需在macOS项目的Runner/Info.plist中添加网络权限（加载外部资源时需要）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

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