Dart 状态管理这件事，在 Deepseek 里写起来其实有不少门道。几种主流方案各有千秋。哪个顺手、哪个更适合你的场景？今天掰开揉碎了聊聊。

使用 StatefulWidget

最基础也最直接的方式，就是继承 StatefulWidget。

比如下面这个例子：

class mywidget extends statefulwidget {
  @override
  _mywidgetstate createstate() => _mywidgetstate();
}

class _mywidgetstate extends state {

  // 定义状态变量
  int counter = 0;
  void incrementcounter() {

    setstate(() {
      counter++;
    });
  }
  @override
  widget build(buildcontext context) {
    return column(
      children: [
        text('count: $counter'),
        elevatedbutton( 
          onpressed: incrementcounter,
          child: text('increment'),
        ),
      ],
    );
  }
}

关键机制其实就一句话：在 build 方法里根据状态变量构建 UI，然后通过 setstate 触发更新。

简单直接，适合那些状态逻辑不复杂的组件。但一旦页面多了、状态共享需求上来，这套方案就有点捉襟见肘了。

使用 Provider 包

状态需要跨组件共享的时候，provider 是官方比较推荐的方式。

第一步，在 pubspec.yaml 里加上依赖：provider: ^latest_version，然后跑一下 flutter pub get。

接着创建一个状态类：

class counter {
  int value = 0;
  void increment() {
    value++;
  }
}

然后用 changenotifierprovider 把它挂到组件树顶层：

void main() {
  runapp(
    changenotifierprovider(
      create: (context) => counter(),
      child: myapp(),
    ),
  );
}

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {

    return materialapp(
      home: myhomepage(),
    );
  }
}

class myhomepage extends statelesswidget {
  @override
  widget build(buildcontext context) {
    final counter = provider.of(context);
    return column(
      children: [
        text('count: ${counter.value}'),
        elevatedbutton(
          onpressed: () => counter.increment(),
          child: text('increment'),
        ),
      ],
    );
  }
}

通过 provider.of 拿到状态实例，直接操作就好。状态一旦变化，所有依赖它的组件会自动重建。

这套方案胜在轻量、学习成本低，中小项目用着很顺手。

使用 Bloc 模式

项目规模再往上走，逻辑和视图的分离就需要更严格的约束了——这时候 Bloc 模式就派上了用场。

先装包：flutter_bloc: ^latest_version。

然后定义事件、状态和 Bloc 本身：

class counterbloc extends bloc {
  counterbloc() : super(counterinitial()) {
    on((event, emit) {
      emit(counterstate(value: state.value + 1));
    });
  }
}

abstract class counterevent {}
class incrementcounter extends counterevent {}

class counterstate {
  final int value;
  counterstate({required this.value});
}

class counterinitial extends counterstate {
  counterinitial() : super(value: 0);
}

接下来通过 blocprovider 把它注入到应用中：

void main() {
  runapp(
    blocprovider(
      create: (context) => counterbloc(),
      child: myapp(),
    ),
  );
}

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp( 
      home: myhomepage(),
    );
  }
}

class myhomepage extends statelesswidget {
  @override
  widget build(buildcontext context) {
    final bloc = blocprovider.of(context);
    return column(
      children: [
        blocbuilder(
          builder: (context, state) {
            return text('count: ${state.value}');
          },
        ),
        elevatedbutton(
          onpressed: () => bloc.add(incrementcounter()),
          child: text('increment'),
        ),
      ],
    );
  }
}

blocprovider 负责提供 Bloc 实例，blocbuilder 监听状态变化并响应式地更新 UI，blocconsumer 则能同时处理状态和事件。

这套机制约束性更强，逻辑与视图的边界清晰，团队协作时优势尤其明显。

三种方案对比总结

• StatefulWidget：适合简单组件，状态不复杂的情况。
• Provider：轻量、学习成本低，中小项目首选。
• Bloc：约束性强，逻辑与视图分离，适合大型团队项目。

实际选型时，考虑项目规模、团队熟悉度和维护成本，选最适合的那个就好。

《夸克》非常好用的免费AI浏览器

下载APP查看