探索 Flutter Bloc 8.0.1 Flutter 中的设计模式

2022-11-01 15:07:12 阅读：249 来源： 互联网

集团结构的最新版本是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),
      ),
    );
  }

标签：集团,Flutter,block,管理
来源：