Flutter网页开发：TextButton与InkWell的onHover效果失效问题

你当前代码的问题在于**bodyTextStyle是在build方法内部初始化的**——每次调用setState触发组件重构建时，这个变量都会被重新赋值为Theme.of(context).textTheme.bodySmall，直接覆盖了你在onHover里修改的样式，所以hover时颜色根本不会变化。

修正方案 #

把bodyTextStyle提升为State类的成员变量，在initState中完成初始化，这样重构建时不会被重置：

class _YourWidgetState extends State<YourWidget> {
  TextStyle? bodyTextStyle;

  @override
  void initState() {
    super.initState();
    // 延迟初始化，确保context可用
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        bodyTextStyle = Theme.of(context).textTheme.bodySmall;
      });
    });
  }

  // 可选：响应系统主题变化
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    setState(() {
      bodyTextStyle = Theme.of(context).textTheme.bodySmall;
    });
  }

  @override
  Widget build(BuildContext context) {
    return 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
              ? Theme.of(context).textTheme.bodySmall?.copyWith(
                  color: Theme.of(context).colorScheme.outline)
              : Theme.of(context).textTheme.bodySmall;
        });
      },
    );
  }
}

额外说明 #

• 使用addPostFrameCallback是为了避开组件初始化时context未就绪的问题
• 重写didChangeDependencies可以让样式在系统主题切换时自动同步更新
• 如果不需要响应主题变化，也可以直接在initState中通过WidgetsBinding获取context后初始化样式

内容的提问来源于stack exchange，提问作者JAgüero