flutter onHover效果在TextButton和InkWell上不起作用

x759pob2  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(259)

我正在开发一个Flutter网站。我有一些链接,我想作为一个正常的链接行为:当用户将鼠标悬停在它们上面时,它们会显示不同的颜色。但是,我无法更改颜色。
我试过使用带有onHover属性的TextButton。我也试过使用Inkwell onHover属性和hoverColor。我用Material Package 了Inkwell,并且定义了onTap函数。我也试过将其 Package 在AnimatedContainer上,但似乎没有任何效果。
这是我的代码。

TextStyle? bodyTextStyle = Theme.of(context).textTheme.bodySmall;

InkWell(
  color: Colors.transparent,
  child: Text(
    "data policy",
    style: bodyTextStyle,
  ),
  onTap: () => Navigator.of(context).pushNamed(
    Navigation(context).routes["data policy"]),
  onHover: (isHovering) {
    setState(() {
      bodyTextStyle = isHovering
          ? bodyTextStyle?.copyWith(
              color: Theme.of(context).colorScheme.outline)
          : bodyTextStyle;
    });
  },
),

我更喜欢使用InkWell而不是TextButton,以便消除TextButton创建的文本周围的阴影。

swvgeqrz

swvgeqrz1#

你可以按照这个片段,hoverColor从InkWell可以重叠。

InkWell(
  child: SizedBox(
      width: 100,
      height: 100,
      child: Text(
        "Text",
        style: linkTextStyle,
      )),
  onTap: () {},
  hoverColor: Colors.transparent, //button splash color
  onHover: (isHovering) {
    linkTextStyle = isHovering
        ? TextStyle(color: Colors.red)
        : TextStyle(color: Colors.cyanAccent);
    setState(() {});
  },
),

您也可以在buttonStyle上选中MouseRegionelevation

相关问题