Flutter UI代码生成插件bloc_ui_generator的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter UI代码生成插件bloc_ui_generator的使用

概述

bloc_ui_generator 是一个用于生成 BlocBuilder、BlocListener、BlocConsumer、BlocSelector 和 BlocProvider 代码的 Flutter 插件。它通过注解来生成这些组件的代码，简化了开发过程。

设置

要配置项目，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  bloc_ui_annotation: ^latest_version

dev_dependencies:
  bloc_ui_generator: ^latest_version
  build_runner: ^latest_version

请确保替换 ^latest_version 为实际的版本号。

示例

假设我们有一个 CounterBloc 类扩展自 Bloc，并使用 GenerateBlocUI 注解：

example.dart

import 'package:bloc_ui_annotation/bloc_ui_annotation.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

part 'example.g.dart';

@GenerateBlocUI(
  selectorClasses: {'String'},
)
class CounterBloc extends Bloc<int, int> {
  CounterBloc() : super(0) {
    on<int>((event, emit) {
      emit(event);
    });
  }
}

构建后将生成对应的 example.g.dart 文件：

example.g.dart

part of 'example.dart';

// **************************************************************************
// BlocUIGenerator
// **************************************************************************

class CounterBlocBuilder extends BlocBuilder<CounterBloc, int> {
  const CounterBlocBuilder({
    super.key,
    required super.builder,
    super.buildWhen,
    super.bloc,
  });
}

class CounterBlocListener extends BlocListener<CounterBloc, int> {
  const CounterBlocListener({
    super.key,
    required super.listener,
    super.bloc,
    super.listenWhen,
    super.child,
  });
}

class CounterBlocConsumer extends BlocConsumer<CounterBloc, int> {
  const CounterBlocConsumer({
    super.key,
    required super.builder,
    required super.listener,
    super.bloc,
    super.buildWhen,
    super.listenWhen,
  });
}

class CounterBlocStringSelector extends BlocSelector<CounterBloc, int, String> {
  const CounterBlocStringSelector({
    super.key,
    required super.selector,
    required super.builder,
    super.bloc,
  });
}

class CounterBlocProvider extends BlocProvider<CounterBloc> {
  const CounterBlocProvider({
    required super.create,
    super.key,
    super.child,
    super.lazy = true,
  });

  const CounterBlocProvider.value({
    required super.value,
    super.key,
    super.child,
  }) : super.value();
}

extension CounterBlocContextExtension on BuildContext {
  CounterBloc get readTestBloc => read<CounterBloc>();
  CounterBloc get watchTestBloc => watch<CounterBloc>();
  R selectCounterBloc<R>(R Function(CounterBloc value) selector) =>
      select<CounterBloc, R>(selector);
}

运行代码生成器

一旦你在代码中添加了注解，你需要运行代码生成器来生成缺失的 .g.dart 文件。

在项目目录下运行以下命令：

dart run build_runner build

更多关于Flutter UI代码生成插件bloc_ui_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter UI代码生成插件bloc_ui_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用bloc_ui_generator插件来生成UI代码的一个示例。bloc_ui_generator是一个用于根据BLoC（Business Logic Component）状态自动生成UI的Dart代码生成器。

步骤1：安装插件

首先，你需要在你的pubspec.yaml文件中添加bloc_ui_generator依赖。确保你同时添加了flutter_bloc和bloc依赖，因为bloc_ui_generator依赖于它们。

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^x.x.x  # 替换为最新版本号
  bloc: ^x.x.x         # 替换为最新版本号

dev_dependencies:
  build_runner: ^x.x.x  # Flutter工具链的一部分
  bloc_ui_generator: ^x.x.x  # 替换为最新版本号

然后运行以下命令来安装依赖：

flutter pub get

步骤2：定义BLoC和状态

接下来，你需要定义你的BLoC和状态。假设我们有一个简单的计数器BLoC。

// counter_bloc.dart
import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';

part 'counter_event.dart';
part 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitial()) {
    on<CounterIncremented>(_increment);
  }

  void _increment(CounterIncremented event, Emitter<CounterState> emit) {
    emit(CounterState(count: state.count + 1));
  }
}

// counter_event.dart
part of 'counter_bloc.dart';

@immutable
abstract class CounterEvent {}

class CounterIncremented extends CounterEvent {}

// counter_state.dart
part of 'counter_bloc.dart';

@immutable
class CounterState {
  final int count;

  CounterState({required this.count});

  // 你可以添加更多的状态字段和逻辑
}

class CounterInitial extends CounterState {
  CounterInitial() : super(count: 0);
}

步骤3：生成UI代码

现在，使用bloc_ui_generator来生成UI代码。首先，你需要一个包含BLoC状态定义的.dart文件，并且确保它包含part指令。然后，创建一个新的.ui.dart文件，并在其中使用生成的代码。

例如，你可以创建一个名为counter_view.ui.dart的文件，并添加以下内容：

// counter_view.ui.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';

part 'counter_view.g.dart';

@CubitWidget<CounterBloc, CounterState>(
  builder: (context, state) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text('${state.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterBloc>().add(CounterIncremented()),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  },
)
class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: this,
    );
  }
}

然后，运行以下命令来生成UI代码：

flutter pub run build_runner build

步骤4：使用生成的UI组件

现在，你可以在你的应用中使用生成的CounterView组件了。例如，在main.dart中：

// main.dart
import 'package:flutter/material.dart';
import 'counter_view.ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: CounterView(),
    );
  }
}

这就是如何在Flutter项目中使用bloc_ui_generator插件来生成UI代码的一个完整示例。注意，bloc_ui_generator的具体用法可能会随着版本更新而变化，因此请参考最新的官方文档以获取最准确的信息。

回到顶部