Flutter注解生成UI插件bloc_ui_annotation的使用

Flutter注解生成UI插件bloc_ui_annotation的使用

bloc_ui_annotation 是一个用于定义注解的库，这些注解将由 bloc_ui_generator 使用，以生成类型化的 BlocBuilder、BlocListener、BlocConsumer 和 BlocSelector。本文档将通过示例演示如何使用 bloc_ui_annotation 插件。

安装依赖

首先，你需要在你的 pubspec.yaml 文件中添加 bloc_ui_annotation 和 bloc_ui_generator 依赖：

dependencies:
  bloc_ui_annotation: ^x.x.x
dev_dependencies:
  bloc_ui_generator: ^x.x.x

确保替换 x.x.x 为最新版本号。

配置构建脚本

在 build.yaml 文件中配置构建脚本以生成所需的代码。以下是一个基本示例：

targets:
  $default:
    builders:
      bloc_ui_generator:bloc_ui_generator:
        options:
          bloc_annotation_options:
            blocs:
              - name: MyBloc
                events:
                  - MyEvent
                states:
                  - MyState

创建Bloc类

创建一个简单的Bloc类，并使用注解来描述其事件和状态。

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

part 'my_bloc.g.dart'; // 生成文件

@BlocAnnotation(
  name: 'MyBloc',
  events: [
    MyEvent,
  ],
  states: [
    MyState,
  ],
)
class MyBloc extends Bloc<MyEvent, MyState> {
  MyBloc() : super(MyInitial());

  [@override](/user/override)
  Stream<MyState> mapEventToState(MyEvent event) async* {
    if (event is IncrementEvent) {
      yield IncrementedState(event.count);
    }
  }
}

abstract class MyEvent {}

class IncrementEvent extends MyEvent {
  final int count;
  IncrementEvent(this.count);
}

abstract class MyState {}

class MyInitial extends MyState {}

class IncrementedState extends MyState {
  final int count;
  IncrementedState(this.count);
}

使用生成的代码

现在你可以使用生成的代码来创建 BlocBuilder、BlocListener 等。

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:bloc_ui_annotation/bloc_ui_annotation.dart';
import 'my_bloc.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => MyBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bloc UI Annotation Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            BlocBuilder<MyBloc, MyState>(
              builder: (context, state) {
                if (state is MyInitial) {
                  return Text('Initial State');
                } else if (state is IncrementedState) {
                  return Text('Count: ${state.count}');
                }
                return Container();
              },
            ),
            ElevatedButton(
              onPressed: () {
                context.read<MyBloc>().add(IncrementEvent(1));
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}