使用Riverpod Provider.family和HookConsumerWidget时UI不刷新问题

核心问题 #

1. Provider类型不匹配：用Provider.family承载StateNotifier是错误的，StateNotifier必须搭配StateNotifierProvider.family使用，否则Riverpod无法监听其状态变化。
2. StateNotifier未维护状态：FavoriteFamilyNotifier的state字段完全未被利用，isMediaFavorite只是直接查询数据库，没有将结果同步到state，导致ref.watch无法感知数据变化。
3. 局部变量赋值无效：长按后给isFavorite局部变量赋值，不会触发Flutter的build方法重新执行，UI自然不会更新。

修正步骤 #

1. 重构favorite_provider.dart

替换Provider类型，让Notifier主动维护状态，支持数据库变化监听：

import 'package:riverpod/riverpod.dart';
// 导入你的ObjectBox相关类

final favoriteFamilyProvider = StateNotifierProvider.family<FavoriteFamilyNotifier, bool, String>(
  (ref, myId) => FavoriteFamilyNotifier(myId),
);

class FavoriteFamilyNotifier extends StateNotifier<bool> {
  final String myId;
  late final Box<MediaMetadata> _imageMetadataBox;

  FavoriteFamilyNotifier(this.myId) : super(false) {
    _imageMetadataBox = objectbox.store.box<MediaMetadata>();
    // 初始化时同步状态
    _updateFavoriteState();
    // 可选：监听ObjectBox数据变化，自动更新状态
    _imageMetadataBox.query(MediaMetadata_.myId.equals(myId))
      .subscribe((_) => _updateFavoriteState());
  }

  void _updateFavoriteState() {
    final results = _imageMetadataBox.query(MediaMetadata_.myId.equals(myId)).build().find();
    state = results.isNotEmpty;
    print("$myId is favorite? $state");
  }

  // 手动触发状态刷新的方法
  void refreshFavoriteState() {
    _updateFavoriteState();
  }
}

2. 修正MediaThumbnail组件

直接watch状态值，长按后触发状态更新：

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../../../../favorite_provider.dart';
import 'package:universal_io/io.dart' as universal_io;

class MediaThumbnail extends HookConsumerWidget {
  final String id;
  final String fileExtension;
  final universal_io.File imageFile;
  final String urlEndpoint;
  final String description;
  final double thumbnailRadius;
  final String mimeType;

  const MediaThumbnail(this.imageFile, this.urlEndpoint, this.id,
      this.fileExtension, this.description, this.thumbnailRadius, this.mimeType,
      {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 直接watch状态值，状态变化自动触发build
    final isFavorite = ref.watch(favoriteFamilyProvider(id));
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onLongPress: () {
        ref.read(favoriteProvider.notifier).toggleFav(id, fileExtension, description);
        // 无ObjectBox订阅时，手动触发状态刷新
        ref.read(favoriteFamilyProvider(id).notifier).refreshFavoriteState();
      },
      child: Stack(children: [
        Container(
          constraints: const BoxConstraints.expand(),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: FileImage(imageFile), 
              fit: BoxFit.cover
            ),
          ),
        ),
        if (isFavorite)
          Positioned(
            top: 5,
            left: 60,
            right: .0,
            child: Center(
              child: Stack(
                children: [
                  _buildIcon(16, Colors.white),
                  _buildIcon(13, Colors.pinkAccent),
                ],
              ),
            ),
          )
      ]),
    );
  }

  // 补充原代码缺失的_buildIcon方法
  Icon _buildIcon(double size, Color color) {
    return Icon(Icons.favorite, size: size, color: color);
  }
}

额外说明 #

• GridView的item确实可以独立重建，只要对应provider的状态变化，只会触发单个item的build，不会刷新整个GridView。
• 如果favoriteProvider的toggleFav已完成数据库操作，通过refreshFavoriteState或ObjectBox的订阅，就能让favoriteFamilyProvider的state更新，进而触发UI刷新。

内容的提问来源于stack exchange，提问作者Antonin GAVREL