我想创建一个超链接显示在我的扑动应用程序。
超链接应该嵌入到文本或类似的文本视图中,如:
最近买的一本书是<a href='#'>this</a>
有什么提示吗?
我想创建一个超链接显示在我的扑动应用程序。
超链接应该嵌入到文本或类似的文本视图中,如:
最近买的一本书是<a href='#'>this</a>
有什么提示吗?
当前回答
更新(Android >= 11):
iOS configuration: Open info.plist file and add: <key>LSApplicationQueriesSchemes</key> <array> <string>https</string> </array> Android configuration: Open AndroidManifest.xml file located in app/src/main and add the following at the root: <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Add this query --> <queries> <intent> <action android:name="android.intent.action.VIEW" /> <data android:scheme="https" /> </intent> </queries> <application ... /> </manifest>
颤振代码:
简单地包装你的文本在一个手势探测器或InkWell和处理点击在onTap()使用url_launcher包。
InkWell(
onTap: () => launchUrl(Uri.parse('https://www.google.com')),
child: Text(
'Click here',
style: TextStyle(decoration: TextDecoration.underline, color: Colors.blue),
),
)
截图:
其他回答
在你的应用中添加可点击链接的另一种(或不是)方式(对我来说就是这样):
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';
}
}
}
对于这个问题的答案,建议使用RichText和TextSpan + GestureRecognizer在功能上都是正确的,但从用户体验的角度来看,他们不提供反馈给用户响应触摸。为了保持与其他Material小部件的一致性,您可以使用类似的方法,但是使用WidgetSpan + InkWell代替。
这个例子使用了url_launcher包和一个非样式的InkWell,但是你可以自定义你认为合适的:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class TextWithLink extends StatelessWidget {
const TextWithLink({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const textStyle = TextStyle(color: Colors.black); // default style for all text
return RichText(
text: TextSpan(
style: textStyle,
children: [
const TextSpan(
text: 'The last book bought is ',
),
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: InkWell(
onTap: () => _launchUrl('https://url-to-launch.com'),
child: Text('this',
style: textStyle.merge(const TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold))))), // override default text styles with link-specific styles
],
),
);
}
_launchUrl(String url) async {
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,
),
),
);
}
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,
),
],
),
如果你想拥有更高级的文本功能,你可以使用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中。