Flutter Bloc底部导航栏：切换页面不重置定时器的最优方案

问题根源 #

默认情况下，BottomNavigationBar切换页面时，未选中的页面会被销毁（dispose），如果定时器对应的Bloc是在页面内部创建的，Bloc会跟着页面一起销毁，定时器自然就重置了。要解决这个问题，核心是让Bloc的生命周期独立于页面，同时保证页面状态不被销毁。

最优实现方案 #

1. 将Bloc提升到父组件层级

把管理定时器的Bloc放在BottomNavigationBar所在的父组件中初始化，让Bloc的生命周期和父组件绑定，不随子页面销毁而消失。

2. 使用IndexedStack保留页面状态

IndexedStack会将所有子页面保存在内存中，切换时不会销毁页面，避免页面重建导致的状态丢失（如果页面数量不多，这是最直接的方案；页面多的话可以用AutomaticKeepAliveClientMixin替代）。

3. 子页面通过父级获取Bloc

子页面不再自行创建Bloc，而是通过BlocProvider.of<T>(context)获取父组件提供的Bloc实例。

代码示例 #

父组件（BottomNavigationBar所在页面）

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class MainBottomNavPage extends StatefulWidget {
  const MainBottomNavPage({super.key});

  @override
  State<MainBottomNavPage> createState() => _MainBottomNavPageState();
}

class _MainBottomNavPageState extends State<MainBottomNavPage> {
  int _currentIndex = 0;
  // 在父组件初始化定时器Bloc，生命周期和父组件一致
  final TimerBloc _timerBloc = TimerBloc();

  final List<Widget> _pages = const [
    TimerPage(),
    HomePage(),
    SettingsPage(),
  ];

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  void dispose() {
    // 父组件销毁时关闭Bloc，释放资源
    _timerBloc.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: _timerBloc,
      child: Scaffold(
        body: IndexedStack(
          index: _currentIndex,
          children: _pages,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: _onTabTapped,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.timer), label: '定时器'),
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          ],
        ),
      ),
    );
  }
}

定时器页面（TimerPage）

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class TimerPage extends StatefulWidget {
  const TimerPage({super.key});

  @override
  State<TimerPage> createState() => _TimerPageState();
}

// 可选：如果不用IndexedStack，用AutomaticKeepAliveClientMixin保持页面状态
class _TimerPageState extends State<TimerPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    // 页面初始化时启动定时器（如果需要自动启动）
    context.read<TimerBloc>().add(StartTimer());
  }

  @override
  Widget build(BuildContext context) {
    // 使用AutomaticKeepAlive时必须调用super.build
    super.build(context);
    return Scaffold(
      appBar: AppBar(title: const Text('定时器页面')),
      body: BlocBuilder<TimerBloc, TimerState>(
        builder: (context, state) {
          return Center(
            child: Text(
              '剩余时间: ${state.remainingSeconds}s',
              style: const TextStyle(fontSize: 24),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<TimerBloc>().add(StopTimer()),
        child: const Icon(Icons.stop),
      ),
    );
  }
}

定时器Bloc实现

import 'dart:async';
import 'package:bloc/bloc.dart';

// 事件
abstract class TimerEvent {}
class StartTimer extends TimerEvent {}
class StopTimer extends TimerEvent {}

// 状态
class TimerState {
  final int remainingSeconds;
  TimerState({required this.remainingSeconds});
}

class TimerBloc extends Bloc<TimerEvent, TimerState> {
  TimerBloc() : super(TimerState(remainingSeconds: 60)) {
    on<StartTimer>(_handleStartTimer);
    on<StopTimer>(_handleStopTimer);
  }

  StreamSubscription<int>? _timerSubscription;

  void _handleStartTimer(StartTimer event, Emitter<TimerState> emit) {
    // 先取消之前的定时器，避免重复启动
    _timerSubscription?.cancel();
    // 每秒发送一次剩余时间
    _timerSubscription = Stream.periodic(
      const Duration(seconds: 1),
      (count) => 60 - count,
    ).take(60).listen((seconds) {
      emit(TimerState(remainingSeconds: seconds));
    });
  }

  void _handleStopTimer(StopTimer event, Emitter<TimerState> emit) {
    _timerSubscription?.cancel();
  }

  @override
  Future<void> close() {
    // 关闭Bloc时取消定时器，防止内存泄漏
    _timerSubscription?.cancel();
    return super.close();
  }
}

关键注意事项 #

• Bloc生命周期管理：必须在父组件的dispose方法中关闭Bloc，释放定时器资源，避免内存泄漏。
• 状态保留方式选择：页面数量少用IndexedStack最省心；页面多的话用AutomaticKeepAliveClientMixin，只保留当前页面状态，节省内存。
• 避免页面内创建Bloc：如果在子页面的initState中创建Bloc，页面销毁时Bloc会被销毁，定时器必然重置。

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