不到40行代码手撸一个BlocProvider

本文介绍了如何利用BLoC构建一个简单的Flutter状态管理组件SimpleBlocProvider。通过定义一个Widget,结合Bloc逻辑组件,监听BLoC状态变化,实现组件的响应式更新。示例代码展示了一个计数器应用,帮助理解BLoCProvider的实现机制。
摘要由CSDN通过智能技术生成

前言

上一篇我们对 BLoC做了整体的介绍,了解了 BLoC 的使用后,心里不禁有点痒痒,写了好几个状态管理插件了,能不能利用 BLoC自己也撸一个 Flutter 状态管理组件,用来构建基于 BLoC 的响应式Flutter页面。说干就干,我们给这个状态管理组件命名为 SimpleBlocProvider

SimpleBlocProvider定义

对于这个简单的状态管理组件 SimpleBlocProvider,因为需要放置到组件树中,因此肯定是一个 Widget,由于内部还需要维护数据,因此我们使用 StatefulWidget。等等!不是不推荐使用 StatefulWidget 吗?需要注意,如果这个组件自己维护自身状态,不影响外部组件那是没问题的。比如说,一个按钮点击后会有点击效果,这个其实也需要使用 StatefulWidget 实现,但是这个行为只会引起自身刷新,那是没问题的。
image.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Flutter BLoC(Business Logic Component)是一种使用单向数据流来管理状态的设计模式。下面是使用Flutter BLoC展示列表的基本步骤: 1.定义Bloc类:定义一个Bloc类来管理应用程序的状态,并处理业务逻辑。该类应该包含一个StreamController来发布状态更改和一个Stream来监听状态变化。 ```dart class ListBloc { final _listController = StreamController<List<String>>.broadcast(); Stream<List<String>> get listStream => _listController.stream; List<String> _list = []; void addToList(String item) { _list.add(item); _listController.sink.add(_list); } void removeFromList(String item) { _list.remove(item); _listController.sink.add(_list); } void dispose() { _listController.close(); } } ``` 2.创建BlocProvider:使用BlocProvider来将Bloc注入到Widget树中,以便在任何地方都可以访问它。 ```dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter BLoC Demo', home: BlocProvider<ListBloc>( create: (context) => ListBloc(), child: MyHomePage(), ), ); } } ``` 3.使用BlocBuilder来展示列表:BlocBuilder是Flutter BLoC提供的一个Widget,它会监听Bloc的状态变化,并在状态发生变化时自动重构应用程序UI。 ```dart class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { final listBloc = BlocProvider.of<ListBloc>(context); return Scaffold( appBar: AppBar( title: Text('Flutter BLoC Demo'), ), body: BlocBuilder<ListBloc, List<String>>( builder: (context, list) { return ListView.builder( itemCount: list.length, itemBuilder: (context, index) { return ListTile( title: Text(list[index]), trailing: IconButton( icon: Icon(Icons.delete), onPressed: () { listBloc.removeFromList(list[index]); }, ), ); }, ); }, ), floatingActionButton: FloatingActionButton( onPressed: () { listBloc.addToList('New Item'); }, child: Icon(Icons.add), ), ); } } ``` 这样就可以使用Flutter BLoC展示列表了,当添加或删除列表项时,UI会自动更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岛上码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值