flutter输入控件,flutter 选择控件

Flutter TextField 文本输入框的基本属性及详解

源码分析：

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

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

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

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

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

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

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

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

8、keyboardAppearance 为键盘亮度，包括 Brightness.dark/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 是否自动获取焦点，进入页面优先获取焦点，并弹出键盘，若页面中有多个 TextField 设置 autofocus 为 true 则优先获取第一个焦点；

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

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

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

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

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）在 pubspec.yaml 中集成 flutter_localizations；

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

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

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

相关问答

Q1: Flutter-Text文本组件

在开发中，文本是我们最常接触的控件。这篇博客来分享一下 Flutter 中的 Text 文本组件，我们展示的文本都可以用这个组件来展示，希望看文章的小伙伴有所帮助。

这样我们就可以在界面当中显示一个文本，显示是 Hello Flutter 。下面我们来说说 Text 组件的属性：

设置文本颜色：

设置文本大小：

设置文本样式-加粗：

设置文本样式-斜体：

设置文本位置：

TextAlign可选属性： center 、 end 、 start 、 justify 、 left 、 right 。

设置文本高度：

设置文本最大行数：

设置文本有下划线：

设置文本有虚线类型下划线：

设置文字间隔：

文本超过最大行数设置 ... ：

Q2: Flutter组件TextFormField详解

TextFormField继承自FormField，是flutter表单提交相关组件，类似于html中的 input type="text" / ，是个文本输入框。需要在 Form 组件内部使用，否则无法正确提交数据。

未完待续

Q3: Flutter初学 —— 常用控件使用

在编写几个 Flutter 项目后，发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案；而 Dart 语言也与 Java 、 Kotlin 类似，所以对 Android 开发者来说门槛非常低；特意记录一下常用的控件及其使用：

StatelessWidget 不需要额外的创建 State

StatefulWidget 创建 State 类，并可以在其中保存一些状态

only 可以单独设置每个方向的内边距

类似于 LinearLayout 中的 orientation 设置为 vertical ， mainAxisAlignment 表示竖向的一个对齐方式， crossAxisAlignment 表示横向的对齐方式

与 Column 相反，主轴是横向，对齐方式类似， crossAxisAlignment 表示竖向的对齐方式

类似 SizedBox ，一个容器，但是主要功能是有一个 decoration —— 装饰器，作用是绘制背景，或者使用 item 中的阴影

栈，先入后出，类似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定显示在某一个位置

配合多 child 使用，会填充剩余的空间

Image 功能强大，使用不同的方法可以加载不同来源的图片

看到这些方法，突然觉得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形状的图片，无论是圆形还是五角星都不在话下，然而 Android 要实现不规则的形状，可是要下不少功夫的。

名字和 Android 的一模一样，但是用法却比 Android 的简单很多：

主要就是 itemCount 与 itemBuilder ,其余就是配置样式， itemBuilder 需要返回一个 widget ，当然了，每个 ListView 都有其对应的 item ，在里面的方法中编写 widget 即可

与 ListView 类似，但是需要有一个 delegate 类，作用是设置有多少列，每一列之间的间距是多少

GridView 没有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的样式， Flutter 中通常是使用装饰器来处理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Q4: flutter_经典控件(一):文本、图片和按钮在Flutter中怎么用?

1、单一样式的文本 Text

2、多种混合样式的文本 Text.rich

1、控件样式定制

Q5: Flutter_定义控件StatefulWidgets和StatelessWidget

Stateful（有状态） 和 stateless（无状态） widgets

stateless widget 没有内部状态. Icon、 IconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类。

stateful widget 是动态的. 用户可以和其交互 (例如输入一个表单、 或者移动一个slider滑块),或者可以随时间改变 (也许是数据改变导致的UI更新). Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他们都是 StatefulWidget的子类。

StatefulWidget类

具有可变状态的小部件。

状态是（1）在构建窗口小部件时可以同步读取的信息，以及（2）在窗口小部件的生命周期内可能会更改的信息。这是小工具实施者的责任，以确保国家的及时通知当这种状态的改变，使用State.setState。

有状态窗口小部件是一个窗口小部件，它通过构建一个更具体地描述用户界面的其他窗口小部件来描述用户界面的一部分。构建过程以递归方式继续，直到用户界面的描述完全具体（例如，完全由RenderObjectWidget组成，其描述具体的RenderObject）。

当您描述的用户界面部分可以动态更改时（例如由于具有内部时钟驱动状态或依赖于某些系统状态），状态窗口小部件非常有用。对于仅依赖于对象本身中的配置信息以及窗口小部件膨胀的 BuildContext的组合，请考虑使用 StatelessWidget。

StatefulWidget实例本身是不可变的，并且将它们的可变状态存储在由createState方法创建的单独State对象中 ，或者存储在State订阅的对象中，例如Stream或ChangeNotifier对象，其引用存储在StatefulWidget的最终字段中本身。

框架在膨胀StatefulWidget时 调用createState，这意味着如果该窗口小部件已插入到多个位置的树中，则多个State对象可能与同一StatefulWidget关联。同样，如果StatefulWidget从树中移除，后来在树再次插入时，框架将调用createState再创建一个新的国家目标，简化的生命周期状态的对象。

如果StatefulWidget的创建者使用GlobalKey作为其 键，则StatefulWidget在从树中的一个位置移动到另一个位置时保持相同的State对象。由于具有GlobalKey的窗口小部件可以在树中的至多一个位置使用，因此使用GlobalKey的窗口小部件最多只有一个关联元素。当通过将与该窗口小部件关联的（唯一）子树从旧位置移植到新位置（而不是在该位置重新创建子树）时，框架利用此属性将全局键从树中的一个位置移动到另一个位置时利用此属性。新的位置）。与StatefulWidget关联的State对象与子树的其余部分一起被移植，这意味着State对象在新位置被重用（而不是被重新创建）。但是，为了有资格进行嫁接，必须将窗口小部件插入到从旧位置移除它的同一动画帧中的新位置。

StatefulWidget有两个主要类别。

首先是其中一个分配资源State.initState并在他们的处置State.dispose，但不依赖于InheritedWidget S或致电State.setState。这些小部件通常在应用程序或页面的根目录中使用，并通过ChangeNotifier， Stream或其他此类对象与子小部件进行通信。遵循这种模式的有状态小部件相对便宜（就CPU和GPU周期而言），因为它们构建一次然后永不更新。因此，它们可能有一些复杂和深刻的构建方法。

第二类是使用State.setState或依赖于 InheritedWidget的小部件。这些通常会在应用程序的生命周期内重建多次，因此最小化重建此类窗口小部件的影响非常重要。（他们也可以使用State.initState或 State.didChangeDependencies并分配资源，但重要的是他们重建。）

可以使用几种技术来最小化重建有状态窗口小部件的影响：

StatelessWidget类

一个不需要可变状态的小部件。

无状态窗口小部件是一个窗口小部件，它通过构建一个更具体地描述用户界面的其他窗口小部件来描述用户界面的一部分。构建过程以递归方式继续，直到用户界面的描述完全具体（例如，完全由RenderObjectWidget组成，其描述具体的RenderObject）。

当您描述的用户界面部分不依赖于对象本身的配置信息以及窗口小部件膨胀的BuildContext时，无状态窗口小部件非常有用。对于可以动态更改的组合，例如由于具有内部时钟驱动状态或依赖于某些系统状态，请考虑使用StatefulWidget。

无状态窗口小部件的构建方法通常仅在以下三种情况下调用：第一次将窗口小部件插入树中，窗口小部件的父窗口更改其配置时，以及何时依赖于更改的InheritedWidget。

如果窗口小部件的父级将定期更改窗口小部件的配置，或者它依赖于经常更改的继承窗口小部件，则优化构建方法的性能以保持流畅的呈现性能非常重要。

可以使用几种技术来最小化重建无状态窗口小部件的影响：