Flutter自定义形状绘制插件shape的使用

Flutter自定义形状绘制插件shape的使用

本插件用于构建可轻松复用、验证和解析的表单。以下是关于如何使用该插件的具体说明。

目录

• ▲ Shape
• Table of Contents
• Summary
• Usage
• Principle
• Features
  • Access parsed values
  • Automatic form error generation
• Example

概要

此插件包含三个部分：

• shape包 包含创建表单主体所需的主要类和注解。
• shape_generator包，这是运行在带有 @GenerateFormBody() 注解的类上的代码生成器。
• shape_starter_kit包，其中包含一组通用且常用的表单字段和函数，供 shape 包使用。

使用

首先，将 shape 包添加到项目的依赖项中。

dart pub add shape

然后，将 shape_generator 和 build_runner 包添加到项目的开发依赖项中。

dart pub add --dev shape_generator build_runner

注意 如果上述命令不起作用，可以考虑手动将包添加到 pubspec.yaml 文件中，将 shape 包置于 dependencies 下，将 shape_generator 和 build_runner 包置于 dev_dependencies 下。

为了生成一个名为 ExampleFormBody 的表单主体，可以按以下步骤操作：

1. 创建一个带有 @GenerateFormBody() 注解的抽象类 ExampleFormBody。
2. 添加 _$ExampleFormBodyFields 混入类。
3. 创建一个未命名的工厂方法，返回一个包含所有表单字段的 _$ExampleFormBody 实例。所有参数必须是一个扩展了 FormField 类的实例。

完整的示例代码可能如下所示：

import 'package:shape/shape.dart';
import 'package:shape_addons/shape_addons.dart';

part 'example_form_body.g.dart';

@GenerateFormBody()
abstract class ExampleFormBody with _$ExampleFormBodyFields {
  factory ExampleFormBody({
    required String? name,
    required int? age,
  }) {
    return _$ExampleFormBody(
      name: GenericFormField(
        value: name,
        isRequired: true,
      ),
      age: IntegerFormField(
        value: age,
      ),
    );
  }
}

void main() {
  final formBody = ExampleFormBody(name: 'John', age: 25);
  print('Example form: $formBody');
  print('Example form errors: ${formBody.validate()}');
}

原理

Shape 通过将表单字段、表单主体、验证逻辑和解析逻辑分离到不同的类中来工作。

表单主体是一组表单字段。数据进入和离开表单主体的流程如下：

flowchart TD
  classDef multipleValues fill:#f0f0f0,stroke:#000000,stroke-dasharray: 5;
  classDef classInstance fill:#eeeeff,stroke:#aaaaee
  classDef function fill:#d0efe6,stroke:#6cddbd

  raw{{Raw String values}}:::multipleValues
  fbc(Form body constructor):::function
  fbi[Form body instance]:::classInstance
  parsed{{Parsed values}}:::multipleValues
  fei[Form errors instance]:::classInstance

  raw -- "are given to" --> fbc
  fbc -- "parses fields and creates" --> fbi
  fbi -- "contains" --> parsed
  fbi -- "when calling validate() creates" --> fei

特性

访问解析后的值

表单主体接收原始值并生成解析后的值。每次表单主体被构造或复制（使用 copyWith）时，值会自动解析，并作为具有相同名称的属性可访问。

var formBody = ExampleFormBody(name: 'John');
print('Example form: $formBody');
print('Example form errors: ${formBody.validate()}');

自动生成表单错误

生成表单主体时，会同时创建一个相邻的 [FormErrors] 类，并可访问。

var formBody = ExampleFormBody(name: 'John');
print('Example form: $formBody');
print('Example form errors: ${formBody.validate()}');

示例

要运行示例，需要在 example 文件夹中运行 build_runner。

cd example
flutter pub run build_runner build --delete-conflicting-outputs

基于 example/lib/example_form_body.dart 文件的内容，将生成一个新的表单主体。生成完成后，检查 example/lib/example_form_body.g.dart 文件的内容。

import 'package:shape_example/example_form_body.dart';

void main() {
  print(r'''
This project is not meant to be run like a normal Dart project, but instead
showcases how to generate form bodies using Shape.

Generate the form bodies by running:
  dart run build_runner build --delete-conflicting-outputs
''');

  final form = ExampleFormBody(name: 'John');
  print('Example form: $form');
  print('Example form errors: ${form.validate()}');

  final invalidForm = ExampleFormBody(name: null, age: 25);
  print('Invalid example form: $invalidForm');
  print('Invalid example form errors: ${invalidForm.validate()}');
}