Flutter架构插件q_architecture的使用

q_architecture 是一套可重用的类，旨在加快开发时间并减少不必要的样板代码。它由 riverpod 提供支持。

快速入门

1. 创建抽象仓库并实现它

首先，我们需要创建一个抽象仓库接口，并提供其实现。

import 'package:either_dart/either.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 定义一个仓库提供者
final repositoryProvider = Provider<YourRepository>(
      (_) => YourRepositoryImplementation(),
);

// 抽象仓库接口
abstract class YourRepository {
  Either<Failure, String> getYourString();
}

// 实现仓库
class YourRepositoryImplementation implements YourRepository {
  [@override](/user/override)
  Future<Either<Failure, String>> getYourString() async {
    await Future.delayed(const Duration(seconds: 3));
    if (Random().nextBool()) {
      return Right('Your string');
    } else {
      return Left(Failure.generic());
    }
  }
}

2. 创建 Notifier 并调用仓库方法

接下来，我们创建一个继承自 BaseNotifier 的 notifier，并添加调用仓库方法的方法。

import 'package:flutter_riverpod/flutter_riverpod.dart';

class YourNotifier extends BaseNotifier<String> {
  late YourRepository _yourRepository;

  YourNotifier(this._yourRepository, super.ref);

  [@override](/user/override)
  void prepareForBuild() {
    _yourRepository = ref.watch(repositoryProvider);
  }

  Future<void> getYourString() =>
      execute(
        _yourRepository.getYourString(),
        withLoadingState: true,
        globalLoading: false,
        globalFailure: false,
      );
}

3. 创建 Notifier 的 Provider

final yourNotifierProvider = NotifierProvider<YourNotifier, BaseState<String>>(
  () => YourNotifier(YourRepositoryImplementation(), null),
);

4. 在 Widget 中调用 Notifier 方法并监听变化

在你的 widget 中，通过 provider 调用 notifier 的方法，并监听状态变化。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class YourPage extends ConsumerWidget {
  const YourPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(yourNotifierProvider);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              switch (state) {
                Data(data: final sentence) => sentence,
                Loading() => 'Loading',
                Initial() => 'Initial',
                Error(failure: final failure) => failure.toString(),
              },
            ),
            TextButton(
              onPressed: () => ref.read(yourNotifierProvider.notifier).getYourString(),
              child: const Text('Get string'),
            ),
          ],
        ),
      ),
    );
  }
}

示例 Demo

以下是一个完整的示例 demo，展示了如何使用 q_architecture 插件。

1. 创建项目和依赖

首先，确保你已经在 pubspec.yaml 文件中添加了 q_architecture 和其他必要的依赖。

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0
  either_dart: ^0.6.0
  equatable: ^2.0.3
  # 添加 q_architecture 依赖
  q_architecture: ^x.x.x

运行 flutter pub get 来安装这些依赖。

2. 创建 Repository 和 Notifier

// repository.dart
import 'package:either_dart/either.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final exampleRepositoryProvider = Provider<ExampleRepository>(
  (_) => ExampleRepositoryImpl(),
);

abstract class ExampleRepository {
  Future<Either<Failure, String>> getSomeString();
}

class ExampleRepositoryImpl implements ExampleRepository {
  [@override](/user/override)
  Future<Either<Failure, String>> getSomeString() async {
    await Future.delayed(const Duration(seconds: 3));
    if (Random().nextBool()) {
      return Right('Your string');
    } else {
      return Left(Failure.generic());
    }
  }
}

// notifier.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';

final exampleNotifierProvider = NotifierProvider<ExampleNotifier, BaseState<String>>(
  () => ExampleNotifier(),
);

class ExampleNotifier extends BaseNotifier<String> {
  late ExampleRepository _exampleRepository;

  ExampleNotifier() {
    _exampleRepository = ref.read(exampleRepositoryProvider);
  }

  [@override](/user/override)
  void prepareForBuild() {
    _exampleRepository = ref.watch(exampleRepositoryProvider);
  }

  Future<void> getSomeStringFullExample() =>
      execute(
        _exampleRepository.getSomeString(),
        withLoadingState: true,
        globalLoading: false,
        globalFailure: true,
      );
}

3. 创建 UI 页面

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'notifier.dart';
import 'repository.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Q Architecture Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(exampleNotifierProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Q Architecture Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              switch (state) {
                Data(data: final sentence) => sentence,
                Loading() => 'Loading',
                Initial() => 'Initial',
                Error(failure: final failure) => failure.toString(),
              },
            ),
            ElevatedButton(
              onPressed: () => ref.read(exampleNotifierProvider.notifier).getSomeStringFullExample(),
              child: Text('Get String'),
            ),
          ],
        ),
      ),
    );
  }
}