Flutter桌面端：Hover组件导致SelectionArea右键菜单消失的问题求助

我写了一个用来切换背景色的Hover组件，代码如下：

import 'package:flutter/material.dart';

class Hover extends StatefulWidget {
  final Color hoverColor;
  final Widget child;

  const Hover({required widget.child, required this.hoverColor, Key? key})
      : super(key: key);

  @override
  State<Hover> createState() => _HoverState();
}

class _HoverState extends State<Hover> {
  Color? _bgColor;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          _bgColor = widget.hoverColor;
        });
      },
      onExit: (_) {
        setState(() {
          _bgColor = null;
        });
      },
      child: Container(
        color: _bgColor,
        child: widget.child,
      ),
    );
  }
}

把这个组件放到SelectionArea里后，文本能被选中，但右键点击选中文本弹出菜单时，菜单会立刻消失。我推测是Hover组件触发setState后重建了整个组件树，导致菜单被重置。主页面的build代码如下：

return Scaffold(
  body: SelectionArea(
    child: Hover(
      hoverColor: Colors.grey,
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(20),
        child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
      ),
    ),
  )
);

请问怎么解决这个问题？能不能让Hover组件只修改背景色，不重建child组件？

核心思路是避免setState触发整个子组件树的重建，只更新背景色相关的UI部分，以下两种方法都能实现需求：

方法一：使用AnimatedBuilder分离状态更新与子组件 #

AnimatedBuilder只会重建自身的builder逻辑块，传入的child会被缓存，不会随状态变化重建：

class Hover extends StatefulWidget {
  final Color hoverColor;
  final Widget child;

  const Hover({required this.child, required this.hoverColor, Key? key})
      : super(key: key);

  @override
  State<Hover> createState() => _HoverState();
}

class _HoverState extends State<Hover> {
  Color? _bgColor;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _bgColor = widget.hoverColor),
      onExit: (_) => setState(() => _bgColor = null),
      child: AnimatedBuilder(
        animation: AlwaysStoppedAnimation(_bgColor),
        child: widget.child,
        builder: (context, child) {
          return Container(
            color: _bgColor,
            child: child,
          );
        },
      ),
    );
  }
}

这里用AlwaysStoppedAnimation将_bgColor包装为动画对象，让AnimatedBuilder感知状态变化，同时子组件保持稳定，不会被重建。

方法二：使用ValueNotifier和ValueListenableBuilder #

这种方式不依赖setState，直接监听颜色值变化，仅更新Container的颜色，完全不影响子组件：

class Hover extends StatefulWidget {
  final Color hoverColor;
  final Widget child;

  const Hover({required this.child, required this.hoverColor, Key? key})
      : super(key: key);

  @override
  State<Hover> createState() => _HoverState();
}

class _HoverState extends State<Hover> {
  final ValueNotifier<Color?> _bgColorNotifier = ValueNotifier(null);

  @override
  void dispose() {
    _bgColorNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _bgColorNotifier.value = widget.hoverColor,
      onExit: (_) => _bgColorNotifier.value = null,
      child: ValueListenableBuilder(
        valueListenable: _bgColorNotifier,
        child: widget.child,
        builder: (context, color, child) {
          return Container(
            color: color,
            child: child,
          );
        },
      ),
    );
  }
}

这种方式更轻量，没有触发组件的setState流程，仅通过值监听更新局部UI，子组件的状态（包括文本选中菜单）能完全保留。

额外修正 #

原代码构造函数中required widget.child写法错误，已修正为required this.child，避免编译报错。

内容的提问来源于stack exchange，提问作者alex smith