Flutter加载状态管理插件loading_bloc_builder的使用

Flutter加载状态管理插件loading_bloc_builder的使用

提供了用于显示带有LoadingStatus的状态生命周期的特殊BlocBuilder。

LoadingStatus

一个简单的枚举，表示API调用可以具有的四种基本状态：initial（初始），loading（加载中），success（成功），failure（失败）。

LoadingBlocBuilder

使用方法

  1. 创建一个包含LoadingStatus的状态的Bloc或Cubit。
// 定义一个Bloc类
class TestingBloc extends Cubit<TestingState> {
  TestingBloc() : super(const TestingState());

  // 在这里进行API调用
}

// 定义一个状态类
class TestingState extends Equatable {
  const TestingState({
    this.status = LoadingStatus.initial,
  });
  final LoadingStatus status;

  @override
  List<Object> get props => [status];

  TestingState copyWith({
    LoadingStatus? status,
  }) {
    return TestingState(
      status: status ?? this.status,
    );
  }
}
  1. 将该Bloc提供到widget树的某个位置。
// 提供TestingBloc
BlocProvider(
  create: (context) => TestingBloc(),
  child: // 这里放置其他widgets
);
  1. 在更底层的widget树中，实现你的LoadingBlocBuilder。
// 使用LoadingBlocBuilder来根据不同的状态显示不同的UI
LoadingBlocBuilder<TestingBloc, TestingState>(
  statusGetter: (state) => state.status,
  initialBuilder: (_, _state) => const Text('Initial'),
  loadingBuilder: (_, _state) => const Text('Loading'),
  successBuilder: (_, _state) => const Text('Success'),
  failureBuilder: (_, _state) => const Text('Failure'),
)

更多关于Flutter加载状态管理插件loading_bloc_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter加载状态管理插件loading_bloc_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用loading_bloc_builder插件进行加载状态管理的代码示例。这个插件可以帮助你优雅地处理加载、成功和错误状态。

首先，确保你已经在pubspec.yaml文件中添加了loading_bloc_builder依赖：

dependencies:
  flutter:
    sdk: flutter
  loading_bloc_builder: ^x.y.z  # 请替换为最新版本号

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

接下来，让我们编写一个示例代码，展示如何使用loading_bloc_builder。

1. 创建一个简单的Bloc

我们将创建一个简单的Bloc来模拟数据加载过程。这里我们使用flutter_bloc库来管理状态。

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

enum DataStatus { initial, loading, success, failure }

class DataState {
  final DataStatus status;
  final String? data;
  final String? error;

  DataState({required this.status, this.data, this.error});

  factory DataState.initial() => DataState(status: DataStatus.initial);
  factory DataState.loading() => DataState(status: DataStatus.loading);
  factory DataState.success(String data) => DataState(status: DataStatus.success, data: data);
  factory DataState.failure(String error) => DataState(status: DataStatus.failure, error: error);
}

class DataCubit extends Cubit<DataState> {
  DataCubit() : super(DataState.initial());

  void loadData() async {
    emit(DataState.loading());
    await Future.delayed(Duration(seconds: 2)); // 模拟网络请求延迟
    try {
      // 模拟成功获取数据
      emit(DataState.success("Hello, this is the loaded data!"));
    } catch (_) {
      // 模拟加载失败
      emit(DataState.failure("Failed to load data"));
    }
  }
}

2. 使用LoadingBlocBuilder

现在，我们在Flutter UI中使用LoadingBlocBuilder来根据Bloc的状态显示不同的内容。

import 'package:flutter/material.dart';
import 'package:loading_bloc_builder/loading_bloc_builder.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'data_cubit.dart'; // 假设上面的代码保存在这个文件里

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loading Bloc Builder Example'),
        ),
        body: Center(
          child: BlocProvider<DataCubit>(
            create: (context) => DataCubit(),
            child: Builder(
              builder: (context) {
                return LoadingBlocBuilder<DataCubit, DataState>(
                  bloc: context.read<DataCubit>(),
                  loadingWidget: CircularProgressIndicator(),
                  errorWidget: (context, state) => Text('Error: ${state.error!}'),
                  successWidget: (context, state) => Text('Data: ${state.data!}'),
                  builder: (context, state) {
                    // 初始状态或其他自定义状态处理
                    if (state.status == DataStatus.initial) {
                      return ElevatedButton(
                        onPressed: () => context.read<DataCubit>().loadData(),
                        child: Text('Load Data'),
                      );
                    }
                    return Container(); // 初始状态下不显示其他内容
                  },
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

解释

  1. DataCubit: 这是一个简单的Cubit，它管理数据加载的状态。它有三个主要状态：initial, loading, success, 和 failure。

  2. LoadingBlocBuilder: 用于根据Bloc的状态显示不同的Widget。loadingWidget显示加载指示器，errorWidget显示错误信息，successWidget显示成功数据。builder函数用于处理其他状态（例如初始状态）。

  3. BlocProvider: 提供Bloc实例，使得它在子树中可访问。

  4. UI: 包含一个按钮，用于触发数据加载。根据DataCubit的状态，显示不同的Widget。

这个示例展示了如何使用loading_bloc_builder来简化加载状态的管理，使得UI在不同状态下能够显示相应的内容。希望这对你有所帮助！

回到顶部