如何在特定场景下使用 Flutter BLoC 模式?
How to use Flutter BLoC pattern on specific scenarios?
最近开始学习Flutter及其BLoC部分,BLoC库中有很多class,如Bloc
、PublishSubject
、StreamController
、BehaviorSubject
等..
我的问题是,我可以在哪些场景下使用这些 classes?比如我可以继承自bloc
,也可以不继承,但是为什么呢?我对此感到困惑,那些 classes 的使用场景是什么?
如您所见,在您的应用中实施 Bloc 的方法不止一种。您上面提到的 class 实际上来自不同的包: PublishSubject
和 BehaviorSubject
来自 rxdart package while StreamController
is within the Flutter SDK package dart:async
但是,您不需要使用全部甚至任何一个来在您的 Flutter 应用程序中实现 Bloc。我将在不使用任何包的情况下通过实现 Bloc 来做一个例子:
1.以普通方式实施 Bloc:
您可以使用 Flutter SDK 中的内容实现 Bloc,而无需使用其他包。通常你会创建一个 bloc class 将你的逻辑与 UI 分开。 class 可能如下所示:
import 'dart:async';
// This is the class that handle all the logic such as receiving data from API, process those data, etc (I'll call it a data processing unit)
class YourBloc {
// Create a stream to send processed data to the UI
final StreamController _someController = StreamController();
Stream get someStream => _someController.stream;
// Get the data from API, then send the data to stream here. Usually an async function
void loadData() async {
final data = await doYourApiCall(); // Get data from API
var processedData = processYourData(data);
_someController.add(processedData);
}
dispose() {
_someController.close();
}
}
与此同时,在 UI 中,您启动 loadData() 并使用 StreamBuilder
收听响应数据:
class _SomeScreenState extends State<SomeScreen> {
// Initiate your bloc
final YourBloc _bloc = YourBloc();
// Make the loadData() call
@override
void initState() {
_bloc.loadData();
super.initState();
}
@override
Widget build(BuildContext context) {
return StreamBuilder( // Listen to the datastream with StreamBuilder
stream: _bloc.someStream,
builder: (context, snapshot) {
if (!snapshot.hasData)
return Center(child: CircularProgressIndicator());
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) => _buildYourItem(index),
);
},
);
}
}
2。那么这些包是用来做什么的
您也可以使用一些包来实现 Bloc,例如 flutter_bloc or rxdart. flutter_bloc
provides a way to structure your bloc consistenly using Bloc/Event/State concepts, rx_dart
provides many tools so you can manipulate the Stream
to your own need. You might see people mentioned provider,它的主要目的是将对象向下传递到小部件树并在您的应用程序中创建数据流。
每一个都已经相当成熟并被许多程序员实现。我建议只在 以普通方式实现 Bloc 之后再查看它们中的每一个文档,这样您才能真正了解它们在幕后所做的事情。
最近开始学习Flutter及其BLoC部分,BLoC库中有很多class,如Bloc
、PublishSubject
、StreamController
、BehaviorSubject
等..
我的问题是,我可以在哪些场景下使用这些 classes?比如我可以继承自bloc
,也可以不继承,但是为什么呢?我对此感到困惑,那些 classes 的使用场景是什么?
如您所见,在您的应用中实施 Bloc 的方法不止一种。您上面提到的 class 实际上来自不同的包: PublishSubject
和 BehaviorSubject
来自 rxdart package while StreamController
is within the Flutter SDK package dart:async
但是,您不需要使用全部甚至任何一个来在您的 Flutter 应用程序中实现 Bloc。我将在不使用任何包的情况下通过实现 Bloc 来做一个例子:
1.以普通方式实施 Bloc:
您可以使用 Flutter SDK 中的内容实现 Bloc,而无需使用其他包。通常你会创建一个 bloc class 将你的逻辑与 UI 分开。 class 可能如下所示:
import 'dart:async';
// This is the class that handle all the logic such as receiving data from API, process those data, etc (I'll call it a data processing unit)
class YourBloc {
// Create a stream to send processed data to the UI
final StreamController _someController = StreamController();
Stream get someStream => _someController.stream;
// Get the data from API, then send the data to stream here. Usually an async function
void loadData() async {
final data = await doYourApiCall(); // Get data from API
var processedData = processYourData(data);
_someController.add(processedData);
}
dispose() {
_someController.close();
}
}
与此同时,在 UI 中,您启动 loadData() 并使用 StreamBuilder
收听响应数据:
class _SomeScreenState extends State<SomeScreen> {
// Initiate your bloc
final YourBloc _bloc = YourBloc();
// Make the loadData() call
@override
void initState() {
_bloc.loadData();
super.initState();
}
@override
Widget build(BuildContext context) {
return StreamBuilder( // Listen to the datastream with StreamBuilder
stream: _bloc.someStream,
builder: (context, snapshot) {
if (!snapshot.hasData)
return Center(child: CircularProgressIndicator());
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) => _buildYourItem(index),
);
},
);
}
}
2。那么这些包是用来做什么的
您也可以使用一些包来实现 Bloc,例如 flutter_bloc or rxdart. flutter_bloc
provides a way to structure your bloc consistenly using Bloc/Event/State concepts, rx_dart
provides many tools so you can manipulate the Stream
to your own need. You might see people mentioned provider,它的主要目的是将对象向下传递到小部件树并在您的应用程序中创建数据流。
每一个都已经相当成熟并被许多程序员实现。我建议只在 以普通方式实现 Bloc 之后再查看它们中的每一个文档,这样您才能真正了解它们在幕后所做的事情。