我想要一个可点击的可选文本,在本例中我使用 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';
},
),
],
),
),
),
);
}
}
使用 DefaultSelectionStyle 定义小部件树中位于其下方的所有小部件的默认选择属性。该小部件允许您自定义各个方面,例如与子小部件交互时的鼠标光标。
DefaultSelectionStyle(
mouseCursor: SystemMouseCursors.click,
child: Text('Text on button'),
);
在此示例中,DefaultSelectionStyle 将鼠标光标设置为文本小部件的单击光标。这意味着当用户将鼠标悬停在文本上时,光标将发生变化以指示文本可单击。