[译]TextFieldTextFormField 如何显示隐藏密码

原文： Flutter: Show/Hide Password in TextField/TextFormField

TextField/TextFormField 里隐藏输入的密码，只需要设置属性 obscureText 为 true ：

显示输入的密码以便用户可以看到实际输入的内容，设置属性 obscureText 为 false ：

我们制作了一个简单的Flutter应用，在屏幕中心包含 TextField widget （你也可以使用 TextFormField ）。用户可以输入密码，并且可以通过 widget 右边的“眼型”图标按钮控制密码的显示和隐藏。

花费大概一个多月的时间，这个完全由Flutter编写的Todo-List项目总算初步完成了！现在，它终于要被开源出来了。

在开始介绍之前，先来简单的看一下真机运行效果吧

下面，针对使用者和开发者，我将来分别介绍一次

app中，可以在主题切换界面选择各种主题颜色进行切换，app自带六个默认主题，这些都是我经过多次尝试所挑选出来的颜色搭配。同时你也可以选择自定义主题颜色

在app中，每项任务都会带有一个图标，而app提供了所有 Flutter 自带的 Material design 风格的图标。这些图标，你同样可以进行任意颜色的自定义

在app中，有多项其他的 *** 作是你可以进行自定义的

比如说主页测滑栏的头部展示内容。当然，还有一些其他的 *** 作，就由你去自行体验了

当你完成了一项任务后，这个任务就会从主页转移到完成列表页面，在这里你可以看到任务的一些额外信息

那么，对于使用者的介绍就到这里结束

下面就是为广大开发者们介绍的时间了！

各位开发者们请扶好你们的秀发，下面就我来带领各位参观参观这个项目的内部构造

项目中使用了一些非常优秀的第三方库，也特别感谢这些开发者们，让我的发量保持健康

下面就是这些控件的信息

项目使用的状态管理框架是 <code>Provider</code> ,而整个项目的架构如下

看起来是不是和 Android 中的 MVP 模式很像呢？其实都差不多的，只是名字略有不同罢了，你也可以就把上面的模式当作是 MVP 模式。

Flutter 可以说是特别适合这种架构模式的，因为视图跟随数据而变化，你基本上不用去关心View，只要去对数据进行 *** 作就好了。

项目目录结构如下：

先说明一下除了 lib 外的其他目录：

然后是 lib 目录

项目创建于6月21日，到如今发布100版本花了三十多天的时间，虽然我做过很多测试，解决了很多bug，但是时间确实不充裕。纰漏也会在所难免

所以如果使用过程中遇到什么问题，或者对于项目有什么好的建议，欢迎在app中的反馈界面提出来，也可以在下面留下评论，又或者在github上提issue。

项目的UI设计与后台接口均由我独自一人完成，所以这也是为什么时间不够的原因。不过目前项目中只是包含了两个自己写的接口，后续计划中应该会加入登录功能，到时候会有很多接口 *** 作。

若有兴趣，请持续关注！

如果你觉得这个app不错，或者这个项目有帮助到你，不妨给这个项目一个Star吧。项目后面也会持续保持更新和维护！

ToDo-List

UI项目地址

密码:Aczh

1keychain 钥匙串访问

2申请开发证书

3注册Bundle ID

4配置开发证书 (生成mobileprovision文件)

5安装证书

6打包ipa

7开发团队如何公用证书

进入以下程序

此文件保存到你想保存的地方，后面生成证书有用。

1打开 苹果开发者中心 （ >

源码分析：

分析源码可得，TextField 是有状态 StatefulWidget，有丰富的属性，自定义化较高，实践中需要合理利用各种回调；

1、光标的相关属性；cursorColor 为光标颜色，cursorWidth 为光标宽度，cursorRadius 为光标圆角；其中 Radius 提供了 circle 圆角和 elliptical 非圆角两种；

2、textAlign 为文字起始位置，可根据业务光标居左/居右/居中等；注意只是文字开始方向；textDirection 问文字内容方向，从左向右或从右向左；

3、maxLength 为字符长度，设置时默认是展示一行，且右下角有编辑长度与整体长度对比；与 maxLengthEnforced 配合，maxLengthEnforced 为 true 时达到最大字符长度后不可编辑；为 false 时可继续编辑展示有差别；

4、设置 maxLength 之后右下角默认有字符计数器，设置 TextFieldnoMaxLength 即可只展示输入字符数；

