Flutter富文本链接处理插件link_rich_text的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter富文本链接处理插件link_rich_text的使用

pub package GitHub stars

link_rich_text 是一个用于在Flutter中显示带超链接和自定义特殊字符的富文本插件。下面将详细介绍如何安装和使用这个插件。

Demo

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  link_rich_text: 3.0.2

然后运行 flutter pub get 来安装包。

使用方法

通过 LinkRichModel 使用

首先需要创建 LinkRichModel，它可以提前准备好并缓存起来，这对于性能要求高的场景（如列表）非常有用。

创建模型

_setLinkRichModel() async {
  // 模拟加载数据的耗时
  await Future.delayed(const Duration(milliseconds: 500));

  // 添加特殊字符串
  List<SpecialStr> specialStrs = <SpecialStr>[
    SpecialStr(
      text: '@我啊',
      type: 'user',
      style: const TextStyle(fontSize: 15, color: Colors.blue),
    ),
    SpecialStr(
      text: '@我啊啊',
      type: 'user',
      style: const TextStyle(fontSize: 18, color: Colors.purple),
    ),
    SpecialStr(
      text: '@一只鱼',
      type: 'user',
      style: const TextStyle(fontSize: 15, color: Colors.orange),
    ),
    SpecialStr(
      text: '@不老实的鸟',
      type: 'user',
      style: const TextStyle(fontSize: 15, color: Colors.brown),
    ),
  ];

  // 添加正则特殊字符串
  List<RegExpStr> regExpStrs = <RegExpStr>[
    RegExpStr(
      text: '#\\S*? ',
      type: '#',
      style: const TextStyle(fontSize: 18, color: Colors.lightBlueAccent),
    ),
  ];

  String text = '@一只鱼 控件打底可反#馈的 了老@我啊都放到裤积分 '
      '快进快手动，肯德的框架反馈的减@我啊啊肥看的积分基疯狂的发，'
      '发拉拉速度快积分@哈哈卢萨卡的积分禄口街道和你是谁 @不老实的鸟 ？是吗';

  // 创建并缓存富文本模型
  _linkRichModel = LinkRichModel(
    text,
    style: const TextStyle(fontSize: 15, color: Colors.black),
    linkStyle: const TextStyle(fontSize: 18, color: Colors.red),
    specialStrs: specialStrs,
    regExpStrs: regExpStrs,
    onTapSpecialStr: (String spStr, String type) {
      if (kDebugMode) {
        print('LinkRichModel onTapSpecialStr type = $type, text = $spStr');
      }
    },
  );

  setState(() {});
}

显示富文本

你可以直接使用 LinkRichText.fromModel 方法来显示富文本：

LinkRichText.fromModel(_linkRichModel!)

或者使用 RichText 组件并传入 textSpan 属性：

RichText(text: _linkRichModel!.textSpan)

直接通过 LinkRichText 使用

你也可以直接使用 LinkRichText 组件而不需要预先创建 LinkRichModel：

LinkRichText(
  text,
  style: const TextStyle(fontSize: 15, color: Colors.black),
  linkStyle: const TextStyle(fontSize: 15, color: Colors.blue),
  specialStrs: specialStrs,
  regExpStrs: regExpStrs,
  onTapSpecialStr: (String text, String type) {
    if (kDebugMode) {
      print('type = $type, text = $text');
    }
    if (type == 'link') {
      launchUrlString(text);
    }
  },
)

示例代码

