我想创建一个超链接显示在我的扑动应用程序。
超链接应该嵌入到文本或类似的文本视图中,如:
最近买的一本书是<a href='#'>this</a>
有什么提示吗?
我想创建一个超链接显示在我的扑动应用程序。
超链接应该嵌入到文本或类似的文本视图中,如:
最近买的一本书是<a href='#'>this</a>
有什么提示吗?
当前回答
你可以使用链接文本https://pub.dev/packages/link_text 然后像这样使用它
final String _text = 'Lorem ipsum https://flutter.dev\nhttps://pub.dev';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: LinkText(
text: _text,
textAlign: TextAlign.center,
),
),
);
}
其他回答
在你的应用中添加可点击链接的另一种(或不是)方式(对我来说就是这样):
1 -在你的pubspec中添加url_launcher包。yaml文件
(包版本5.0对我来说不太好,所以我使用4.2.0+3)。
dependencies:
flutter:
sdk: flutter
url_launcher: ^4.2.0+3
2 -导入并使用如下。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: MyUrl(),
));
}
class MyUrl extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Url Launcher'),
),
body: Center(
child: FlatButton(
onPressed: _launchURL,
child: Text('Launch Google!',
style: TextStyle(fontSize: 17.0)),
),
),
);
}
_launchURL() async {
const url = 'https://google.com.br';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}
你可以使用链接文本https://pub.dev/packages/link_text 然后像这样使用它
final String _text = 'Lorem ipsum https://flutter.dev\nhttps://pub.dev';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: LinkText(
text: _text,
textAlign: TextAlign.center,
),
),
);
}
再添加一个简单而整洁的技巧,因为上面的技巧对于某些用例来说过于复杂。我用RichText - WidgetSpan, TextButton和URL启动包。只需根据您的需要修改下面的示例块。
结果:
代码:
class UserAgreementText extends StatelessWidget {
const UserAgreementText({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'By logging in, you accept our ',
style: Theme.of(context).textTheme.bodySmall,
children: const <InlineSpan>[
WidgetSpan(
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: LinkButton(
urlLabel: "Terms and Conditions",
url: "https://example.com/terms-and-conditions"),
),
TextSpan(
text: ' and ',
),
WidgetSpan(
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: LinkButton(
urlLabel: "Privacy Policy",
url: "https://example.com/privacy-policy"),
),
],
),
),
),
],
);
}
}
link_button.dart
class LinkButton extends StatelessWidget {
const LinkButton({Key? key, required this.urlLabel, required this.url})
: super(key: key);
final String urlLabel;
final String url;
Future<void> _launchUrl(String url) async {
final Uri uri = Uri.parse(url);
if (!await launchUrl(uri)) {
throw 'Could not launch $uri';
}
}
@override
Widget build(BuildContext context) {
return TextButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity.compact,
minimumSize: const Size(0, 0),
textStyle: Theme.of(context).textTheme.bodySmall,
),
onPressed: () {
_launchUrl(url);
},
child: Text(urlLabel),
);
}
}
注意:如果遇到与调用launchUrl相关的错误,请确保安装了URL启动器包,然后重新构建应用程序。
这是一整套的钥匙 https://pub.dev/packages/link_text
child: LinkText(
'Hello check http://google.com',
textStyle: ...,
),
对于这种复杂性,使用库更安全
优点:
作为单个参数接受整个字符串 解析链接并将其呈现为可点击的UI,与不可点击的文本内联 不需要复杂的RichText结构
可以使用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';
}
}
}