Question

当我单击某些按钮时，我正在使用Flutter url_launcher EXPLAIN QUERY IMAGE包打开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://pub.dev/packages/url_launcher

Answer 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',
),

Answer 2

昨晚发现了可以解决问题的东西：

我现在不导入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应用程序

Answer 3

我改进了@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,
      ),
    );
  }
}

Answer 4

更改鼠标光标同时保持链接小部件的行为相同的方法是将链接小部件包装在 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 文档：

<块引用>

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

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

4 个答案: