我想要一个可点击的可选文本,在这种情况下,我使用的是 Flutter Web 和 html 库,我有一个可点击的电话号码,它允许用户从浏览器中选择一个应用程序来打电话。
我的问题是,当鼠标悬停在该文本上时,光标是可选文本中的“文本”,但我希望光标变为“指针”/“链接选择”。换句话说,我希望它按照默认情况下“真正的”HTML 的方式工作。
class Example extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Column(
children: [
SelectableText(
'Phone us:',
style: TextStyle(fontSize: 24),
),
SelectableText(
'Tel: +123 1231 231',
style: TextStyle(fontSize: 20),
onTap: ()=>{html.window.location.href = "tel:+1231231231"},
),
],
);
}
}
我尝试将可选择的文本包装在 MouseRegion() 中,但这也不起作用。
class Example extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Column(
children: [
SelectableText(
'Phone us:',
style: TextStyle(fontSize: 24),
),
MouseRegion(
cursor: SystemMouseCursors.click,
child: SelectableText(
'Tel: +123 1231 231',
style: TextStyle(fontSize: 20),
onTap: ()=>{html.window.location.href = "tel:+1231231231"},
),
),
],
);
}
}
最佳答案
用 url_launcher 尝试 SelectableText.rich
.
示例代码
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class ClickAbleText extends StatelessWidget {
const ClickAbleText({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SelectableText.rich(
TextSpan(
text: 'Phone us:',
style: TextStyle(
fontSize: 24,
),
children: [
TextSpan(
text: '+123 1231 231',
style: TextStyle(fontSize: 20),
mouseCursor: SystemMouseCursors.click,
recognizer: TapGestureRecognizer()
..onTap = () async {
final _url = "tel:+1 555 010 999";
await canLaunch(_url)
? await launch(_url)
: throw 'Could not launch $_url';
},
),
],
),
),
),
);
}
}
关于html - Flutter:可点击的可选文本,控制光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68533859/