一个Flutter BLoC入门的简单 demo

通过一个非常简单的计数器示例来演示如何使用BLoC模式。这个计数器将有增加和减少两个功能。

步骤 1: 添加依赖

首先,确保你的Flutter项目中添加了flutter_bloc依赖。在你的pubspec.yaml文件中添加:

yaml 复制代码
dependencies:
  flutter_bloc: ^8.0.1 # 请检查最新版本
  flutter:
    sdk: flutter

然后运行flutter pub get来安装依赖。

步骤 2: 创建CounterEvent

创建一个counter_event.dart文件,这个文件将包含我们的事件类。对于计数器,我们将有两个事件:增加和减少。

dart 复制代码
abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterDecrementPressed extends CounterEvent {}

步骤 3: 创建CounterState

接着,创建一个counter_state.dart文件,这个文件将定义计数器的状态。

dart 复制代码
class CounterState {
  final int counterValue;

  CounterState({required this.counterValue});
}

步骤 4: 创建CounterBloc

现在,创建counter_bloc.dart,这是核心部分,它将处理事件并更新状态。

dart 复制代码
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(counterValue: 0)) {
    on<CounterIncrementPressed>((event, emit) {
      emit(CounterState(counterValue: state.counterValue + 1));
    });

    on<CounterDecrementPressed>((event, emit) {
      emit(CounterState(counterValue: state.counterValue - 1));
    });
  }
}

步骤 5: 使用BlocBuilder来构建UI

最后,在main.dart或其他任何你想要显示计数器的地方,使用BlocProvider和BlocBuilder来构建UI。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
import 'counter_event.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              '${state.counterValue}',
              style: Theme.of(context).textTheme.headline4,
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => context.read<CounterBloc>().add(CounterIncrementPressed()),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => context.read<CounterBloc>().add(CounterDecrementPressed()),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

这个简单的计数器应用演示了BLoC模式的基本使用:定义事件(CounterEvent)、状态(CounterState)和业务逻辑组件(CounterBloc),然后在UI层通过BlocBuilder根据状态变化来构建相应的UI。通过这种方式,可以将业务逻辑与UI表示分离,使得代码更加模块化和易于管理。

相关推荐
叽哥3 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG18 小时前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓1 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios