集团结构的最新版本是Flutter Bloc 8.0编程模型。当前版本包含对早期版本的各种升级。Flutter 集团布局比版本 7 更加耐用。Flutter Bloc 8.0 序列图提供了一种通过事件管理状态的更好方法。此设计模式有助于将存储过程与外观分开。通过使用 BLoC 设计，可以促进可测试性和重用。
通过抽象模式的反应式组件，该模块使程序员能够专注于创建业务策略。事件处理程序是 Flutter Bloc 8.0 中管理状态的新功能。在这里，我们将 Bloc 8.0 设计用于反向更新项目。
概述
该程序旨在简化BLoC设计模式的实现（业务逻辑组件）。这种面向对象的设计有助于将核心功能与外观分开。通过使用 BLoC 设计，可以促进可测试性和重用。
通过抽象设计的反应式组件，该软件包使开发人员能够专注于设计业务策略。远程 Flutter 程序员是创建用户友好、可访问、高效和视觉上引人注目的移动应用程序的不错选择。
什么是肘？
Cubits 是扩展 BlocBase 并且可以管理任何状态的类。因此，发射前的条件称为Cubit的脉冲响应。肘的当前状态可以使用状态获取，可以通过执行具有单独状态的发射来更改。
Cubit 状态更新从调用可以使用 emit 方法生成新状态的指定函数开始。OnChange 包含当前和下一个状态，在条件更改发生之前调用。
如何设计立方体？
/// A `CounterCubit` which manages an `int` as its state.
class CounterCubit extends Cubit {
/// The initial state of the `CounterCubit` is 0.
CounterCubit() : super(0);
/// When an increment is called, the current state
/// of the Cubit is accessed via `state` and
/// a new `state` is emitted via `emit`.
void increment() => emit(state + 1);
}
如何使用库比特？
import 'package:flutter/material.dart';
import 'package:flutter_application_1/cubit/example_cubit.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// Create a Instance for the cubit
home: BlocProvider(
create: (context) => ExampleCubit(),
child: HomePage(),
),
);
}
}
class HomePage extends StatelessWidget {
HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Cubit Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
// Add the bloc builder to rebuild the state
BlocBuilder(
builder: (context, state) {
return Text(
state.toString(),
style: Theme.of(context).textTheme.headline4,
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
//Call the increment function from the cubit class it will update the bloc builder
onPressed: () => context.read().increment(),
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
如何观察肘？
可以覆盖 onChange 以观察单个肘的状态更改。
可以覆盖onError以观察单个肘的错误
class CounterCubit extends Cubit {
CounterCubit() : super(0);
void increment() => emit(state + 1);
@override
void onChange(Change change) {
super.onChange(change);
print(change);
}
@override
void onError(Object error, StackTrace stack trace) {
print('$error, $stackTrace');
super.onError(error, stackTrace);
}
}
BlocObserver can be used to observe all cubits.
class MyBlocObserver extends BlocObserver {
@override
void onCreate(BlocBase bloc) {
super.onCreate(bloc);
print('onCreate -- ${bloc.runtimeType}');
}
@override
void onChange(BlocBase bloc, Change change) {
super.onChange(bloc, change);
print('onChange -- ${bloc.runtimeType}, $change');
}
@override
void onError(BlocBase bloc, Object error, StackTrace stack trace) {
print('onError -- ${bloc.runtimeType}, $error');
super.onError(bloc, error, stackTrace);
}
@override
void onClose(BlocBase bloc) {
super.onClose(bloc);
print('onClose -- ${bloc.runtimeType}');
}
}
void main() {
BlocOverrides.runZoned(
() {
// Use cubits...
},
blocObserver: MyBlocObserver(),
);
}
什么是集团？
Bloc 表示一个更复杂的类，它使用事件而不是方法来启动状态更改。Bloc还扩展了BlocBase，它具有与Cubit相当的开放API。但是，Bloc 接受事件并将传入的事件转换为离开状态，而不是调用 Bloc 上的过程并立即发出新状态。
当引入事件时，onEvent 被触发，从而启动 Bloc 中的状态更改。之后，使用EventTransformer来转换事件。默认情况下，每个事件都是连续处理的，但可以提供自定义事件转换器来修改入站事件流。
到达的事件随后调用该数据项的所有指定事件处理程序。为了响应事件，每个事件处理程序必须发出零个或多个值。最后但并非最不重要的一点是，转换（包括当前情况、事件和下一个条件）在修改条件之前不久被调用。
Building a Block
/// The events which `CounterBloc` will react to.
abstract class CounterEvent {}
/// Notifies bloc to increment state.
class Increment extends CounterEvent {}
/// A `CounterBloc` which handles converting `CounterEvent`s into `int`s.
class CounterBloc extends Bloc {
/// The initial state of the `CounterBloc` is 0.
CounterBloc() : super(0) {
/// When an `Increment` event is added,
/// the current `state` of the Bloc is accessed via the `state` property
/// and a new state are emitted via `emit.`
on((event, emit) => emit(state + 1));
}
}
Using a Bloc
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// Create a Instance for the Bloc
home: BlocProvider(
create: (context) => ExampleBloc(),
child: HomePage(),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Bloc Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
// Add the bloc builder to rebuild the state
BlocBuilder(
builder: (context, state) {
return Text(
state.toString(),
style: Theme.of(context).textTheme.headline4,
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
//Call the increment function from the cubit class it will update the bloc builder
onPressed: () => context.read().add(Increment()),
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/292489.html