Flutter密码输入插件pin_input_text_field的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter密码输入插件pin_input_text_field的使用

描述

pin_input_text_field 是一个Flutter包，它提供了一个TextField小部件来帮助显示不同样式的PIN码。它支持所有Flutter支持的平台。

特点 🌟

  • 支持自定义形状
  • 内置4种常用的PIN样式
  • 支持遮挡模式（例如：输入密码时显示星号）
  • 支持实心样式
  • 支持进入颜色设置
  • 支持光标自定义
  • 理论上支持所有TextField属性
  • 支持所有Flutter平台

安装 🔧

你可以从pub安装最新版本的pin_input_text_field。

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

dependencies:
  pin_input_text_field: ^latest_version # 替换为实际的最新版本号

然后运行命令：

flutter pub get

使用 ✍️

属性

下表列出了一些可定制的属性以及它们的作用：

属性名称 示例值 描述
pinLength 6 PIN的最大长度，默认是6
onSubmit (String pin){} 用户点击完成时触发的回调
decoration BoxLooseDecoration 装饰PIN的样式，默认是BoxLooseDecoration
inputFormatters WhitelistingTextInputFormatter.digitsOnly 输入格式化器，默认只允许数字
keyboardType TextInputType.phone 键盘类型，默认是电话键盘
pinEditingController PinEditingController 控制正在编辑的PIN，如果为null，此小部件将创建自己的PinEditingController
autoFocus false 是否自动获取焦点，默认是false
focusNode FocusNode 焦点节点
textInputAction TextInputAction.done 输入框操作行为，默认是完成
enabled true 是否启用，默认是true
onChanged (String pin){} 当文本改变时触发的回调
textCapitalization TextCapitalization.words 文本大写模式
cursor Cursor.disabled() 光标，默认不启用

示例代码 🦀

以下是一个完整的示例代码，展示了如何使用pin_input_text_field插件创建一个带有PIN输入功能的应用程序：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pin Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final int _pinLength = 4;
  final TextEditingController _pinEditingController = TextEditingController();

  @override
  void dispose() {
    _pinEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PIN Input Example'),
      ),
      body: Center(
        child: SizedBox(
          height: 64.0,
          child: PinInputTextField(
            pinLength: _pinLength,
            decoration: UnderlineDecoration(
              colorBuilder: PinListenColorBuilder(Colors.cyan, Colors.green),
            ),
            controller: _pinEditingController,
            keyboardType: TextInputType.number,
            textCapitalization: TextCapitalization.characters,
            onSubmit: (pin) {
              debugPrint('submit pin:$pin');
            },
            onChanged: (pin) {
              debugPrint('onChanged execute. pin:$pin');
            },
          ),
        ),
      ),
    );
  }
}

这个例子创建了一个简单的应用程序，其中包含一个PIN输入字段。用户可以输入四位数的PIN码，并且当输入完成时会打印出结果。

已知问题 🥶

PinEditingController监听器在编程设置文本时可能会执行多次，你可以在代码中过滤掉一些重复的值。

许可证

该插件遵循Apache License 2.0许可协议。更多信息请参阅LICENSE文件。


更多关于Flutter密码输入插件pin_input_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter密码输入插件pin_input_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用pin_input_text_field插件的示例代码。这个插件通常用于输入PIN码或密码，因为它提供了很好的用户体验，如隐藏输入字符、格子样式等。

首先，确保你已经在pubspec.yaml文件中添加了pin_input_text_field依赖：

dependencies:
  flutter:
    sdk: flutter
  pin_input_text_field: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个简单的示例代码，展示如何在Flutter应用中使用PinInputTextField：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pin Input Text Field Example'),
        ),
        body: Center(
          child: PinInputTextFieldExample(),
        ),
      ),
    );
  }
}

class PinInputTextFieldExample extends StatefulWidget {
  @override
  _PinInputTextFieldExampleState createState() => _PinInputTextFieldExampleState();
}

class _PinInputTextFieldExampleState extends State<PinInputTextFieldExample> {
  final pinController = TextEditingController();

  @override
  void dispose() {
    pinController.dispose();
    super.dispose();
  }

  void onCompleted(String pin) {
    // 处理完成的PIN码
    print("Completed PIN: $pin");
  }

  void onChanged(String pin) {
    // 处理变化的PIN码
    print("Current PIN: $pin");
  }

  @override
  Widget build(BuildContext context) {
    return PinInputTextField(
      controller: pinController,
      length: 6,  // PIN码长度
      obscureText: false,  // 是否隐藏输入的字符
      enableActiveFill: true,  // 是否启用高亮当前输入位置
      pinWidth: 50.0,  // 每个PIN格子宽度
      pinHeight: 60.0,  // 每个PIN格子高度
      pinActiveColor: Colors.blue,  // 当前输入位置的颜色
      pinInactiveColor: Colors.grey,  // 未输入位置的颜色
      pinInactiveFillColor: Colors.transparent,  // 未输入位置背景颜色
      pinActiveFillColor: Colors.white,  // 当前输入位置背景颜色
      fieldBackgroundColor: Colors.white,  // 整个输入框背景颜色
      focusedBorderColor: Colors.blue,  // 聚焦时的边框颜色
      unfocusedBorderColor: Colors.grey,  // 未聚焦时的边框颜色
      borderRadius: BorderRadius.circular(8.0),  // 边框圆角
      animationDuration: Duration(milliseconds: 300),  // 动画持续时间
      onError: (String message) {
        // 处理错误
        print("Error: $message");
      },
      onCompleted: onCompleted,  // 完成输入时的回调
      onChanged: onChanged,  // 输入变化时的回调
      textStyle: TextStyle(fontSize: 24.0),  // 文本样式
      margin: EdgeInsets.symmetric(horizontal: 20.0),  // 外边距
      decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(vertical: 12.0),  // 内容内边距
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
      keyboardType: TextInputType.number,  // 键盘类型
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个PinInputTextField。你可以根据需要调整PIN码的长度、颜色、动画持续时间等参数。onCompleted和onChanged回调用于处理用户输入完成和输入变化时的事件。

希望这个示例能帮助你理解如何在Flutter中使用pin_input_text_field插件。如果你有任何其他问题，欢迎随时提问！

回到顶部