Flutter选择组件插件select的使用

概述

select 插件为类字段和枚举情况的选择器生成代码，帮助减少重复代码。它适用于Flutter和Dart项目中，特别是在需要频繁使用选择器的场景下，如 Iterable 转换、Stream 转换、Provider的 select 方法等。

安装

使用的包

• Generator: select
• Annotations: select_annotation
• Builder: build_runner

Pubspec配置

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  select_annotation: ^latest_version

dev_dependencies:
  build_runner: ^latest_version
  select: ^latest_version

使用方法

Selectable Class

要为类生成选择器，需要满足两个条件：

1. 类使用 @selectable 注解。
2. 文件包含生成的代码，例如 part 'model.select.dart';。

示例代码

import 'package:select_annotation/select_annotation.dart';

part 'user.select.dart';

@selectable
class User {
  final String name;
  final int age;

  const User(this.name, this.age);
}

生成的选择器方法如下：

abstract class User$ {
  User$._();

  static String name(User user) => user.name;
  static int age(User user) => user.age;
}

这些选择器可以像普通匿名函数一样使用。

Matchable Enum

为枚举生成匹配扩展的方法如下：

1. 枚举使用 @matchable 注解。
2. 文件包含生成的代码，例如 part 'enum.select.dart';。

示例代码

@matchable
enum AppTheme {
  light,
  dark,
  system,
}

生成的扩展方法如下：

extension $AppThemeMatcherExtension on AppTheme {
  T when<T>({
    required T Function() light,
    required T Function() dark,
    required T Function() system,
  }) {
    switch (this) {
      case AppTheme.light:
        return light();
      case AppTheme.dark:
        return dark();
      case AppTheme.system:
        return system();
    }
  }

  T whenConst<T>({
    required T light,
    required T dark,
    required T system,
  }) {
    switch (this) {
      case AppTheme.light:
        return light;
      case AppTheme.dark:
        return dark;
      case AppTheme.system:
        return system;
    }
  }
}

示例应用

以下是一个完整的示例应用，展示了如何使用 select 插件：

// ignore_for_file: avoid_print

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:select_annotation/select_annotation.dart';

part 'main.freezed.dart';
part 'main.select.dart';

@selectable
abstract class Named {
  String get firstName;
  String get lastName;
}

@selectable
@immutable
class Directions {
  final String description;

  const Directions({
    required this.description,
  });
}

@selectable
@immutable
class Address {
  final String street;
  final int number;
  final Directions directions;

  const Address({
    required this.street,
    required this.number,
    required this.directions,
  });
}

@selectable
mixin F {
  int get a;
}

@freezed
@selectable
class User with _$User implements Named {
  const factory User({
    required String firstName,
    required String lastName,
    required Address address,
  }) = _User;
}

/// A helper extension that helps compose the selectors.
extension<A, B> on B Function(A) {
  C Function(A) d<C>(C Function(B c) selector) => (A a) => selector(this(a));
}

void selectableAnnotation() {
  const user = User(
    firstName: 'John',
    lastName: 'Doe',
    address: Address(
      street: 'Main Street',
      number: 123,
      directions: Directions(
        description: 'North',
      ),
    ),
  );

  print(Named$.firstName(user)); // 输出: John
  print(Named$.lastName(user));  // 输出: Doe

  print(Address$.street(user.address)); // 输出: Main Street
  print(Address$.number(user.address)); // 输出: 123

  final description =
      User$.address.d(Address$.directions).d(Directions$.description);

  final directions = const [user].map(description).toList();

  print(directions); // 输出: [North]
}

@matchable
enum AppTheme {
  light,
  dark,
  system,
}

void matchableAnnotation() {
  const currentTheme = AppTheme.light;

  final label = currentTheme.whenConst(
    light: 'To light',
    dark: 'To dark',
    system: 'To system',
  );
  print(label); // 输出: To light

  currentTheme.when(
    light: () => print('Theme is light!'),
    dark: () => print('Theme is dark!'),
    system: () => print('Theme is system!'),
  ); // 输出: Theme is light!
}

void main() {
  selectableAnnotation();
  matchableAnnotation();
}

通过上述代码，您可以了解如何在Flutter项目中使用 select 插件来简化选择器的编写，从而提高代码的可读性和维护性。