如何在 Flutter 中链接文本

Question

在 Flutter 中是否有一种简单的方法来“链接”可能包含纯文本、电子邮件和 Web URL 的文本？例如。如果我的文字是My phone number is 099 123 45 67 and my email is test@test.com 电话号码和电子邮件将呈现为可点击的链接。

在 Android 中，这将是一个单行：

textView.setAutoLinkMask(Linkify.ALL);

我看到有人问过类似的问题here。该解决方案适用于静态文本，但对于动态文本，解析文本、检测所有 URL、电话号码、电子邮件等并使用 TextSpans 相应地呈现它们会复杂得多。

Answer 1

我为此创建了一个新包：flutter_linkify。它目前仅支持 URL，但您可以随时在 GitHub 上提交问题并提出功能请求。

基本用法：

import 'package:flutter_linkify/flutter_linkify.dart';

Linkify(
  onOpen: (url) => print("Clicked $url!"),
  text: "Made by https://cretezy.com",
);

Answer 2

感谢@Charles Crete 创建该库。

我只是想在这里再添加一个解决方案，结合 RichText、TextSpan 和 TapGestureRecognizer（都在 Flutter 框架中）

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

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

class HyperLinkDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: RichText(
                text: TextSpan(children: [
              TextSpan(
                  text: 'This is a very long text, but you can not click on it. ',
                  style: TextStyle(fontSize: 20, color: Colors.black)),
              TextSpan(
                  text: 'And this is a clickable text',
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.blue,
                      decoration: TextDecoration.underline),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print('You clicked on me!');
                    })
            ])),
          ),
        ),
      ),
    );
  }
}

这是结果

Answer 3

这是我的实现方式 - 使用 buildTextWithLinks 函数获取带有链接的 Text 组件。

它使用 url_launcher 并且当前支持 URL、邮件和电话链接，但可以通过添加更多 RegExps 和处理程序轻松扩展。

import 'package:url_launcher/url_launcher.dart';

Text buildTextWithLinks(String textToLink) => Text.rich(TextSpan(children: linkify(textToLink)));

Future<void> openUrl(String url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

const String urlPattern = r'https?:/\/\\S+';
const String emailPattern = r'\S+@\S+';
const String phonePattern = r'[\d-]{9,}';
final RegExp linkRegExp = RegExp('($urlPattern)|($emailPattern)|($phonePattern)', caseSensitive: false);

WidgetSpan buildLinkComponent(String text, String linkToOpen) => WidgetSpan(
    child: InkWell(
      child: Text(
        text,
        style: TextStyle(
          color: Colors.blueAccent,
          decoration: TextDecoration.underline,
        ),
      ),
      onTap: () => openUrl(linkToOpen),
    )
);

List<InlineSpan> linkify(String text) {
  final List<InlineSpan> list = <InlineSpan>[];
  final RegExpMatch match = linkRegExp.firstMatch(text);
  if (match == null) {
    list.add(TextSpan(text: text));
    return list;
  }

  if (match.start > 0) {
    list.add(TextSpan(text: text.substring(0, match.start)));
  }

  final String linkText = match.group(0);
  if (linkText.contains(RegExp(urlPattern, caseSensitive: false))) {
    list.add(buildLinkComponent(linkText, linkText));
  }
  else if (linkText.contains(RegExp(emailPattern, caseSensitive: false))) {
    list.add(buildLinkComponent(linkText, 'mailto:$linkText'));
  }
  else if (linkText.contains(RegExp(phonePattern, caseSensitive: false))) {
    list.add(buildLinkComponent(linkText, 'tel:$linkText'));
  } else {
    throw 'Unexpected match: $linkText';
  }

  list.addAll(linkify(text.substring(match.start + linkText.length)));

  return list;
}

Answer 4

这个插件名为链接器 (https://github.com/best-flutter/linker/blob/master/example/lib/main.dart)

会帮助你。

您可以打开电话号码拨打电话

您可以打开其他系统应用或系统设置

您可以使用此软件包打开任何 3rd 方应用程序..

您可以打开电子邮件

此包在 pub.dev 中可用 ...搜索 Linker 以获取它

Answer 5

检查这个库flutter_autolink_text。与flutter_linkify 非常相似，但它也增加了对电话号码的支持。

这是如何使用它。

import 'package:flutter_autolink_text/flutter_autolink_text.dart';

AutolinkText(
    text: ...,
    textStyle: TextStyle(color: Colors.black),
    linkStyle: TextStyle(color: Colors.blue),
    onWebLinkTap: (link) => print('Clicked: ${link}'),
    onEmailTap: (link) => print('Clicked: ${link}'),
    onPhoneTap: (link) => print('Clicked: ${link}')
);

Answer 6

此功能可以自动检测文本视图中的超链接。你可以修改 Regx 模式取决于您的要求。

List<TextSpan> extractText(String rawString) {
List<TextSpan> textSpan = [];

final urlRegExp = new RegExp(
    r"((https?:www\.)|(https?:\/\/)|(www\.))[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9]{1,6}(\/[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)?");

getLink(String linkString) {
  textSpan.add(
    TextSpan(
      text: linkString,
      style: new TextStyle(color: Colors.blue),
      recognizer: new TapGestureRecognizer()
        ..onTap = () {
          Fluttertoast.showToast(msg: linkString);
        },
    ),
  );
  return linkString;
}

getNormalText(String normalText) {
  textSpan.add(
    TextSpan(
      text: normalText,
      style: new TextStyle(color: Colors.black),
    ),
  );
  return normalText;
}

rawString.splitMapJoin(
  urlRegExp,
  onMatch: (m) => getLink("${m.group(0)}"),
  onNonMatch: (n) => getNormalText("${n.substring(0)}"),
);

return textSpan;}

用法

child: SelectableText.rich(
                TextSpan(
                    children: extractText(dummyText),
                    style: TextStyle(fontSize: _fontSize)),
              )