blocks|key|4069616|text|我为此创建了一个新的包：flutter_linkify。目前仅支持URLS，但您可以随时在有功能请求的GitHub上提交问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4069617|Baisc用法：|4069618|import+'package:flutter_linkify/flutter_linkify.dart';

Linkify(
++onOpen:+(url)+=>+print("Clicked+$url!"),
++text:+"Made+by+https://cretezy.com",
);|code-block|syntax|javascript|4069619|entityMap|0|LINK|mutability|MUTABLE|url|https://pub.dartlang.org/packages/flutter_linkify|1|https://github.com/Cretezy/flutter_linkify^0|C|F|0|1F|6|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

I created a new package for this: <a href="https://pub.dartlang.org/packages/flutter_linkify" rel="noreferrer">flutter_linkify</a>. It currently only supports URLS, but you can always submit an issue on <a href="https://github.com/Cretezy/flutter_linkify" rel="noreferrer">GitHub</a> with feature requests.

Baisc usage:

<pre><code>import 'package:flutter_linkify/flutter_linkify.dart';

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

blocks|key|4069700|text|感谢@Charles+Crete创建了这个库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4069701|我只想在这里通过组合RichText、TextSpan和TapGestureRecognizer+(都在Flutter框架中)再添加一个解决方案。|4069702|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!');
++++++++++++++++++++})
++++++++++++])),
++++++++++),
++++++++),
++++++),
++++);
++}
}|code-block|syntax|javascript|4069703|结果如下所示|4069704|​|4069705|📷|atomic|offset|length|4069706|4069707|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d9bc1fc7f5bc59bf39183cfc74b1fd75.png|imageAlt^0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|16|8|@]|9|@$P|17|Q|18|1|19]]|A|$]]|$1|R|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

Thank you @Charles Crete for creating that library.

I just want to add one more solution here by combining RichText, TextSpan and TapGestureRecognizer (all are in Flutter framework)

<pre><code>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!');
 })
 ])),
 ),
 ),
 ),
 );
 }
}
</code></pre>

Here is the result

<a href="https://i.stack.imgur.com/2CBTn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2CBTn.png" alt="enter image description here"></a>

blocks|key|4069748|text|下面是我如何实现它的--使用buildTextWithLinks函数来获得一个带有链接的Text组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4069749|它使用url_launcher，目前支持网址，邮件和电话链接，但可以很容易地通过添加更多的RegExp和处理器进行扩展。|4069750|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%2B';
const+String+emailPattern+=+r'\S%2B@\S%2B';
const+String+phonePattern+=+r'[\d-]{9,}';
final+RegExp+linkRegExp+=+RegExp('($urlPattern)%7C($emailPattern)%7C($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+%2B+linkText.length)));

++return+list;
}|code-block|syntax|javascript|4069751|entityMap^0|E|I|18|4|0|19|6|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

Here is how I implemented it - use the <code>buildTextWithLinks</code> function to get a <code>Text</code> component with links.

It uses url_launcher and currnetly supports URL, mail and phone links, but can easily be expanded by adding more <code>RegExp</code>s and handlers.

<pre><code>import 'package:url_launcher/url_launcher.dart';

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

Future&lt;void&gt; 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) =&gt; WidgetSpan(
 child: InkWell(
 child: Text(
 text,
 style: TextStyle(
 color: Colors.blueAccent,
 decoration: TextDecoration.underline,
 ),
 ),
 onTap: () =&gt; openUrl(linkToOpen),
 )
);

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

 if (match.start &gt; 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;
}
</code></pre>

blocks|key|4069781|text|检查这个库flutter_autolink_text。与flutter_linkify非常相似，但它也增加了对电话号码的支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4069782|这就是如何使用它。|4069783|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}')
);|code-block|syntax|javascript|4069784|entityMap|0|LINK|mutability|MUTABLE|url|https://pub.dev/packages/flutter_autolink_text|1|https://pub.dev/packages/flutter_linkify^0|5|L|0|S|F|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Check this library <a href="https://pub.dev/packages/flutter_autolink_text" rel="nofollow noreferrer">flutter_autolink_text</a>. Is very similar to <a href="https://pub.dev/packages/flutter_linkify" rel="nofollow noreferrer">flutter_linkify</a> but it adds support to phone number as well.
This is how to use it.
<pre><code>import 'package:flutter_autolink_text/flutter_autolink_text.dart';

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

Is there an easy way in Flutter to 'linkify' a text that might contain a mix of plain text, emails and web URLs? E.g. if my text is <code>My phone number is 099 123 45 67 and my email is test@test.com</code> the phone number and the email would be rendered as clickable links. 

In Android it would be a one liner:

<pre><code>textView.setAutoLinkMask(Linkify.ALL);
</code></pre>

I've seen that a similar question has been asked <a href="https://stackoverflow.com/questions/43583411/how-to-create-a-hyperlink-in-flutter-widget">here</a>. That solution would work fine for static texts, but for dynamic texts it would be a lot more complicated to parse the text, detect all URLs, phone numbers, emails etc. and use <code>TextSpan</code>s to render them accordingly.

How to linkify text in Flutter

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

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

问如何在Flutter中链接文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Flutter中链接文本EN