在Flutter中，常见的表单组件有TextField单行文本框、TextField多行文本框、CheckBox、Radio、Switch、CheckBoxListTile、RadioListTile、...TextField TextField有如下常见属性： maxLines，设置此参数可以将文本框改为多行文本框 onChanged，文本框改变的时候触发的事件 decoration——hintText...我们可以通过配置 TextField 的 onChanged 回调来监听输入框中文字的实时变化： import 'package:flutter/material.dart'; class HomePage...如果是单纯地只想获取输入框中文字的话，我们可以另外定义一个变量，然后通过配置TextField的onChanged回调来监听文字的变化。...Flutter为我们考虑到了这一点，所以给我们提供了CheckboxListTile组件。
本次要讲述的组件有：TextField2.TextField2.1.介绍Flutter 的 TextField 组件是一个用于文本输入的基础组件，它提供了用户输入文本的界面。...TextField 允许用户输入文本，并且可以通过各种属性来定制其外观和行为。2.2.常用属性controller：类型为 TextEditingController，用于控制文本的内容。...obscureText：一个布尔值，用于控制是否隐藏输入内容，常用于密码输入。onChanged：当文本发生变化时触发的回调函数。onSubmitted：用户在键盘上按下完成按钮时触发的回调函数。...enabled：一个布尔值，用于控制 TextField 是否启用。...TextField，它包含一个外边框和一个标签，并且还添加了对文本变化和提交的监听。
在前面的文章中我们学习了Flutter中事件的处理，包括组件的单击、双击、长按、滑动等。想必大家多其已经有了一定的认识。 那么，这节我们主要介绍下Flutter中输入和选择组件的用法。...TextField 顾名思义文本输入框，类似于Ios中的UITextField和Android中的EditText。主要是为用户提供输入文本提供方便。...我们增加一个keyboardType属性，把keyboardType设置为TextInputType.number ?...Column包含了两个TextField和一个RaisedButton。...在逻辑上，每当我们点击下面的按钮都会判断用户名密码是否是flyou和admin，并且使用控制器清空已经输入的用户名和密码。
和尚最近在学习基础的 Flutter Widget，原因在于很多基础的组件有很多容易忽视的注意事项，了解并熟悉后对整体的开发认知会有所提升；今天和尚学习一下 TextField 文本输入框；...this.maxLength, // 允许输入的最大长度 this.maxLengthEnforced = true, // 是否允许超过输入最大长度...autofocus 是否自动获取焦点，进入页面优先获取焦点，并弹出键盘，若页面中有多个 TextField 设置 autofocus 为 true 则优先获取第一个焦点； return TextField...focusNode 手动获取焦点，可配合键盘输入等减少用户操作次数，直接获取下一个 TextField 焦点； FocusScope.of(context).requestFocus(node); return..., BlacklistingTextInputFormatter.singleLineFormatter ]); onChanged 文本内容变更时回调，可实时监听 TextField 输入内容；
大多数情况下我们都需要显示的提供一个 controller 来与文本框交互，如果没有提供，则 TextField 会自动创建一个 focusNode ：用于控制 TextField 是否占有当前键盘输入的焦点...、他是我们和键盘交互的一个句柄（handler）。...obscureText ：是否隐藏正在编辑的文本，如输入密码等。...maxLines ：输入最大行数，默认为 1，如果为 null，则为无限制maxLength 和 maxLengthEnforced ：前者代表输入文本的最大长度，设置后输入框右下角会显示输入的文本计数..., }) 复制代码 autovalidate：是否自动校验输入内容，当 为 true 时，每一个自 FormField 都会自动校验合法性，并直接显示错误信息。
输入框 TextField TextField 是Flutter中的用户输入框，属性挺多的，不同的配置出不同的效果，就像是HTML中的 input 一样。..., //输入的文本位置 this.textDirection, //输入的文字排列方向，一般不会修改这个属性 this.autofocus = false, //是否自动获取焦点 this.obscureText...一起使用，在达到最大长度时是否阻止输入 this.onChanged, //输入文本发生变化时的回调 this.onEditingComplete, //点击键盘完成按钮时触发的回调，该回调没有参数...(String){} this.inputFormatters, //对输入文本的校验 this.enabled, //输入框是否可用 this.cursorWidth = 2.0, //光标的宽度...( // border 还有一个 UnderlineInputBorder 就是默认的 // InputBorder.none 可以设置为没有边框
2.3.2 文本框 文本框作为一个接收用户输入的组件，被广泛应用于表单构建、即时通讯、搜索等场景中。...Flutter 提供了两个开箱即用的文本框组件：TextField 和 TextFormField。 TextField TextField 是最常用的文本输入组件。...例如，我们希望根据用户输入的内容来返回的搜索结果。 那么如何每次在文本内容改变时调用回调函数呢？...在Flutter中，我们提供了两种选择： 给 TextField 或 TextFormField 绑定 onChanged() 回调 Supply an onChanged() callback to...给 TextField 或 TextFormField 绑定 onChanged() 回调 每当文本内容改变时，回调函数会被触发。
老孟导读：大家好，这是【Flutter实战】系列文章的第二篇，这一篇讲解文本组件，文本组件包括文本展示组件（Text和RichText）和文本输入组件（TextField），基础用法和五个案例助你快速掌握...技术和应用实战'), ]), ) TextField TextField是文本输入组件，即输入框，常用组件之一。...如果需要2个TextField的内容进行同步，只需要给2个TextField设置同一个controller即可实现。 keyboardType参数控制软键盘的类型，说明如下： text：通用键盘。...textCapitalization参数是配置键盘是大写还是小写，仅支持键盘模式为text，其他模式下忽略此配置，说明如下： words：每一个单词的首字母大写。...onChanged是当内容发生变化时回调，onSubmitted是点击回车或者点击软键盘上的完成回调，onTap点击输入框时回调，用法如下： TextField( onChanged: (value
1、常用属性值及含义 TextField常用属性值 含义 maxLength 最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串 maxLines 最大行数 autocorrect...是否自动更正 autofocus 是否自动对焦 obscureText 是否是密码 textAlign 文本对齐方式，与Text的textAlign属性含义一致 style 输入文本的样式 inputFormatters...允许的输入格式 onChanged 内容改变的回调 onSubmitted 内容提交(按回车)的回调 enabled 是否禁用 示例 TextField( maxLength...: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串 maxLines: 1,//最大行数 autocorrect: true,//是否自动更正...2、普通输入文本 最简易的TextFeild不包含提示文本。
Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下： 1. maxLines 最大输入行。...默认为单行输入框，配置此参数后则为多行输入框； 2. onChanged 输入改变触发的事件。可以获取当前输入改变以后的值； 3. obscureText 隐蔽的文本。...主要用于密码输入框； 4. controller 文本控制器。当输入框有默认的输入值时就需要用到文本控制器； 5. decoration 装饰器。...默认的输入框为一条下划线，添加此参数后4个边框都会显示； (3). labelText 输入框label名称； (4). labelStyle 输入框label的样式； 代码示例： import 'package...给输入框加上默认的值，代码如下： import 'package:flutter/material.dart'; class TextFieldPage extends StatefulWidget
Fluttertoast.showToast(msg: '请输入内容'); // 内容为空，则不写入并提醒 } else { // 内容不空，则判断是否已经存在，存在先删除，重新创建后写入信息...，但是 Flutter并没有自带的 shared_preferences功能，需要第三方插件来实现，引入 shared_preferences插件，写文章的时候最新版本是 ^0.5.1+2，还是先看下最后的效果..._internal(); return _instance; } } 最后代码的地址还是要的： 文章中涉及的代码：demos （https://github.com/kukyxs/flutter_arts_demos_app...） 基于郭神 cool weather接口的一个项目，实现 BLoC模式，实现状态管理：flutter_weather （https://github.com/kukyxs/flutter_weather...） 一个课程(当时买了想看下代码规范的，代码更新会比较慢，虽然是跟着课上的一些写代码，但是还是做了自己的修改，很多地方看着不舒服，然后就改成自己的实现方式了)：flutter_shop （https:/
文章目录 基本属性 TextField InputDecoration 样式 基础样式 隐藏文本 键盘类型 键盘按钮 大小写 光标 最多行数 计数器 图标 提示文字 去除下划线 边框 获取输入内容 关闭软键盘...基本属性 TextField是一个material design风格的输入框，本身有多种属性，除此之外装饰器InputDecoration也有多种属性，但都比较简单，所以不必担心，且听我娓娓道来。...TextAlign.start,//对齐方式 this.textDirection, this.autofocus = false,//自动聚焦 this.obscureText = false,//是否隐藏文本...，有值后右下角就会有一个计数器 this.maxLengthEnforced = true, this.onChanged,//输入改变回调 this.onEditingComplete...有两种方式： onChanged onChanged是输入内容改变时的回调，返回一个String类型的数值，可以用一个变量记一下 TextField(
如果没有提供controller，则TextField组件内部会自动创建一个。 focusNode：用于控制TextField组件是否获取输入焦点，它是用户和键盘交互的一种常见方式。...decoration：用于控制TextField组件的外观显示，如提示文本、背景颜色和边框。 textAlign：输入框内文本在水平方向的对齐方式。 textDirection：输入框内文本的方向。...keyboardType：用于设置该输入框默认的键盘输入类型。 textInputAction：回车键为动作按钮图标。 style：输入框的样式。...autofocus：是否自动获取焦点，默认为false。 obscureText：是否隐藏正在编辑的文本内容。...inputFormatters：指定输入格式，当用户输入的内容发生改变时，会根据指定的格式来进行校验。 enabled：是否禁用输入框。
前面介绍了Flutter的各个表单组件的运用，现将这些组件用来实现一个综合练习。...实现的效果图如下： 以下是代码实现，供大家参考： import 'package:flutter/material.dart'; class FormPage extends StatefulWidget...child: Column( children: [ // 单行文本输入框...TextField( decoration: InputDecoration(...TextField( maxLines: 4,
依赖关系 创建一个新的 Flutter 项目，然后添加一些我们将要使用的依赖项。打开您的pubspec.yaml文件并在依赖项中添加这些行。...10个字符", ),) maxLength可以设置最长字符个数，如果超过这个限制再次输入不会有显示，并且在TextField在有右下角有当前字符个数的标记，此处是10/10。...TextField被点击之后会显示为被选中状态，suffix默认不显示，只有当选中TextField的时候才会显示出来。...TextField事件监听 日常开发中，我们往往希望在三个地方TextField可以给我们回调。 输入文字的过程中，这样方便我们在用户输入的时候就可以判断输入内容是否合法。...输入完成的时候，这个时候我们可以拿到输入内容做一些操作。 与键盘事件的配合，在必要的时候回收键盘。 TextField提供了三个回调方法 onChanged 此方法是在输入有变化的时候就会回调。
hintText: "请输入搜索的内容", border: OutlineInputBorder(), ), ),...( hintText: "多行文本框", border: OutlineInputBorder(), ),...alertDialog() async { var result = await showDialog( barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框...simpleDialog() async { var result = await showDialog( barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框...Flutter学习就暂告一段落，Flutter中文网https://flutterchina.club/的文档很齐全，Flutter实战电子书https://book.flutterchina.club
介绍 「ETextField」 组件是 「Flutter Element」 组件系列中的输入组件，封装了系统的 「TextField」 组件，封装了一些常用的功能，并解决了两个常见的错误，详见： Flutter...中 TextField 组件必然会遇到的问题 引入 在 「pubspec.yaml」 中依赖 element_ui: ^0.0.1 import import 'package:element_ui...ETextField( obscureText: true, showPassword: true, ) 「height」：设置高度，设置不同的高度，文字都会居中，如果需要多行文本，查看 「...TextStyle(color: Colors.red), ), Text('/$maxLength'), ], ); }, ) 「style」：类型为...suffix、prefix、maxLines、keyboardType、textInputAction、textCapitalization、textAlign、textAlignVertical、onChanged
maxLengthEnforced bool 配合maxLength使用，达到最大长度时是否阻止输入 onChanged ValueChanged 输入文本发生变化时回调 onEditingComplete...，默认为true isDense bool 输入框是否为密集型，默认为false，为true时，图标及间距会变小 contentPadding EdgeInsetsGeometry 内间距 isCollapsed...bool 是否装饰的大小与输入字段的大小相同。...prefixIcon Widget 位于输入框内部起始位置的图标 prefix Widget 预先填充的Widget，跟prefixText只能同时出现一个 prefixText String 预填充的文本...同时使用 counterText String 右下方显示的文本，常用于显示输入的字符数量 counterStyle TextStyle counterText的样式 filled bool 如果为true
效果如下，单从界面上来看，我还是比较满意的。 ? ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事项，下面的ListView动态更新 2....通过一个TextField和RaisedButton进行拼合,样式什么的自己看，就不废话了。...用一个Map盛放文字和是否选中的 var todo = {}; 定义一个状态枚举 enum ShowType { all, todo, done } 类中设置初始变量...6.在适宜的状态值改变时，调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作...另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。
通过一个TextField和RaisedButton进行拼合,样式什么的自己看，就不废话了。...用一个Map盛放文字和是否选中的 var todo = {}; 定义一个状态枚举 enum ShowType { all, todo, done...6.在适宜的状态值改变时，调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作...= "") { todo[text] = false;//为Map添加数据 text = "";//输入框文字清空 setState(() {}); } }, ---- 2.4...另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
