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: +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"},
          ),
        ),

      ],
    );
  }
}

Answer 1

试试SelectableText.rich 和url_launcher。

示例代码

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';
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}