Flutter Textformfield 类型密码

在Flutter中，Textformfield类型密码是一个非常常用的UI组件，它通常用于在创建登录或注册表单时用户输入密码。Textformfield类型密码可设置为显示或隐藏用户输入的文本。

基本用法

TextFormField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your password';
    }
    return null;
  },
)

上面的代码显示了如何使用Textformfield类型密码。主要参数是obscureText，设置为true时表明输入的密码文本用****遮盖，decoration参数用于设置输入框的标签和输入提示，validator参数用于设置表单验证的规则。

更改输入框样式

通过自定义decoration属性，Flutter允许我们修改输入框的外观。例如，我们可以改变输入框的背景颜色、边框样式等。

TextFormField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(
        color: Colors.blueGrey,
        width: 2.0,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(
        color: Colors.blueGrey,
        width: 2.0,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(
        color: Colors.blue,
        width: 3.0,
      ),
    ),
    filled: true,
    fillColor: Colors.white,
    prefixIcon: Icon(Icons.lock),
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your password';
    }
    return null;
  },
)

上面的代码指定了自定义的边框、背景和前缀图标，还指定了当输入框聚焦时边框的颜色。

定制密码规则

除了使用默认的表单验证规则，我们还可以定义自定义规则来验证输入的密码是否符合指定的格式。下面的代码演示了如何使用正则表达式检查密码的规则。

TextFormField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your password';
    }

    if (!RegExp(r'^(?!.{6,})(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]*$').hasMatch(value)) {
      return 'Password must be at least 6 characters and contain at least one letter and one number';
    }

    return null;
  },
)

上面的代码中，我们使用了正则表达式来定义验证规则。正则表达式^(?!.{6,})(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]*$用于检查密码长度是否大于或等于6，是否包含至少一个字母和一个数字。

这就是Flutter中Textformfield类型密码的基础使用、定制和验证方法。在你的下一个Flutter应用中使用它，来收集和验证用户输入的密码吧！