Flutter桌面端如何显示含加粗文本与链接的HTML段落？

因为flutter_html仅支持移动端，针对桌面平台，有以下几种可行的实现方式：

1. 使用flutter_widget_from_html_core库 #

这是flutter_html的核心子库，移除了移动端特定依赖，完全支持Windows、macOS、Linux桌面平台，能解析渲染包含加粗、链接在内的常见HTML标签。

用法示例： #

1. 在pubspec.yaml中添加依赖：

dependencies:
  flutter_widget_from_html_core: ^0.10.0 # 请使用最新版本

2. 在代码中使用HtmlWidget组件：

import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

// 示例HTML内容
final htmlContent = '''
<p>这是一段<b>加粗文本</b>，还有一个<a href="https://example.com">链接</a>，<strong>另一段加粗内容</strong>。</p>
''';

// 渲染组件
HtmlWidget(
  htmlContent,
  // 自定义链接点击行为
  onTapUrl: (url) {
    // 处理链接跳转，比如用url_launcher打开
    return true;
  },
  // 自定义基础文本样式
  textStyle: TextStyle(fontSize: 16),
)

2. 使用webview_flutter渲染 #

webview_flutter目前已支持桌面平台，通过加载本地HTML字符串来渲染内容，这种方式能处理更复杂的HTML样式，兼容性强。

用法示例： #

1. 添加依赖：

dependencies:
  webview_flutter: ^4.0.0 # 请使用最新版本
  webview_flutter_windows: ^0.1.0 # Windows平台适配
  webview_flutter_macos: ^0.1.0 # macOS平台适配

2. 代码实现：

import 'package:webview_flutter/webview_flutter.dart';

final htmlContent = '''
<!DOCTYPE html>
<html>
<body style="font-size:16px; margin:0; padding:8px;">
<p>这是一段<b>加粗文本</b>，还有一个<a href="https://example.com">链接</a>。</p>
</body>
</html>
''';

WebViewWidget(
  controller: WebViewController()
    ..loadHtmlString(htmlContent),
)

3. 手动解析HTML并构建原生组件 #

如果你的HTML结构非常简单（仅包含加粗、链接等少数标签），可以用html包解析HTML节点，然后用Flutter的RichText组件手动构建UI，完全自定义样式和交互逻辑。

用法示例： #

1. 添加依赖：

dependencies:
  html: ^0.15.0 # HTML解析库

2. 解析并构建RichText：

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

Widget buildCustomHtmlText(String html) {
  final document = parse(html);
  final textSpans = <TextSpan>[];

  void traverseNode(dom.Node node) {
    if (node is dom.Text) {
      textSpans.add(TextSpan(text: node.text));
      return;
    }
    if (node is dom.Element) {
      TextStyle spanStyle = const TextStyle(color: Colors.black);
      GestureRecognizer? tapRecognizer;

      // 处理加粗标签
      if (node.localName == 'b' || node.localName == 'strong') {
        spanStyle = spanStyle.copyWith(fontWeight: FontWeight.bold);
      }
      // 处理链接标签
      else if (node.localName == 'a') {
        final url = node.attributes['href'];
        tapRecognizer = TapGestureRecognizer()
          ..onTap = () {
            // 这里添加链接跳转逻辑，比如打开外部浏览器
          };
      }

      // 遍历子节点
      final childSpans = <TextSpan>[];
      for (final child in node.nodes) {
        traverseNode(child);
      }

      textSpans.add(TextSpan(
        children: childSpans,
        style: spanStyle,
        recognizer: tapRecognizer,
      ));
    }
  }

  for (final node in document.body!.nodes) {
    traverseNode(node);
  }

  return RichText(
    text: TextSpan(children: textSpans),
    padding: EdgeInsets.all(8),
  );
}

// 使用示例
buildCustomHtmlText('<p>这是<b>加粗内容</b>，<a href="xxx">跳转链接</a></p>')

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