Flutter：带有可点击部分的可选文本？

Question

我想要一个可点击的可选文本，在本例中我使用 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: [phone]',
            style: TextStyle(fontSize: 20),
            onTap: ()=>{html.window.location.href = "tel:[phone]"},
          ),
      ],
    );
  }
}

我尝试将可选文本包装在 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: [phone]',
            style: TextStyle(fontSize: 20),
            onTap: ()=>{html.window.location.href = "tel:[phone]"},
          ),
        ),

      ],
    );
  }
}

Answer 1

尝试使用

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: '[phone]',
                style: TextStyle(fontSize: 20),
                mouseCursor: SystemMouseCursors.click,
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    final _url = "tel:[phone]";
                    await canLaunch(_url)
                        ? await launch(_url)
                        : throw 'Could not launch $_url';
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

使用 DefaultSelectionStyle 定义小部件树中位于其下方的所有小部件的默认选择属性。该小部件允许您自定义各个方面，例如与子小部件交互时的鼠标光标。

DefaultSelectionStyle(
  mouseCursor: SystemMouseCursors.click,
  child: Text('Text on button'),
);

在此示例中，DefaultSelectionStyle 将鼠标光标设置为文本小部件的单击光标。这意味着当用户将鼠标悬停在文本上时，光标将发生变化以指示文本可单击。