Flutter setState与Bloc：新手开发者的技术疑问及场景咨询

作为Flutter新手，用setState完全能搞定不少场景，没必要一开始就强行上复杂状态管理：

• 小型工具类应用：比如简易计算器、本地Todo清单（条目不多）、单页面备忘录这类逻辑简单的应用，状态只在当前页面内变化，用setState直接更新视图，开发快且维护成本低。
• 快速原型/演示Demo：用来验证UI交互、给产品做演示的原型，不需要考虑长期维护，setState能快速实现状态变化，节省时间。
• 局部状态主导的页面：比如页面内的表单输入状态、弹窗显示隐藏、Tab切换、下拉刷新这类仅在当前页面生效的状态，用setState管理更直观，不需要引入额外依赖。

Bloc的核心本质是把UI和业务逻辑彻底分离，通过「事件(Event) → 状态(State)」的单向数据流来管理状态，让每一次状态变化都可追踪、可测试，避免状态混乱。

核心逻辑拆解 #

UI层只负责触发事件（比如用户点击按钮、输入文本），Bloc层接收事件后处理业务逻辑（比如计算、网络请求），然后输出新的状态，UI层监听状态变化并更新视图——全程单向流动，没有反向依赖。

实现步骤（以计数器为例） #

1. 定义Event：封装所有用户操作或业务动作，每个事件对应一个触发点

   abstract class CounterEvent {}
   // 点击加号的事件
   class IncrementEvent extends CounterEvent {}
   // 点击减号的事件
   class DecrementEvent extends CounterEvent {}
   

2. 定义State：描述UI的所有可能状态，每个状态对应一种UI展示

   abstract class CounterState {}
   // 初始状态，包含当前计数
   class CounterInitial extends CounterState {
     final int count;
     CounterInitial(this.count);
   }
   

3. 实现Bloc类：处理事件并输出新状态，继承Bloc<Event, State>

   class CounterBloc extends Bloc<CounterEvent, CounterState> {
     CounterBloc() : super(CounterInitial(0)) {
       // 处理IncrementEvent
       on<IncrementEvent>((event, emit) {
         emit(CounterInitial(state.count + 1));
       });
       // 处理DecrementEvent
       on<DecrementEvent>((event, emit) {
         emit(CounterInitial(state.count - 1));
       });
     }
   }
   

4. UI层集成Bloc：用BlocProvider提供Bloc实例，BlocBuilder监听状态更新

   BlocProvider(
     create: (context) => CounterBloc(),
     child: Scaffold(
       appBar: AppBar(title: const Text('Counter')),
       body: Center(
         child: BlocBuilder<CounterBloc, CounterState>(
           builder: (context, state) {
             return Text(
               '当前计数: ${(state as CounterInitial).count}',
               style: const TextStyle(fontSize: 24),
             );
           },
         ),
       ),
       floatingActionButton: Column(
         mainAxisAlignment: MainAxisAlignment.end,
         children: [
           FloatingActionButton(
             onPressed: () => context.read<CounterBloc>().add(IncrementEvent()),
             child: const Icon(Icons.add),
           ),
           const SizedBox(height: 10),
           FloatingActionButton(
             onPressed: () => context.read<CounterBloc>().add(DecrementEvent()),
             child: const Icon(Icons.remove),
           ),
         ],
       ),
     ),
   )
   

Bloc更适合中大型应用，比如需要跨页面共享用户登录状态、处理复杂网络请求逻辑、需要对状态变化做单元测试的场景，能有效降低代码耦合度。

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