以下是一个完整的示例应用程序，展示了如何使用 link_rich_text 插件：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:link_rich_text/link_rich_text.dart';
import 'package:url_launcher/url_launcher_string.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'link_rich_text demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'link_rich_text demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  LinkRichModel? _linkRichModel;

  @override
  void initState() {
    super.initState();
    _setLinkRichModel();
  }

  _setLinkRichModel() async {
    // 模拟加载数据的耗时
    await Future.delayed(const Duration(milliseconds: 500));

    // 对于性能要求高的场景，比如列表中，
    // 可在加载好数据的同时就设置好富文本模型（LinkRichModel）
    // 并将模型传入LinkRichText中，或将模型的textSpan属性传入RichText中显示

    // 添加特殊字符串
    List<SpecialStr> specialStrs = <SpecialStr>[
      SpecialStr(
          text: '@我啊',
          type: 'user',
          style: const TextStyle(fontSize: 15, color: Colors.blue)),
      SpecialStr(
          text: '@我啊啊',
          type: 'user',
          style: const TextStyle(fontSize: 18, color: Colors.purple)),
      SpecialStr(
          text: '@一只鱼',
          type: 'user',
          style: const TextStyle(fontSize: 15, color: Colors.orange)),
      SpecialStr(
          text: '@不老实的鸟',
          type: 'user',
          style: const TextStyle(fontSize: 15, color: Colors.brown)),
    ];

    // 添加正则特殊字符串
    List<RegExpStr> regExpStrs = <RegExpStr>[
      RegExpStr(
          text: '#\\S*? ',
          type: '#',
          style: const TextStyle(fontSize: 18, color: Colors.lightBlueAccent)),
    ];

    String text = '@一只鱼 控件打底可反#馈的 了老@我啊都放到裤积分 '
        '快进快手动，肯德的框架反馈的减@我啊啊肥看的积分基疯狂的发，'
        '发拉拉速度快积分@哈哈卢萨卡的积分禄口街道和你是谁 @不老实的鸟 ？是吗';

    // 创建并缓存富文本模型
    _linkRichModel = LinkRichModel(
      text,
      style: const TextStyle(fontSize: 15, color: Colors.black),
      linkStyle: const TextStyle(fontSize: 18, color: Colors.red),
      specialStrs: specialStrs,
      regExpStrs: regExpStrs,
      onTapSpecialStr: (String spStr, String type) {
        if (kDebugMode) {
          print('LinkRichModel onTapSpecialStr type = $type, text = $spStr');
        }
      },
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ''),
      ),
      body: Center(
        child: _linkRichModel == null
            ? Container()
            : Column(
                children: [
                  _buildLinkRichText(),
                  _buildSpan(),
                  LinkRichText.fromModel(
                    _linkRichModel!,
                    onTapSpecialStr: (String spStr, String type) {
                      if (kDebugMode) {
                        print(
                            'LinkRichText onTapSpecialStr type = $type, text = $spStr');
                      }
                    },
                  ),
                  _buildSpan(),
                  RichText(text: _linkRichModel!.textSpan),
                ],
              ),
      ),
    );
  }

  _buildLinkRichText() {
    // 添加特殊字符串
    List<SpecialStr> specialStrs = <SpecialStr>[
      SpecialStr(
          text: '@老大',
          type: 'user',
          style: const TextStyle(fontSize: 15, color: Colors.purple)),
    ];

    // 添加正则特殊字符串
    List<RegExpStr> regExpStrs = <RegExpStr>[
      RegExpStr(
          text: '#\\S*? ',
          type: '话题',
          style: const TextStyle(fontSize: 15, color: Colors.blueAccent)),
    ];

    String text =
        '@老大看看这个：https://pub.dev/packages/photo_browser，一个不错的#flutter 图片浏览器';

    return LinkRichText(
      text,
      style: const TextStyle(fontSize: 15, color: Colors.black),
      linkStyle: const TextStyle(fontSize: 15, color: Colors.blue),
      specialStrs: specialStrs,
      regExpStrs: regExpStrs,
      onTapSpecialStr: (String text, String type) {
        if (kDebugMode) {
          print('type = $type, text = $text');
        }
        if (type == 'link') {
          launchUrlString(text);
        }
      },
    );
  }

  _buildSpan() {
    return SizedBox(
      height: 20,
      child: Center(
        child: Container(
          width: double.infinity,
          height: 1,
          color: Colors.blueGrey,
        ),
      ),
    );
  }
}

以上就是 link_rich_text 插件的详细使用方法和一个完整的示例应用程序。希望这能帮助你在Flutter项目中更好地处理富文本内容！


更多关于Flutter富文本链接处理插件link_rich_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter富文本链接处理插件link_rich_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用link_rich_text插件来处理富文本链接的示例代码。这个插件允许你在Flutter应用中显示带有可点击链接的富文本。

首先，确保你已经在pubspec.yaml文件中添加了link_rich_text依赖：

dependencies:
  flutter:
    sdk: flutter
  link_rich_text: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用LinkRichText组件来显示和处理富文本链接。以下是一个完整的示例代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Link Rich Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String richText = """
    This is a sample text with a [link](https://flutter.dev) to the Flutter website.
    Also, here is another [local link](#section1) to a section below.

    <div id="section1">
      This is section 1.
    </div>
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Link Rich Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LinkRichText(
          text: richText,
          onLinkClicked: (String url) {
            if (url.startsWith('#')) {
              // Handle local anchor links
              print('Local link clicked: $url');
              // Here you could scroll to the corresponding section in the text
            } else {
              // Open external links in the browser
              _launchURL(url);
            }
          },
        ),
      ),
    );
  }

  _launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

在这个示例中，我们做了以下几件事：

  1. 定义富文本内容：在richText字符串中，我们包含了带有HTML链接格式的文本。注意，这里的本地链接（例如#section1）是一个占位符，用于演示如何处理不同类型的链接。

  2. 使用LinkRichText组件：我们将richText字符串传递给LinkRichText组件，并定义了一个onLinkClicked回调函数来处理链接点击事件。

  3. 处理链接点击事件：在onLinkClicked回调函数中，我们检查链接的URL。如果URL以#开头，我们将其视为本地链接并打印出来（在实际应用中，你可以实现滚动到对应部分的功能）。否则，我们假定它是一个外部链接，并使用launch函数在浏览器中打开它。

  4. 打开外部链接：_launchURL函数使用url_launcher包来打开外部链接。确保你已经在pubspec.yaml文件中添加了url_launcher依赖，并在代码中导入了它：

dependencies:
  url_launcher: ^x.y.z  # 请替换为最新版本号

并在代码文件顶部添加导入语句：

import 'package:url_launcher/url_launcher.dart';

这个示例展示了如何使用link_rich_text插件来处理Flutter应用中的富文本链接。你可以根据需要进一步自定义和扩展这个示例。

回到顶部