5、maxLines 为允许展现的最大行数，在使用 maxLength 时内容超过一行不会自动换行，因为默认 maxLines=1，此时设置为 null 或固定展示行数即可自动换行；区别在于 null 会展示多行，而 maxLines 最多只展示到设置行数；

6、obscureText 是否隐藏编辑内容，常见的密码格式；

7、enableInteractiveSelection 长按是否出现剪切/复制/粘贴菜单；不可为空；

8、keyboardAppearance 为键盘亮度，包括 Brightnessdark/light 两种，但仅限于 iOS 设备；

9、textCapitalization 文字大小写；理论上 sentences 为每句话第一个字母大写；characters为每个字母大写；words 为每个单词首字母大写；但该属性仅限于 text keybord，和尚在本地更换多种方式并未实现，有待研究；

10、keyboardType 为键盘类型，和尚理解整体分为数字键盘和字母键盘等；根据设置的键盘类型，键盘会有差别；

a 数字键盘

--1-- datetime 键盘上可随时访问 : 和 /；

--2-- phone 键盘上可随时访问 # 和 ；

--3-- number 键盘上可随时访问 + - /

b 字母键盘

--1-- emailAddress 键盘上可随时访问 @ 和 ；

--2-- url 键盘上可随时访问 / 和 ；

--3-- multiline 适用于多行文本换行；

--4-- text 默认字母键盘；

11、textInputAction 通常为键盘右下角 *** 作类型，类型众多，建议多多尝试；

12、autofocus 是否自动获取焦点，进入页面优先获取焦点，并d出键盘，若页面中有多个 TextField 设置 autofocus 为 true 则优先获取第一个焦点；

13、focusNode 手动获取焦点，可配合键盘输入等减少用户 *** 作次数，直接获取下一个 TextField 焦点；

14、enabled 设为 false 之后 TextField 为不可编辑状态；

15、decoration 为边框修饰，可以借此来调整 TextField 展示效果；可以设置前置图标，后置，边框属性，内容属性等，会在后续集中尝试；若要完全删除装饰，将 decoration 设置为空即可；

16、inputFormatters 为格式验证，例如原生 Android 中通常会限制输入手机号或其他特殊字符，在 Flutter 中也可以借此来进行格式限制，包括正则表达式；使用时需要引入 package:flutter/servicesdart；

a LengthLimitingTextInputFormatter 限制最长字符；

b WhitelistingTextInputFormatter 仅允许输入白名单中字符；如 digitsOnly 仅支持数字 [0-9]；

c BlacklistingTextInputFormatter 防止输入黑名单中字符；如 singleLineFormatter 强制输入单行；

分析源码 RegExp("[/]") 可以设置正则表达式；

17、onChanged 文本内容变更时回调，可实时监听 TextField 输入内容；

18、controller 文本控制器，监听输入内容回调；

19、onTap 点击 TextField时回调；

20、onEditingComplete 在提交内容时回调，通常是点击回车按键时回调；

21、onSubmit 在提交时回调，不可与 onEditingComplete 同时使用，区别在于 onSubmit 是带返回值的回调；

问题小结：

当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单，默认为英文，可通过设置 Flutter 国际化来处理；

（1）在 pubspecyaml 中集成 flutter_localizations；

2）在 MaterialApp 中设置本地化代理和支持的语言类型；

（1）将 maxLength 设置为 null 仅使用 LengthLimitingTextInputFormatter 限制最长字符；

（2）设置 InputDecoration 中 decoration 属性为空；但是底部有空余，只是隐藏而并非消失；

  因为我们使用Flutter跨平台技术开发App时，会有很多公用组件，因为Flutter中一切皆为Widget，widget也比较细粒度，所以我们需要进行封装，用于一个项目或者公司不同项目中去~

  那么今天写写如何发布package或者插件到Pubdev上，扯扯谈O(∩_∩)O哈哈~

《Flutter的拨云见日》系列文章如下：

1、Flutter中指定字体(全局或者局部，自有字库或第三方)

2、Flutter发布Package(Pubdev或私有Pub仓库)

首先，我们知道flutter有四种工程模式：Flutter Application、Flutter Module、Flutter Plugin和Flutter Package。

我们这里就主要讲Package 纯Dart插件的发布吧，都差不多。

创建工程后，就可以编写你的公共组件，或者公用字体库呀啥的， 都行。

在更改下你的pubspecyaml文件，修改下你的versionCode，项目名称，项目描述，作者等

如果上传失败试试