如何优化Bloc初始化时的API调用？解决页面切换重复请求问题

问题根源 #

你当前的问题在于Bloc的Provider是嵌套在页面内部的，每次切换页面时，页面组件被销毁，对应的Bloc实例也会被回收；切回页面时重新创建Bloc，构造函数里的API调用就会重复执行。你尝试的锁机制无效，是因为每个新Bloc实例都会重新初始化lock变量，根本起不到限制作用。

解决方案 #

1. 提升Bloc的Provider层级（最推荐）

把Bloc的BlocProvider（或你使用的Provider类）移到导航栏所在的父页面，让Bloc的生命周期和父页面绑定，而非子页面。这样切换子页面时，Bloc不会被销毁，初始化和API调用只会执行一次。

示例代码：

// 导航栏所在的父页面
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => Bloc1(), // 仅初始化一次
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "页面1"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "页面2"),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
        body: IndexedStack(
          index: _selectedIndex,
          children: const [Page1(), Page2()],
        ),
      ),
    );
  }
}

// 子页面1（无需再创建BlocProvider）
class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    // 直接获取父页面已初始化的Bloc
    final bloc1 = context.read<Bloc1>();
    return BlocBuilder<Bloc1, YourState>(
      builder: (context, state) {
        // 渲染UI逻辑
        return Text(state.data.toString());
      },
    );
  }
}

2. 把API调用移到Bloc事件中，通过状态控制重复调用

如果必须在页面层级创建Bloc，可将API调用从构造函数移到Bloc的事件处理逻辑里，通过Bloc的状态判断是否已经加载过数据，避免重复请求。

示例代码：

// Bloc定义
class Bloc1 extends Bloc<Bloc1Event, Bloc1State> {
  Bloc1() : super(Bloc1Initial()) {
    on<LoadDataEvent>(_handleLoadData);
  }

  Future<void> _handleLoadData(LoadDataEvent event, Emitter<Bloc1State> emit) async {
    // 如果已经加载过数据，直接返回
    if (state is Bloc1Loaded) return;
    
    emit(Bloc1Loading());
    final data = await fetchData(); // API调用
    emit(Bloc1Loaded(data: data));
  }

  Future<Data> fetchData() {
    // 实际API请求逻辑
    return Future.value(Data());
  }
}

// 事件和状态定义
abstract class Bloc1Event {}
class LoadDataEvent extends Bloc1Event {}

abstract class Bloc1State {}
class Bloc1Initial extends Bloc1State {}
class Bloc1Loading extends Bloc1State {}
class Bloc1Loaded extends Bloc1State {
  final Data data;
  Bloc1Loaded({required this.data});
}

// 页面中使用
class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    final bloc1 = context.read<Bloc1>();
    
    // 页面渲染完成后发送加载事件
    WidgetsBinding.instance.addPostFrameCallback((_) {
      bloc1.add(LoadDataEvent());
    });

    return BlocBuilder<Bloc1, Bloc1State>(
      builder: (context, state) {
        if (state is Bloc1Loaded) {
          return Text(state.data.toString());
        } else if (state is Bloc1Loading) {
          return const CircularProgressIndicator();
        }
        return const SizedBox();
      },
    );
  }
}

3. 不推荐：单例模式

虽然可以把Bloc做成单例避免重复创建，但单例生命周期和APP绑定，容易导致内存泄漏，且不利于单元测试，仅适合全局共享且不会频繁销毁的数据场景。

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