Flutter中如何在WebView内将Firebase含链接文本渲染为HTML超链接效果

实现步骤 #

• 第一步：添加所需依赖
  首先在项目pubspec.yaml的dependencies下添加两个社区稳定维护的依赖：

  dependencies:
    flutter:
      sdk: flutter
    webview_flutter: ^4.4.2 # 官方维护的WebView组件
    url_launcher: ^6.1.14 # 处理链接点击跳转逻辑
  

  保存配置后执行flutter pub get拉取依赖到本地。

• 第二步：编写文本转HTML的处理逻辑
  从Firebase拿到的存储文本如果是纯文本格式（链接直接以字符串形式夹杂在内容中），需要先通过正则识别所有链接，将其包裹为HTML的<a>超链接标签，再套上基础HTML结构，保证内容排版和App整体风格统一：

  // 入参为Firebase拉取到的原始文本内容
  String convertTextToHtml(String rawText) {
    // 正则匹配http/https/www开头的常规链接格式
    final linkReg = RegExp(r'(https?://[^\s<>"]+|www\.[^\s<>"]+)');
    // 替换所有匹配到的链接为带样式的超链接标签
    final processedText = rawText.replaceAllMapped(linkReg, (match) {
      final link = match.group(0)!;
      // 可根据App主题自定义链接颜色、下划线样式
      return '<a href="$link" style="color: #1677ff; text-decoration: none;">$link</a>';
    });
    // 套上基础HTML结构，配置全局字体样式适配端侧显示
    return '''
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
          body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: #333333;
          }
        </style>
      </head>
      <body>$processedText</body>
    </html>
    ''';
  }
  

  如果Firebase中存储的本身就是编写好的HTML内容，不需要做正则替换，直接传入原始HTML字符串即可。

• 第三步：配置WebView组件加载内容、处理链接点击
  初始化WebViewController，完成基础配置后加载处理好的HTML内容，同时配置导航拦截逻辑，点击超链接时触发对应跳转，避免链接覆盖当前WebView的内容：

  import 'package:flutter/material.dart';
  import 'package:webview_flutter/webview_flutter.dart';
  import 'package:url_launcher/url_launcher.dart';
  
  class ContentWebView extends StatefulWidget {
    final String firebaseRawText;
    const ContentWebView({super.key, required this.firebaseRawText});
  
    @override
    State<ContentWebView> createState() => _ContentWebViewState();
  }
  
  class _ContentWebViewState extends State<ContentWebView> {
    late final WebViewController _controller;
  
    @override
    void initState() {
      super.initState();
      _controller = WebViewController()
        // 开启JS支持，兼容各类HTML内容渲染
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setBackgroundColor(Colors.transparent)
        // 配置导航拦截，处理超链接点击事件
        ..setNavigationDelegate(
          NavigationDelegate(
            onNavigationRequest: (request) async {
              final url = request.url;
              // 拦截所有http/https开头的外部链接
              if (url.startsWith('http://') || url.startsWith('https://')) {
                // 调用系统默认浏览器打开链接，不覆盖当前WebView内容
                if (await canLaunchUrl(Uri.parse(url))) {
                  await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
                }
                return NavigationDecision.prevent;
              }
              // 本地加载的HTML内容直接放行
              return NavigationDecision.navigate;
            },
          ),
        )
        // 加载处理完成的HTML内容
        ..loadHtmlString(convertTextToHtml(widget.firebaseRawText));
    }
  
    @override
    Widget build(BuildContext context) {
      return WebViewWidget(controller: _controller);
    }
  }
  

开发注意点 #

• Android端需要在android/app/src/main/AndroidManifest.xml中添加网络权限<uses-permission android:name="android.permission.INTERNET"/>，否则无法正常加载内容和跳转链接。
• iOS端需要在ios/Runner/Info.plist中添加对应配置，允许跳转外部应用：

  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>http</string>
    <string>https</string>
  </array>
  

• 如果需要调整超链接样式、文本字号、行间距等展示效果，直接修改HTML中<style>标签内的CSS代码即可，不需要修改Flutter端组件逻辑。

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