如何将 bloc 模式与 flutter 应用程序集成?
how to integrat bloc pattern with a flutter app?
所以最近我正在尝试将 bloc 模式集成到我已经构建的应用程序中
我从登录页面开始,那里有两个用于 gsm 和密码的文本字段
我将 bloc 包添加到 yaml 文件并安装了插件 bloc
然后从 gsm field 开始为它创建一个 bloc
然后我意识到我需要另一个集团的密码
如果我深入注册页面,我可能需要四五个集团
这是正常行为还是可能会影响应用程序的性能和流畅度,是否有更好的方法使用 bloc 模式......
使用流和接收器从头开始构建 bloc 模式是否更好?我已经尝试过这个并且还创建了一个如下所示的提供程序:
class Provider extends InheritedWidget {
final bloc = Bloc();
Provider({Key key, Widget child}) : super(key: key, child: child);
@override
bool updateShouldNotify(_) => true;
static Bloc of(BuildContext context) {
return (context.dependOnInheritedWidgetOfExactType<Provider>() as Provider)
.bloc;
}
}
但是不知道如何添加多个 bloc 以使应用程序更具模块化和可读性,如果我是否需要为每个 bloc 创建一个提供者,这方面的任何帮助也...谢谢提前
您不需要为每个集团创建提供商。您的提供商 class 是 InheritedWidget
,因此重复使用它可能会导致性能问题。已经可以通过单个提供商访问您的所有区块。
提供商
所有区块都在您的提供商中 class:
class Provider extends InheritedWidget {
final gsmBloc = GsmBloc(); // Bloc 1
final passwordBloc = PasswordBloc(); // Bloc 2
// add more ...
Provider({
Key key,
Widget child,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(_) => true;
static Provider of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<Provider>()!;
}
}
我的应用程序
在您的第一个小部件中初始化 Provider(或者预先初始化,以防您想在此处访问它):
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bloc Pattern',
home: Provider(
child: MyHomePage(),
),
);
}
}
我的主页
使用最近的上下文通过 Provider 访问您的区块:
class MyHomePage extends StatefulWidget {
@override
Widget build(BuildContext context) {
// Access your blocs through Provider
final passwordBloc = Provider.of(context).passwordBloc;
return Scaffold(
appBar: AppBar('Flutter Bloc Pattern'),
body: Center(
child: Text('My Home Page'),
),
);
}
}
所以最近我正在尝试将 bloc 模式集成到我已经构建的应用程序中 我从登录页面开始,那里有两个用于 gsm 和密码的文本字段 我将 bloc 包添加到 yaml 文件并安装了插件 bloc 然后从 gsm field 开始为它创建一个 bloc 然后我意识到我需要另一个集团的密码 如果我深入注册页面,我可能需要四五个集团 这是正常行为还是可能会影响应用程序的性能和流畅度,是否有更好的方法使用 bloc 模式...... 使用流和接收器从头开始构建 bloc 模式是否更好?我已经尝试过这个并且还创建了一个如下所示的提供程序:
class Provider extends InheritedWidget {
final bloc = Bloc();
Provider({Key key, Widget child}) : super(key: key, child: child);
@override
bool updateShouldNotify(_) => true;
static Bloc of(BuildContext context) {
return (context.dependOnInheritedWidgetOfExactType<Provider>() as Provider)
.bloc;
}
}
但是不知道如何添加多个 bloc 以使应用程序更具模块化和可读性,如果我是否需要为每个 bloc 创建一个提供者,这方面的任何帮助也...谢谢提前
您不需要为每个集团创建提供商。您的提供商 class 是 InheritedWidget
,因此重复使用它可能会导致性能问题。已经可以通过单个提供商访问您的所有区块。
提供商
所有区块都在您的提供商中 class:
class Provider extends InheritedWidget {
final gsmBloc = GsmBloc(); // Bloc 1
final passwordBloc = PasswordBloc(); // Bloc 2
// add more ...
Provider({
Key key,
Widget child,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(_) => true;
static Provider of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<Provider>()!;
}
}
我的应用程序
在您的第一个小部件中初始化 Provider(或者预先初始化,以防您想在此处访问它):
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bloc Pattern',
home: Provider(
child: MyHomePage(),
),
);
}
}
我的主页
使用最近的上下文通过 Provider 访问您的区块:
class MyHomePage extends StatefulWidget {
@override
Widget build(BuildContext context) {
// Access your blocs through Provider
final passwordBloc = Provider.of(context).passwordBloc;
return Scaffold(
appBar: AppBar('Flutter Bloc Pattern'),
body: Center(
child: Text('My Home Page'),
),
);
}
}