简介

FancyPasswordField 是一个用作密码验证字段的小部件。您可以拥有普通密码字段的所有功能，还可以获得诸如设置验证规则和密码强度之类的酷炫功能。

基本用法

最简单的用法就是直接使用 FancyPasswordField，不带任何属性。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: FancyPasswordField(),
      ),
    );
  }
}

这将创建一个带有某些默认配置的密码字段。默认行为是在表单字段上方显示强度指示器。
您可以将 `false` 传递给 `hasStrengthIndicator` 属性来禁用此行为。

我们可以做得更进一步，为我们的窗口小部件传递一些验证规则。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: FancyPasswordField(
            validationRules: {
                DigitValidationRule(),
                UppercaseValidationRule(),
                LowercaseValidationRule(),
                SpecialCharacterValidationRule(),
                MinCharactersValidationRule(6),
                MaxCharactersValidationRule(12),
            },
        ),
      ),
    );
  }
}

这些包带有一些预定义的常用规则，因此您可以直接使用。欢迎您实现自己的 `[ValidationRule]` 并像往常一样添加到密码字段中。

自定义规则

如前所述，该包附带了一些常用的内置规则，但您可以创建自己的自定义规则。要做到这一点，只需继承基类 `[ValidationRule]` 抽象类。您必须为您的规则提供一个名称和一个验证函数。

class ContainsTripleAValidationRule extends ValidationRule {
  @override
  String get name => 'Contains AAA';

  @override
  bool validate(String value) {
    return value.contains('AAA');
  }
}

仅仅做到这一点就足以让您的规则正常工作。将您的规则传递给 `[FancyPasswordField]` 的 `[validationRules]` 集合，就会发生规则的显示和验证。

密码控制器

`[FancyPasswordField]` 有一个您可以传递的控制器。此控制器的用途与 Flutter 世界中的任何控制器几乎相同。控制器使您可以访问字段的底层信息。尤其值得注意的是，它提供了关于规则以及在任何时候违反了哪些规则的信息。控制器还有一个指示所有规则是否正常的 getter。

一种用例是，如果您想验证表单字段的状态以启用或禁用表单的保存。

final FancyPasswordController _passwordController = FancyPasswordController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 400,
              child: FancyPasswordField(
                passwordController: _passwordController,
                validationRules: {
                  DigitValidationRule(),
                  UppercaseValidationRule(),
                },
                validator: (value) {
                  return _passwordController.areAllRulesValidated
                      ? null
                      : 'Not Validated';
                },
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

自定义

`[FancyPasswordField]` 提供了一些预定义的微件，它们显示了一些不错的组件，用于强度指示器
以及规则。但是，该小部件被设计为完全可自定义的。因此，您可以将自己的构建器传递给
强度密码小部件和规则小部件。

在 `示例` 部分，您可以找到大量自定义示例。

上面我们可以看到一个示例，展示了这些字段的一些可能的自定义。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SizedBox(
            width: 400,
            child: FancyPasswordField(
                validationRules: {
                    DigitValidationRule(),
                    UppercaseValidationRule(),
                    LowercaseValidationRule(),
                    SpecialCharacterValidationRule(),
                    MinCharactersValidationRule(6),
                    MaxCharactersValidationRule(12),
                },
                strengthIndicatorBuilder: (strength) => Text(
                  strength.toString(),
                ),
                validationRuleBuilder: (rules, value) {
                  if (value.isEmpty) {
                    return const SizedBox.shrink();
                  }
                  return ListView(
                    shrinkWrap: true,
                    children: rules
                        .map(
                          (rule) => rule.validate(value)
                              ? Row(
                                  children: [
                                    const Icon(
                                        Icons.check,
                                        color: Colors.green,
                                    ),
                                    const SizedBox(width: 12),
                                    Text(
                                        rule.name,
                                        style: const TextStyle(
                                            color: Colors.green,
                                        ),
                                    ),
                                  ],
                                )
                              : Row(
                                  children: [
                                    const Icon(
                                        Icons.close,
                                        color: Colors.red,
                                    ),
                                    const SizedBox(width: 12),
                                    Text(
                                        rule.name,
                                        style: const TextStyle(
                                            color: Colors.red,
                                        ),
                                    ),
                                  ],
                                ),
                        )
                        .toList(),
                  );
                },
              ),
            ),
      ),
    );
  }
}