pin_input_text_field

English PinInputTextField 是一个 TextField 小部件，用于帮助显示不同样式的 PIN 码。它支持 flutter 支持的所有平台。

注意事项 🚨

如果 Flutter 版本低于 3.7.0，请使用 4.4.1 版本

特性 🌟

• 允许自定义形状，任何形状都可以！
• 内置 4 种常用的 PIN 码形状样式
• 支持隐藏输入
• 支持实心样式
• 支持输入颜色
• 支持光标
• 理论上支持所有 TextField 属性
• 支持 Flutter 所有平台

示例 🦀

感谢 Flutter Web，你可以通过网站预览，无需安装任何内容。

装饰样式

下划线装饰

<img src="https://yellow-cdn.veclightyear.com/835a84d5/d2f78795-b6d5-41b2-84b7-9b3b6dfb2119.gif" width="375" />

宽松边框装饰

<img src="https://yellow-cdn.veclightyear.com/835a84d5/3c552c74-4dc0-4fd9-bb66-c9bbbf3118bb.gif" width="375" />

紧凑边框装饰

<img src="https://yellow-cdn.veclightyear.com/835a84d5/63a70a91-a984-4020-b98a-b4bf20cfd607.gif" width="375" />

圆形装饰

<img src="https://yellow-cdn.veclightyear.com/835a84d5/03c55cd2-e9b7-4ca6-bd32-f8b5d5083663.gif" width="375" />

安装 🔧

从 pub 安装最新版本。

使用 ✍️

属性

PinInputTextField 的可自定义属性

<table> <th>属性名称</th> <th>示例值</th> <th>描述</th> <tr> <td>pinLength</td> <td>6</td> <td>PIN 码的最大长度，默认为 6</td> </tr> <tr> <td>onSubmit</td> <td>(String pin){}</td> <td>用户点击完成时执行的回调，在 Android 上有时可能不起作用。</td> </tr> <tr> <td>decoration</td> <td>BoxLooseDecoration</td> <td>装饰 PIN 码，有 3 种内置样式，默认为 BoxLooseDecoration</td> </tr> <tr> <td>inputFormatters</td> <td>WhitelistingTextInputFormatter.digitsOnly</td> <td>与 TextField 的 inputFormatter 相同，默认为 WhitelistingTextInputFormatter.digitsOnly</td> </tr> <tr> <td>keyboardType</td> <td>TextInputType.phone</td> <td>与 TextField 的 keyboardType 相同，默认为 TextInputType.phone</td> </tr> <tr> <td>pinEditingController</td> <td>PinEditingController</td> <td>控制正在编辑的 PIN 码。如果为 null，此小部件将创建自己的 PinEditingController</td> </tr> <tr> <td>autoFocus</td> <td>false</td> <td>与 TextField 的 autoFocus 相同，默认为 false</td> </tr> <tr> <td>focusNode</td> <td>FocusNode</td> <td>与 TextField 的 focusNode 相同</td> </tr> <tr> <td>textInputAction</td> <td>TextInputAction.done</td> <td>与 TextField 的 textInputAction 相同，在数字模式下不起作用</td> </tr> <tr> <td>enabled</td> <td>true</td> <td>与 TextField 的 enabled 相同，默认为 true</td> </tr> <tr> <td>onChanged</td> <td>(String pin){}</td> <td>与 TextField 的 onChanged 相同</td> </tr> <tr> <td>textCapitalization</td> <td>TextCapitalization.words</td> <td>与 TextField 的 textCapitalization 相同</td> </tr> <tr> <td>cursor</td> <td>Cursor.disabled()</td> <td>PIN 码的光标，默认不启用</td> </tr> </table>

表单字段

使用 PinInputTextFormField 而不是 PinInputTextField 来控制验证。

隐藏样式

/// 确定是否用数字替换 [obscureText]。
final bool isTextObscure;
/// 当 [isTextObscure] 为 true 时显示的文本，支持表情符号
final String obscureText;

已知问题 🥶

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

许可证

Copyright 2019 Tino Guo.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.