如何在不重建Widget的前提下实现Container hover时背景色变化

核心问题拆解 #

1. hover状态变化触发整个LineBox及子树重建：用setState更新hover状态时，会重建整个组件树，导致有状态子组件的状态被重置。
2. Stack方案失效：之前将LineBox放在子组件下方，鼠标进入子组件时，MouseRegion因被上层组件遮挡触发onExit——这是因为指针事件被子组件拦截，MouseRegion无法感知鼠标仍在自身范围内。

可行解决方案 #

方案1：用ValueNotifier + ListenableBuilder隔离状态更新

只让负责背景色的Container响应hover变化，子组件完全不受状态更新影响：

class LineBox extends StatelessWidget {
  final Widget child;
  final Color normalColor;
  final Color hoverColor;

  const LineBox({
    super.key,
    required this.child,
    this.normalColor = Colors.transparent,
    this.hoverColor = Colors.grey.shade100,
  });

  @override
  Widget build(BuildContext context) {
    final hoverNotifier = ValueNotifier<bool>(false);

    return MouseRegion(
      onEnter: (_) => hoverNotifier.value = true,
      onExit: (_) => hoverNotifier.value = false,
      // MouseRegion包裹整个Stack，确保鼠标在子组件上时仍处于监听范围内
      child: Stack(
        children: [
          // 仅背景Container随hover状态更新
          ListenableBuilder(
            listenable: hoverNotifier,
            builder: (context, _) {
              return Container(
                color: hoverNotifier.value ? hoverColor : normalColor,
                width: double.infinity,
                height: double.infinity,
              );
            },
          ),
          // 子组件直接叠加在背景上，不会因hover状态重建
          child,
        ],
      ),
    );
  }
}

• 优势：子组件完全不参与hover状态更新的重建流程，原有状态100%保留。
• 原理：ValueNotifier仅管理hover状态，ListenableBuilder只重建内部的背景Container；MouseRegion作为父组件包裹整个区域，鼠标在子组件上时不会触发onExit。

方案2：StatefulWidget + AutomaticKeepAliveClientMixin（适合需保持子组件状态场景）

如果子组件必须保留状态，可让LineBox继承AutomaticKeepAliveClientMixin，阻止子组件状态被销毁：

class LineBox extends StatefulWidget {
  final Widget child;
  final Color normalColor;
  final Color hoverColor;

  const LineBox({
    super.key,
    required this.child,
    this.normalColor = Colors.transparent,
    this.hoverColor = Colors.grey.shade100,
  });

  @override
  State<LineBox> createState() => _LineBoxState();
}

class _LineBoxState extends State<LineBox> with AutomaticKeepAliveClientMixin {
  bool _isHovered = false;

  @override
  bool get wantKeepAlive => true; // 开启子组件状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则AutomaticKeepAlive不生效
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovered = true),
      onExit: (_) => setState(() => _isHovered = false),
      child: Stack(
        children: [
          Container(
            color: _isHovered ? widget.hoverColor : widget.normalColor,
            width: double.infinity,
            height: double.infinity,
          ),
          widget.child,
        ],
      ),
    );
  }
}

• 注意：如果子组件是动态创建的（每次build都生成新实例），仍会重置状态，此时建议优先用方案1。

为什么之前的方案没用？ #

• Stack方案错误：把LineBox放在子组件下方，导致MouseRegion被上层子组件遮挡，指针事件无法穿透，鼠标进入子组件时被判定为离开MouseRegion。
• UniqueKey+KeyedSubtree：UniqueKey每次build都会生成新值，反而强制子树重建，违背了保持状态的初衷。

内容的提问来源于stack exchange，提问作者Professor Dragon