Flutter切换HUD可见性时计数器重复请求数据库问题排查

切换HUD可见性时重复请求数据库，核心原因有两个：

1. Visibility组件默认在visible为false时，会把子组件从Widget树中完全卸载。当你再次将visible设为true，_CounterWidget会被重新创建，其initState方法再次执行，触发widget.getCount发起新的数据库请求。
2. 如果_buildForegroundUi每次调用时，给_CounterWidget传入的getCount都是新生成的Future实例（比如直接调用database.fetchCount()这种会触发新请求的方法），也会导致部件重建时重复发起请求。

以下是几种可行的解决方案，可根据场景选择：

方案1：父组件缓存计数器结果（推荐） #

将数据库请求逻辑移到父StatefulWidget的状态中，仅在初始化时请求一次，之后把缓存的结果传给_CounterWidget，彻底避免重复请求。

修改父组件代码： #

class YourParentWidgetState extends State<YourParentWidget> {
  final _displayHud = ValueNotifier<bool>(true);
  int? _viewCount; // 缓存浏览量结果
  Exception? _countError;

  @override
  void initState() {
    super.initState();
    _fetchViewCount(); // 初始化时仅请求一次
  }

  void _fetchViewCount() async {
    try {
      final count = await widget.ad.getViewCount(); // 替换为你实际的获取方法
      if (!mounted) return;
      setState(() {
        _viewCount = count;
      });
    } catch (e) {
      if (!mounted) return;
      setState(() {
        _countError = e as Exception;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // ... 其余代码保持不变
    // 向_buildForegroundUi传入缓存的结果
    child: _buildForegroundUi(
      context,
      watchingUser: widget.watchingUser,
      owner: owner,
      viewCount: _viewCount,
      countError: _countError,
    ),
    // ...
  }
}

修改_CounterWidget： #

去掉内部的异步请求逻辑，直接接收父组件传入的结果：

class _CounterWidget extends StatelessWidget {
  final IconData iconData;
  final int? count;
  final Exception? error;
  final void Function()? onPressed;

  const _CounterWidget({
    required this.iconData,
    required this.count,
    required this.error,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    const viewerIconColor = Colors.white;
    final viewerTextStyle = Theme.of(context).textTheme.caption?.copyWith(color: Colors.white);

    final countWidget = error != null
        ? const Icon(Icons.error)
        : count == null
            ? const Center(child: CircularProgressIndicator())
            : Text("$count", style: viewerTextStyle);

    if (onPressed == null) {
      return Column(children: [
        Icon(iconData, color: viewerIconColor),
        countWidget
      ]);
    }

    return ElevatedButton(
        style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
        ))),
        onPressed: onPressed,
        child: Column(children: [Icon(iconData), countWidget]));
  }
}

方案2：让Visibility保留子组件状态 #

给Visibility添加maintainState: true参数，这样即使visible为false，子组件的状态也会被保留，不会被卸载，_CounterWidget的_value会一直存在，不会重新发起请求。

Visibility(
  visible: _displayHud.value,
  maintainState: true, // 新增该行，保留子组件状态
  replacement: Align(
      alignment: Alignment.topRight,
      child: ElevatedButton(
          onPressed: () {
            _displayHud.value = true;
          },
          child: const Icon(Icons.fullscreen_exit))),
  child: Padding(
      padding: const EdgeInsets.all(20),
      child: _buildForegroundUi(context,
          watchingUser: widget.watchingUser,
          owner: owner)),
)

注意：如果HUD包含大量复杂组件，开启maintainState会占用更多内存，适合简单场景使用。

方案3：缓存Future实例 #

如果要保留_CounterWidget的异步逻辑，确保每次传入的getCount是同一个Future实例，避免重复创建。在父组件中缓存这个Future：

class YourParentWidgetState extends State<YourParentWidget> {
  Future<int>? _viewCountFuture; // 缓存Future实例

  @override
  void initState() {
    super.initState();
    _viewCountFuture = widget.ad.getViewCount(); // 仅初始化一次Future
  }

  // 向_buildForegroundUi传入缓存的Future
  child: _buildForegroundUi(
    context,
    watchingUser: widget.watchingUser,
    owner: owner,
    viewCountFuture: _viewCountFuture,
  ),
}

这样即使_CounterWidget被重建，传入的是同一个已完成的Future，不会重新发起数据库请求。

内容的提问来源于stack exchange，提问作者Stéphane de Luca