Flutter:可点击的可选文本，控制光标 [英] Flutter: Clickable Selectable Text, control over cursor

问题描述

我想要一个可点击的可选文本，在这种情况下，我使用 Flutter Web 和 html 库，我有一个可点击的电话号码，允许用户从浏览器中选择一个应用程序进行通话.

我的问题是，当鼠标悬停在此文本上时，光标是文本"的光标.来自可选文本，但我希望光标更改为指针"/链接选择".换句话说，我希望它如何真实"地工作.HTML 是默认的.

<预><代码>class 示例扩展 StatelessWidget{@覆盖小部件构建(BuildContext 上下文){返回列(孩子们: [可选文本('给我们打电话:',样式:TextStyle(字体大小:24)，),可选文本('电话:[phone]'，样式:TextStyle(字体大小:20)，onTap: ()=>{html.window.location.href = "tel:[phone]"},),],);}}

我尝试将可选文本包装在 MouseRegion() 中，但这也不起作用.

class Example extends StatelessWidget{@覆盖小部件构建(BuildContext 上下文){返回列(孩子们: [可选文本('给我们打电话:',样式:TextStyle(字体大小:24)，),鼠标区域(光标:SystemMouseCursors.click，孩子:SelectableText('电话:[phone]'，样式:TextStyle(字体大小:20)，onTap: ()=>{html.window.location.href = "tel:[phone]"},),),],);}}

解决方案

try SelectableText.rich with url_launcher .

示例代码

import 'package:flutter/gestures.dart';导入 'package:flutter/material.dart';导入'包:url_launcher/url_launcher.dart';类 ClickAbleText 扩展 StatelessWidget {const ClickAbleText({Key? key}) : super(key: key);@覆盖小部件构建(BuildContext 上下文){返回脚手架(身体:中心(孩子:SelectableText.rich(文本跨度(text: '给我们打电话:',样式:文本样式(字体大小:24，),孩子们: [文本跨度(文本:'[phone]'，样式:TextStyle(字体大小:20)，mouseCursor: SystemMouseCursors.click,识别器:TapGestureRecognizer()..onTap = () 异步 {final _url =电话:[phone]"；等待 canLaunch(_url)?等待启动(_url): throw '无法启动 $_url';},),],),),),);}}

I want a selectable text that is clickable, in this case I'm using Flutter Web and the html library, I have a clickable phone number which allows the user to select an app from the browser to phone with.

My issue is that when hovering over this text, the cursor is that of "text" from the selectable text, but I want the cursor to change to a "pointer"/"link select". In other words, I want it to work how "real" HTML does by default.

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

I tried wrapping the selectable text in a MouseRegion(), but this didn't work either.

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

      ],
    );
  }
}

解决方案

try SelectableText.rich with url_launcher .

Example Code

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

这篇关于Flutter:可点击的可选文本，控制光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！