pin_input_text_field

pin_input_text_field

Flutter多样化PIN输入框组件

pin_input_text_field是一款Flutter PIN码输入组件,提供多种样式选择和自定义功能。内置4种常用PIN样式,支持密码模式、实心样式、输入颜色和光标设置。兼容所有Flutter支持的平台,为开发者提供灵活的PIN输入界面设计选项。

Flutter输入框PIN码自定义样式跨平台Github开源项目

pub 包 GitHub GitHub 主要语言

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.

编辑推荐精选

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码,轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统,允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令,自动执行排序、公式计算和数据透视等操作,支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内,支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

AI辅助编程,代码自动修复

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT,就用博思AIPPT!

博思AIPPT,新一代的AI生成PPT平台,支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等,内置海量精美PPT模板,涵盖商务、教育、科技等不同风格,同时针对每个页面提供多种版式,一键自适应切换,完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命,一站式智能商拍平台

潮际好麦深耕服装行业,是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌,以及国内10万+淘宝、天猫、京东等主流平台的品牌商家,为卖家节省将近85%的出图成本,提升约3倍出图效率,让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌,基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构,帮助企业扫清合规障碍,筑牢风控防线,成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案,助力品牌曝光

稳定高效的流量提升解决方案,助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用,一键生成无水印视频

最新版Sora2模型免费使用,一键生成无水印视频

Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。

下拉加载更多