Flutter Bloc与SearchDelegate联动问题求助

核心思路 #

要实现搜索页删除聊天后返回主页，SnackBar操作仍能生效，关键要解决两个问题：

1. Bloc实例全局共享：确保主页和搜索页使用同一个Bloc，状态同步
2. SnackBar绑定主页上下文：避免搜索页销毁后上下文失效

步骤1：全局初始化BlocProvider #

将BlocProvider提升到MaterialApp外层，保证整个应用能访问同一Bloc实例：

void main() {
  runApp(
    BlocProvider<ChatBloc>(
      create: (context) => ChatBloc(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatHomePage(),
    );
  }
}

步骤2：主页传递上下文到SearchDelegate #

用GlobalKey<ScaffoldState>保存主页的Scaffold上下文，传递给搜索页，确保SnackBar依附在主页上下文上：

class ChatHomePage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  ChatHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('聊天列表'),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              showSearch(
                context: context,
                delegate: ChatSearchDelegate(scaffoldKey: _scaffoldKey),
              );
            },
          ),
        ],
      ),
      body: BlocBuilder<ChatBloc, ChatState>(
        builder: (context, state) {
          if (state is ChatLoaded) {
            return ListView.builder(
              itemCount: state.chats.length,
              itemBuilder: (context, index) => ListTile(
                title: Text(state.chats[index].title),
              ),
            );
          }
          return const SizedBox();
        },
      ),
    );
  }
}

步骤3：SearchDelegate中处理删除与SnackBar显示 #

在搜索页中获取全局Bloc，执行删除操作后，用主页上下文显示SnackBar，确保返回主页后操作按钮仍能触发Bloc事件：

class ChatSearchDelegate extends SearchDelegate {
  final GlobalKey<ScaffoldState> scaffoldKey;
  Chat? selectedChat;

  ChatSearchDelegate({required this.scaffoldKey});

  @override
  List<Widget>? buildActions(BuildContext context) {
    return [
      if (selectedChat != null)
        IconButton(
          icon: const Icon(Icons.delete),
          onPressed: () {
            // 获取全局Bloc实例
            final chatBloc = BlocProvider.of<ChatBloc>(context, listen: false);
            // 触发删除事件
            chatBloc.add(ChatDeleted(selectedChat!));
            // 关闭搜索页
            close(context, null);
            // 在主页显示SnackBar
            ScaffoldMessenger.of(scaffoldKey.currentContext!).showSnackBar(
              SnackBar(
                content: const Text('聊天已删除'),
                action: SnackBarAction(
                  label: '撤销',
                  onPressed: () {
                    // 用主页上下文触发恢复事件
                    BlocProvider.of<ChatBloc>(scaffoldKey.currentContext!, listen: false)
                        .add(ChatRestored(selectedChat!));
                  },
                ),
                duration: const Duration(seconds: 5),
              ),
            );
          },
        ),
    ];
  }

  @override
  Widget? buildLeading(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => close(context, null),
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    // 搜索结果列表，选中时赋值selectedChat
    return BlocBuilder<ChatBloc, ChatState>(
      builder: (context, state) {
        if (state is ChatLoaded) {
          final filteredChats = state.chats.where((chat) =>
              chat.title.toLowerCase().contains(query.toLowerCase())).toList();
          return ListView.builder(
            itemCount: filteredChats.length,
            itemBuilder: (context, index) {
              final chat = filteredChats[index];
              return ListTile(
                title: Text(chat.title),
                onTap: () {
                  selectedChat = chat;
                  showResults(context);
                },
              );
            },
          );
        }
        return const SizedBox();
      },
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return buildResults(context);
  }
}

步骤4：Bloc实现删除与恢复逻辑 #

在Bloc中维护聊天列表和最近删除的聊天，处理删除、恢复事件：

// 聊天模型
class Chat {
  final String title;
  Chat(this.title);
}

// Bloc事件
abstract class ChatEvent {}
class ChatDeleted extends ChatEvent {
  final Chat chat;
  ChatDeleted(this.chat);
}
class ChatRestored extends ChatEvent {
  final Chat chat;
  ChatRestored(this.chat);
}

// Bloc状态
abstract class ChatState {}
class ChatLoaded extends ChatState {
  final List<Chat> chats;
  ChatLoaded(this.chats);
}

// Bloc核心逻辑
class ChatBloc extends Bloc<ChatEvent, ChatState> {
  List<Chat> _chats = [Chat('好友A'), Chat('好友B'), Chat('好友C')];
  Chat? _lastDeleted;

  ChatBloc() : super(ChatLoaded(List.from(_chats))) {
    on<ChatDeleted>(_onChatDeleted);
    on<ChatRestored>(_onChatRestored);
  }

  void _onChatDeleted(ChatDeleted event, Emitter<ChatState> emit) {
    _lastDeleted = event.chat;
    _chats.remove(event.chat);
    emit(ChatLoaded(List.from(_chats)));
  }

  void _onChatRestored(ChatRestored event, Emitter<ChatState> emit) {
    if (_lastDeleted != null && _lastDeleted == event.chat) {
      _chats.add(_lastDeleted!);
      _lastDeleted = null;
      emit(ChatLoaded(List.from(_chats)));
    }
  }
}

你之前方案的问题分析 #

1. 方案1（新data view初始化Bloc）：每个视图创建独立Bloc实例，主页和搜索页状态不共享，点击SnackBar时用主页上下文找不到搜索页的Bloc，导致操作失效。
2. 方案2（Provider提升至主页前）：若仅提升到主页父级，SearchDelegate作为Navigator弹窗，其上下文可能不在Provider作用域内。需将Provider提升到MaterialApp外层，确保整个路由栈都能访问到Bloc。

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