Flutter-Web：url_launcher 链接小部件鼠标悬停答案

【问题标题】：Flutter-Web: url_launcher Link widget mouse hoverFlutter-Web：url_launcher 链接小部件鼠标悬停
【发布时间】：2021-02-20 01:32:31
【问题描述】：

当我点击某个按钮时，我正在使用颤振 url_launcher https://pub.dev/packages/url_launcher 包打开 url。

有了新的链接小部件，我现在可以在同一个选项卡上打开网页，但是当用户悬停按钮时我无法添加鼠标指针

import 'package:bianca/UI/botao_azul.dart';
import 'package:url_launcher/link.dart';
import 'package:flutter/material.dart';
String link = "https://www.google.com";
class MesmaAba extends StatelessWidget {
  final double tamanho;
  final String conteudo;
  MesmaAba({this.tamanho, this.conteudo});
  @override
  Widget build(BuildContext context) {
    return Link(
      uri: Uri.parse(link),
      builder: (BuildContext context, FollowLink followLink) => BotaoAzul(
          conteudo: conteudo,
          tamanho: tamanho,
          funcao: followLink 
          ),
    );
  }
}

BotaoAzul 类：

import 'package:flutter/material.dart';

class BotaoAzul extends StatelessWidget {
  final String conteudo;
  final double tamanho;
  final Function funcao;

  BotaoAzul({this.conteudo, this.tamanho,this.funcao});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlatButton(
            onPressed: funcao,
            child: Text(conteudo,
                style: TextStyle(
                    fontSize: tamanho,
                    color: Colors.white,
                    fontWeight: FontWeight.bold))),
      ),
      decoration: BoxDecoration(
          color: Colors.blue[900], borderRadius: BorderRadius.circular(20.0)),
    );
  }
}

我已经可以使用此功能在另一个选项卡上打开带有 botaoAzul 按钮的网址（并且没有链接小部件，鼠标悬停在按钮上时会发生变化）

import 'package:url_launcher/url_launcher.dart';
void launchLink(String link) async {
  await launch(
    link,
  );
}

但我需要在同一个选项卡上打开网址。

我已经尝试了这个其他问题的所有实现，但没有成功： https://stackoverflow.com/questions/56211844/flutter-web-mouse-hover-change-cursor-to-pointer

【问题讨论】：

标签： flutter url flutter-web

【解决方案1】：

据我所知，最新版本的 Flutter Web 自动支持 InkWell 小部件的手形光标。下面的简单类：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

/// Provides an anchor link to web URL.
class HoveredWebAnchor extends StatefulWidget {
  HoveredWebAnchor(
      {Key key,
      @required this.label,
      @required this.url,
      this.underlined = true})
      : assert(label != null),
        assert(url != null),
        assert(underlined != null),
        super(key: key);

  /// The label of anchor
  final String label;

  /// The web URL to open when anchor clicked
  final String url;

  /// Identifies if anchor label will be underlined.
  final bool underlined;

  @override
  _HoveredWebAnchorState createState() => _HoveredWebAnchorState();
}

class _HoveredWebAnchorState extends State<HoveredWebAnchor> {
  /// Current text style
  TextStyle _textStyle;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      hoverColor: Colors.transparent,
      child: Text(
        widget.label,
        style: _textStyle,
      ),
      onHover: (hovered) {
        setState(() {
          if (hovered) {
            _textStyle = TextStyle(color: Theme.of(context).accentColor);
            if (widget.underlined) {
              _textStyle = _textStyle.copyWith(
                decoration: TextDecoration.underline,
              );
            }
          } else {
            _textStyle = null;
          }
        });
      },
      onTap: () {
        launch(widget.url, forceWebView: true);
      },
    );
  }
}

使用：

HoveredWebAnchor(
  label: 'Open Google',
  url: 'http://www.google.com',
),

【讨论】：

您的代码将链接打开到另一个选项卡，我正在同一个选项卡中查找内容。

【解决方案2】：

我已经改进了@BambinoUA 的建议，使其听起来空安全性和一些小的更改，所以我决定与大家分享它

class HoveredWebAnchor extends StatefulWidget {
  const HoveredWebAnchor(
    this.label, {
    Key? key,
    required this.style,
    this.maxLines,
    required this.onTap,
  }) : super(key: key);

  final String label;
  final TextStyle? style;
  final int? maxLines;
  final VoidCallback onTap;

  @override
  _HoveredWebAnchorState createState() => _HoveredWebAnchorState();
}

class _HoveredWebAnchorState extends State<HoveredWebAnchor> {
  TextStyle? _textStyle;

  @override
  void initState() {
    _textStyle = widget.style;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      hoverColor: Colors.transparent,
      onHover: (hovered) {
        setState(() {
          if (hovered) {
            _textStyle = _textStyle?.copyWith(
              decoration: TextDecoration.underline,
            );
          } else {
            _textStyle = _textStyle?.copyWith(
              decoration: widget.style?.decoration,
            );
          }
        });
      },
      onTap: widget.onTap,
      child: Text(
        widget.label,
        style: _textStyle,
        maxLines: widget.maxLines,
      ),
    );
  }
}

【讨论】：

【解决方案3】：

在保持链接小部件行为相同的同时更改鼠标光标的方法是将链接小部件包装在MouseRegion中

MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Link(
    uri: Uri.parse(link),
    builder: (BuildContext context, FollowLink followLink) => 
        BotaoAzul(
          conteudo: conteudo,
          tamanho: tamanho,
          funcao: followLink 
        ),
  ),
)

来自Link widget revision 2 文档：

Link 小部件不提供任何鼠标光标，完全依赖用户自己做鼠标光标。在许多情况下，用户将使用一个按钮，该按钮已经显示了正确的鼠标光标。在其他情况下，用户可以将链接（或链接的子节点）包装在鼠标区域中并为其提供光标。

【讨论】：

【解决方案4】：

昨晚找到了解决问题的方法：

我现在不使用 url_launcher 链接，而是导入 html 包

import 'dart:html' as html;
String link = "https://www.google.com";
.....

void openPage(){
html.window.location.assign(link);
}

...... (widget build method)

BotaoAzul(
  conteudo: "Hey",
  tamanho: 30,
   funcao: openPage
),

现在它会在同一个选项卡上打开链接，我可以从 chrome 后退按钮返回到我的 Flutter 应用程序

【讨论】：