我想创建一个超链接显示在我的扑动应用程序。
超链接应该嵌入到文本或类似的文本视图中,如:
最近买的一本书是<a href='#'>this</a>
有什么提示吗?
我想创建一个超链接显示在我的扑动应用程序。
超链接应该嵌入到文本或类似的文本视图中,如:
最近买的一本书是<a href='#'>this</a>
有什么提示吗?
当前回答
可以使用flutter_linkify包 https://pub.dev/packages/flutter_linkify 只是想提供另一种选择。 包会自动划分文本并突出显示http/https 结合插件url_launcher你可以启动url 你可以查看下面的例子:
完整代码如下
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'dart:async';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(new LinkifyExample());
class LinkifyExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'flutter_linkify example',
home: Scaffold(
appBar: AppBar(
title: Text('flutter_linkify example'),
),
body: Center(
child: Linkify(
onOpen: _onOpen,
text: "Made by https://cretezy.com \n\nMail: example@gmail.com \n\n this is test http://pub.dev/ ",
),
),
),
);
}
Future<void> _onOpen(LinkableElement link) async {
if (await canLaunch(link.url)) {
await launch(link.url);
} else {
throw 'Could not launch $link';
}
}
}
其他回答
如果你想让它看起来更像一个链接,你可以添加下划线:
new Text("Hello Flutter!", style: new TextStyle(color: Colors.blue, decoration: TextDecoration.underline),)
结果是:
这是一整套的钥匙 https://pub.dev/packages/link_text
child: LinkText(
'Hello check http://google.com',
textStyle: ...,
),
对于这种复杂性,使用库更安全
优点:
作为单个参数接受整个字符串 解析链接并将其呈现为可点击的UI,与不可点击的文本内联 不需要复杂的RichText结构
只需将InkWell包装在Text小部件周围,并将UrlLauncher(来自服务库)提供给onTap属性。在下面使用UrlLauncher之前,将其安装为Flutter包。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('UrlLauncher'),
),
body: new Center(
child: new InkWell(
child: new Text('Open Browser'),
onTap: () => launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html')
),
),
),
);
}
}
您可以为Text小部件提供一个样式,使其看起来像一个链接。
更新
在研究了这个问题之后,我发现了一个不同的解决方案来实现你所要求的“在线”超链接。您可以使用RichText小部件与附带的textspan。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('UrlLauchner'),
),
body: new Center(
child: new RichText(
text: new TextSpan(
children: [
new TextSpan(
text: 'This is no Link, ',
style: new TextStyle(color: Colors.black),
),
new TextSpan(
text: 'but this is',
style: new TextStyle(color: Colors.blue),
recognizer: new TapGestureRecognizer()
..onTap = () { launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html');
},
),
],
),
),
),
),
);
}
}
这样你就可以突出显示一个单词,并从中创建一个超链接;)
如果你想拥有更高级的文本功能,你可以使用flutter_html插件:
Html(
data: 'The last <i><u><b>book</b></u></i> bought is <a href="#">this</a>',
onLinkTap: (url, context, attrs, element) {
// Handle link tapped...
},
)
这只是这个插件功能的冰山一角。
只是一个想法:您甚至可以在线托管您的flutter应用程序的部分html,并使用这个插件将它们作为小部件呈现在flutter中。
Flutter没有内置的超链接支持,但您可以自己伪造它。画廊的抽屉里有个例子,飞镖。他们使用一个RichText小部件包含一个彩色的TextSpan,它有一个识别器属性来处理点击:
RichText(
text: TextSpan(
children: [
TextSpan(
style: bodyTextStyle,
text: seeSourceFirst,
),
TextSpan(
style: bodyTextStyle.copyWith(
color: colorScheme.primary,
),
text: repoText,
recognizer: TapGestureRecognizer()
..onTap = () async {
final url = 'https://github.com/flutter/gallery/';
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: false,
);
}
},
),
TextSpan(
style: bodyTextStyle,
text: seeSourceSecond,
),
],
),