和尚刚学习了 TextField 的基本用法,今天特意学习一下 TextField InputDecoration 文本框装饰器的相关内容; InputDecoration 源码分析 const...不仅提供了全面的构建装饰器的方式,还提供了简单便利的构建方式 collapsed 默认是无边框的,且无法设置标签等其他属性; 案例尝试 icon 为装饰器外小图标,可灵活设置图标或其他 Widget,...errorText 为文本框错误提示信息,一般在文本框底部,当设置 errorText 时不展示 helperText,整体默认为红色;errorStyle 为错误提示信息样式属性;errorMaxLines...OutlineInputBorder 一般设置为包围的圆角边框;相较于 UnderlineInputBorder 多了 gapPadding 属性,用于浮动的 labelText 与边框的间距; return...---- 文本输入框确实有很多细节需要研究和尝试,和尚仅初步了解,有待深入研究;且和尚建议时常升级 Flutter 版本,可能对于同一个 Widget 会有或多或少的更新,如有问题请多多指导
基本属性 TextField是一个material design风格的输入框,本身有多种属性,除此之外装饰器InputDecoration也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。...先看一下源码,重要或常用的属性会有注释。...this.enableInteractiveSelection, this.onTap,//点击事件 this.buildCounter, this.scrollPhysics, }) 参数很多,其实日常开发中连一半的属性都用不到...TextField中的内容。...总结 以上就是全部介绍了,然后写了个登录注册的小demo: github:https://github.com/yechaoa/wanandroid_flutter 官方文档:https://api.flutter.dev
在Flutter中,UI小控件有两种设计风格,一种是Material设计,这是安卓的官方设计风格,另一种则是Cupertino风格,是iOS的官方设计风格。...需使用Text.rich构造方法创建 Image 构造方法 Image : 从ImageProvider中获取图片 Image.asset :加载资源目录中的图片 Image.network:加载网络图片...装饰器 InputDecoration 属性名 类型 简述 icon Widget 设置位于输入框前的图标 labelText String 设置描述输入框的标签 labelStyle TextStyle...,则使用fillColor指定的颜色填充 fillColor Color 输入框的背景颜色 errorBorder InputBorder errorText不为空,且输入框没有焦点时要显示的边框 focusedBorder...属性需要我们提供一个TextInputFormatter 类型的列表,该类有三个子类提供我们使用 WhitelistingTextInputFormatter 白名单校验,只允许输入符合规则的字符 BlacklistingTextInputFormatter
基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本的样式在style中设置,类型为TextStyle,TextStyle中包含很多文本样式属性...,值说明如下: left:左对齐 right:右对齐 center:居中 justify:两端对齐,此属性中文存在bug(Flutter版本:1.17.3)也可以在官方issue中关注此问题 start...设置全局字体样式: 在MaterialApp的theme中设置如下 MaterialApp( title: 'Flutter Demo', theme: ThemeData( ......(color: Colors.grey), hintMaxLines: 1 ), ) errorText显示在输入框的左下部,默认字体为红色,用法如下: TextField( decoration...: InputDecoration( errorText: '用户名输入错误', errorStyle: TextStyle(fontSize: 12), errorMaxLines
序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人的哈,所以我们更要抓紧学习了;之前我写了两篇文章来介绍...Flutter中的Text组件 和 Flutter中的Image组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图: image TextFiled组件的API 先来看一下TextFiled...,比如前后图标,提示文字,错误文字,占位文字等等,下面来看一下可以设置的东西(有点多,大家可以有需要的时候再去挨个了解): 1const InputDecoration({ 2 this.icon...6、textInputAction 这个属性用来控制弹出的键盘中右下角的按钮,这是一个枚举值,有很多种形式(下面举几个例子): TextInputAction.done:完成按钮 TextInputAction.go...7、TextCapitalization 这个属性用来控制输入内容的大小写设置,同样是一个枚举值,来看一下具体的值及效果: TextCapitalization.words:输入的每个单词的首字母大写(
是表单相关控件,类似于H5中form。...FormField FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField。...validator验证函数,输入的值不匹配的时候返回的字符串显示在TextField的errorText属性位置,返回null,表示没有错误。...在使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的save、validate、reset等方法,一般通过如下方法设置: final _formKey...欢迎加入Flutter的微信交流群(mqd_zzy),让我们一起学习,一起进步,开始我们的故事,生活不止眼前的苟且,还有诗和《远方》。
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 Form、FormField、TextFormField是表单相关控件...,类似于H5中form。...FormField FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField。...validator验证函数,输入的值不匹配的时候返回的字符串显示在TextField的errorText属性位置,返回null,表示没有错误。...在使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的save、validate、reset等方法,一般通过如下方法设置: final _formKey
,样式如下: 字体 在 flutter 中使用字体需要两个步骤,首先是在 pubspec.yaml文件中声明,然后通过 textStyle 属性使用字体 flutter: fonts:...同个这个构造可以轻松创建出带图标的按钮,如 RaisedButton 等 自定义按钮外观 按钮的外观可以通过属性来定义,不同的按钮属性都大同小异,以 FlatButton 为例,看一下常用的按钮属性,详细的可以查看...0.0,// 禁用时的阴影 ... } 复制代码 通过设置以上属性即可设置阴影,elevation 这个属性会在很多组件中见到,都是用来控制阴影的 图片 在 Flutter 中,我们可以通过 Image...FadeInImage 之后会在图片的加载过程中显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter 中,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...( errorText: "请输入内容", ), ) 去除下划线 decoration: InputDecoration.collapsed(hintText: "用户名或邮箱")), 边框
《在Flutter和androidStudio中制作登录表单》 在本教程中,我将向您展示如何在 Flutter 和 Android studio 中制作漂亮的登录表单, 您将学习如何制作背景图像、如何在...Flutter中制作圆形按钮、如何添加一些不透明度以及如何添加图标到您的文本字段。...import 'dart:ffi'; import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home...horizontal: 35.0, vertical: 22.0), child: TextField( decoration: InputDecoration...horizontal: 35.0, vertical: 12.0), child: TextField( decoration: InputDecoration
和尚查了一下官网,调整方式很简单,将根 widget 调整为 body: new ListView(),Flutter 中的 ListView 不仅代表列表 (ListView/RecycleView)...TextField 自带的属性【后缀图标 suffixIcon】,文本框 TextField 提供了很多便利的属性,例如:【前缀图标 prefixIcon】【文本框前图标 icon】; new Expanded...优化三:调整键盘弹出样式 设置文本框 TextField 中 keyboardType: TextInputType.phone, Flutter 提供了多种弹出键盘的方式:text/datetime...优化四:根据输入文本框添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框的功能,如:showDialog/showMenu/showModalBottomSheet 等,和尚采用的是对话框方式...相关注意 Flutter 提供了很多便利的小图标,使用起来非常方便,和尚但就一个小【×】找到了好几个类似的图,希望可以多多尝试,体验一下。
Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下: 1. maxLines 最大输入行。...当输入框有默认的输入值时就需要用到文本控制器; 5. decoration 装饰器。主要的属性如下: (1). hintText 占位提示符。...类似HTML中的 placeholder; (2). border 文本边框。...:flutter/material.dart'; class TextFieldPage extends StatelessWidget { const TextFieldPage({Key...给输入框加上默认的值,代码如下: import 'package:flutter/material.dart'; class TextFieldPage extends StatefulWidget
inputFormatters 为格式验证,例如原生 Android 中通常会限制输入手机号或其他特殊字符,在 Flutter 中也可以借此来进行格式限制,包括正则表达式;使用时需要引入 package...WhitelistingTextInputFormatter 仅允许输入白名单中字符;如 digitsOnly 仅支持数字 [0-9]; c....; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型...设置 InputDecoration 中 **decoration** 属性为空;但是底部有空余,只是隐藏而并非消失; return TextField(decoration: InputDecoration...文本框是日常开发中必不可少的组件,和尚还在探索过程中,如有问题请多多指导! 来源: 阿策小和尚
相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法。...然后我们为输入框做一些其他的效果,如提示文字,icon、标签文字等。...可以看到,我先添加了一个decoration属性. decoration属性介绍: border:增加一个边框, hintText:未输入文字时,输入框中的提示文字, prefixIcon:输入框内侧左面的控件...当按下一个未完成操作(如“next”或“previous”)时,用户的内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。...TextCapitalization TextField提供了一些有关如何使用户输入中的字母大写的选项。
本文,我将解析怎么前构建一个用户交互的登录页面。这里,我使用 TextField 挂件,这方便用户输入用户名和密码。还使用 FlatButton 挂件,来处理一些动作。...MyApp 类中添加了一个 LoginDemo 类作为 home 属性的参数。...UI 布局中,所有的挂件都会放在 Column 挂件中,然后存放在脚手架的 body 中。...'), ), ), flutter-logo.png 文件存放在 asset/images 文件夹中。...obscureText 属性值为 true 的时候,帮助我们对 TextField 展示特殊的字符,而不是真正的文本。
和尚最近在利用业余时间学习 Flutter,还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手,在实践过程中结合官网文档才能更快的学习和理解。...在 pubspec.yaml 文件中添加相应的图片文件指向,如:- images/icon_username.png,特别注意:images 与 '-' 之间一定要有空格!!! ? 3....Content 中添加图片即可,如: new Image.asset( 'images/ic_launcher.png', ), 2. Row 中如何添加输入框? ?...对于文本输入框中明文显示或密码显示,主要通过 obscureText: true, 属性,当该属性为 true 时为密码隐文展示; ? 3....Flutter 中 ' , ' 类似于 Java 中 ' ; ' 建议编辑完一个属性后添加 ' , ' 而且 Flutter 很贴心的地方是默认后面会有提示,对应的 ' ) ' 级别,方便修改的时候查找
本文主要介绍使用 Flutter 制作地图应用 在本文中,我将向您展示如何使用 Flutter 向您的应用程序添加映射功能。...依赖关系 创建一个新的 Flutter 项目,然后添加一些我们将要使用的依赖项。打开您的pubspec.yaml文件并在依赖项中添加这些行。...TextField事件监听 日常开发中,我们往往希望在三个地方TextField可以给我们回调。 输入文字的过程中,这样方便我们在用户输入的时候就可以判断输入内容是否合法。...TextEditingController来捕捉输入内容,TextField接收一个TextEditingController对象来作为controller参数, 通过TextEditingController的属性...如果在开发过程中,我们希望通过点击页面上某个按钮来结束TextField输入并且获取到当前的输入内容。使用FocusNode是很有效的。
Google自2017年第一次提出Flutter,到2018年Beta,再加之RN的各种风波与问题,使得Flutter的热度不断上升,国内不少公司都公布Flutter在其产品中的应用,如美团,闲鱼等。...如: Center是一个可以把子View放置在中央的容器; Row对应的就是LinearLayout + Horizontal,Column对应的就是LinearLayout + Vertical,他们都具备一个属性叫做...实际上还是需要在Flutter App的Android壳子中注册这个filter,然后在FlutterActivity中拿到存下来。...TextField( decoration: InputDecoration(hintText: "This is a hint", errorText: _getErrorText()),...2.在 Windows 上搭建Flutter 开发环境 3.编写您的第一个 Flutter App 4.Flutter 开发环境搭建和调试 5.Dart 语法篇之基础语法(一) 6.Dart 语法篇之集合的使用与源码解析
同时,因为这两个方法是异步实现的,所以,这里使用了ES8中的 async...await 下面我们来看看具体的代码实现 var _chooseDate; var _chooseTime; _showDatePicker...选择时间日期还是挺简单的,不过需要注意的是 flutter: 选择的日期是:2019-07-30 00:00:00.000 flutter: 选择的时间是:TimeOfDay(21:34) 两个方法选择时间...输入框 TextField TextField 是Flutter中的用户输入框,属性挺多的,不同的配置出不同的效果,就像是HTML中的 input 一样。...decoration ==》 InputDecoration decoration 用于对输入框进行样式修饰,这个属性很重要,下面图中的修饰都是使用了 decoration ?...,常用的属性也就是上面涉及到的属性 关于 TextField 的其他的属性,可以自己尝试一下,比如自动聚焦,光标设置等等,在最上面的属性列表中都有注释,可以自行研究。
在 Flutter中,Form和TextFormField是输入文本时非常有用的Widget。 我们如何在键盘上按“下一步”时,正确的移动输入焦点的呢?...使用FocusScopeNode就很容易做到这种效果。...children: [ // email TextFormField( decoration: InputDecoration...如果想移动到上一个焦点,使用_node.previousFocus()就可以轻松办到。...❝注意:这些方法也使用TextField,即使没有Form也同样可以. ❞ 细节很重要,这些小tips可以节省时间并且也会让我们的用户满意。
『Flutter』常用组件 TextField1.前言经过上一篇文章的介绍,给大家讲述了 Flutter 中的有无状态组件,以及有状态组件的使用方法,本文将继续围绕着 Flutter 中常用的组件来讲述一下...,因为这些组件在开发中使用的频率非常高,所以大家一定要掌握好。...TextField 允许用户输入文本,并且可以通过各种属性来定制其外观和行为。2.2.常用属性controller:类型为 TextEditingController,用于控制文本的内容。...decoration:类型为 InputDecoration,用于定制 TextField 的外观,如提示文本、标签、边框等。keyboardType:用于指定键盘类型,例如数字键盘、邮箱键盘等。...如上只是一个简单的例子,很多属性大家自行到时候用到查一下相关资料即可。
领取专属 10元无门槛券
手把手带您无忧上云