日期时间选择 Flutter自带的 showDatePicker 和 showTimePicker 两个方法可以进行时间和日期的选择。...选择时间日期还是挺简单的,不过需要注意的是 flutter: 选择的日期是:2019-07-30 00:00:00.000 flutter: 选择的时间是:TimeOfDay(21:34) 两个方法选择时间...选择时间是使用的 TimeOfDay,选择日期使用的是 DateTime ,两个是不同的方法,没有选择日期又选择时间的,或许在dart.pub上面有一些第三方的插件可以。...输入框 TextField TextField 是Flutter中的用户输入框,属性挺多的,不同的配置出不同的效果,就像是HTML中的 input 一样。...,常用的属性也就是上面涉及到的属性 关于 TextField 的其他的属性,可以自己尝试一下,比如自动聚焦,光标设置等等,在最上面的属性列表中都有注释,可以自行研究。
(在不必要的情况下,建议不修改type)。 共有的表单字段方法 每个表单字段都有两个方法:foucs()和blur()。...);//得到value值 PS:使用表单的value是最推荐使用的,它是HTML DOM中的属性,不建议使用标准DOM的方法。...alert(textField.defaultValue);//得到最初的value值 选择文本 使用select()方法,可以将文本框里的文本选中,并且将焦点设置到文本框中。...} } PS:有一个最大的问题,就是IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符释放鼠标键后才触发。...有一种做法是判断字符是否合法,这是提交后操作的。那么我们还可以在提交前限制某些字符,还过滤输入。
0.0,// 禁用时的阴影 ... } 复制代码 通过设置以上属性即可设置阴影,elevation 这个属性会在很多组件中见到,都是用来控制阴影的 图片 在 Flutter 中,我们可以通过 Image...,使用 FadeInImage 之后会在图片的加载过程中显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter 中,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...,可以通过它设置/获取编辑框的内容,选择编辑框的内容,监听编辑框文本改变事件。...) controller 还可以用来设置默认值,选择文本等 _nameController.text="hello world!"...,//TODO 这里设置的不生效,日后解决 表单 Form 在实际开发中,在请求接口之前会对输入框中的数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个
老孟导读:今天分享StackOverflow上高访问量的20大问题,这些问题给我一种特别熟悉的感觉,我想你一定或多或少的遇到过,有的问题在stackoverflow上有几十万的阅读量,说明很多人都遇到了这些问题...数据呢: 在_TestState也定义同样的参数,此方式比较麻烦,不推荐。...: Color(0xb74093) 因为Color的构造函数是ARGB,所以需要加上透明度,正确用法: Color(0xFFb74093) 如何给TextField设置初始值 class _FooState...是HomePage的,HomePage并没有包含在Scaffold中,所以并不是调用在Scaffold中就可以,而是看context,修改如下: _scaffoldKey.currentState.showSnackBar...dart 2、Window执行如下命令: taskkill /F /IM dart.exe 解决办法二: 删除flutter SDK的目录下/bin/cache/lockfile文件。
和尚最近在学习基础的 Flutter Widget,原因在于很多基础的组件有很多容易忽视的注意事项,了解并熟悉后对整体的开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...decoration 为边框修饰,可以借此来调整 TextField 展示效果;可以设置前置图标,后置图片,边框属性,内容属性等,和尚会在后续集中尝试;若要完全删除装饰,将 decoration 设置为空即可...inputFormatters 为格式验证,例如原生 Android 中通常会限制输入手机号或其他特殊字符,在 Flutter 中也可以借此来进行格式限制,包括正则表达式;使用时需要引入 package...当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理; 在 pubspec.yaml 中集成 flutter_localizations...; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型
本教程将向您展示如何在 Flutter 中设置背景图像。 在 Flutter 应用程序中设置背景图像的常用方法是使用DecorationImage....Container 的构造函数有一个名为decoration的参数,用于在 child 后面绘制装饰。对于该参数,您需要传递一个Decoration值。Flutter 中有一些Decoration类。...它可以通过传递一个BoxFit枚举值作为fit参数来完成。可能的值为: fill:设置源填充目标框。它可能会扭曲源的纵横比。 contain:在目标框内将源设置为尽可能大。...正如您在上面的输出中看到的那样,当显示键盘时,部分内容是不可见的。一种可能的解决方法是将 Scaffold 包裹在带有背景图像的 Container 中。...还可以定义图像应如何刻入可用空间并设置图像的不透明度。如果应用程序包含可能触发屏幕键盘的文本字段,您还需要处理如上所示的情况。 对于其他自定义,您可以阅读我们的教程,?
在Flutter中,我们提供了两种选择: 给 TextField 或 TextFormField 绑定 onChanged() 回调 Supply an onChanged() callback to...在下面的示例中,每次 text 的值改变,会在控制台中打印出当前文本框的值。...使用 TextEditingController 另外一种更强大但是更复杂的方法是绑定 TextEditingController 作为 TextField 和 TextFormField 的 controller...在下面的示例中,我们会在 _MyCustomFormState 类中创建一个方法,实现打印出文本框当前值。...并且在 text 值变化时运行 _printLatestValue() 方法。
Flutter中的Text组件 和 Flutter中的Image组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图: image TextFiled组件的API 先来看一下TextFiled...的构造方法: 1const TextField({ 2 Key key, 3 this.controller, 4 this.focusNode, 5 this.decoration...(通过controller.addListener()),可以获取输入框的值,可以设置输入框的值等等。...7、TextCapitalization 这个属性用来控制输入内容的大小写设置,同样是一个枚举值,来看一下具体的值及效果: TextCapitalization.words:输入的每个单词的首字母大写(...:默认情况,什么都不设置 8、onChanged 这个属性用来监听输入框的输入,类似Android的TextWatch,但是它只有输入后的值: 1new TextField( 2 onChanged:
插件,写这篇文章的时候,最新版本是 0.5.0+1,小伙伴们可以根据官网最新的版本进行替换,导入后我们就可以来看下如何实现文件的读写了。...path_provider用于获取手机的存储文件位置,一共有三个方法 getTemporaryDirectory临时目录,在 Android 中对应的方法为 getCacheDir,而在 iOS 中对应为...NSCachesDirectory,可以通过系统检测并清除 getApplicationDocumentsDirectory缓存目录,在 Android 中对应为 AppData文件夹,在 iOS 中对应为...因为在例子中,我们保存的数据相对比较简单,所以这边就不得不说另外一种更方便的持久化方式了 shared_preferences SharedPreferences 写 Android 的小伙伴对这个应该不陌生了...,但是该版本需要 flutter 1.2以上才行,所以我选择的是 sqflite 1.1.0,小伙伴可以根据自己的 flutter版本选择相应的 sqflite版本。
hintText: "我是点击后的提示", hintStyle: TextStyle(color: Colors.red), ),) hintText参数可以帮助我们设置一个点击后显示的文字...TextField事件监听 日常开发中,我们往往希望在三个地方TextField可以给我们回调。 输入文字的过程中,这样方便我们在用户输入的时候就可以判断输入内容是否合法。...输入完成的时候,这个时候我们可以拿到输入内容做一些操作。 与键盘事件的配合,在必要的时候回收键盘。 TextField提供了三个回调方法 onChanged 此方法是在输入有变化的时候就会回调。...参数是当前已经输入的内容 onSubmitted 此方法是在我们输入完成后,点击键盘上回车的时候回调。...不会带有参数 需要注意是onEditingComplete回调方法没有携带参数。如果我们需要在onEditingComplete方法中获取到当前的输入值。
在前面的文章中我们学习了Flutter中事件的处理,包括组件的单击、双击、长按、滑动等。想必大家多其已经有了一定的认识。 那么,这节我们主要介绍下Flutter中输入和选择组件的用法。...相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法。...可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。 当然,我们也可以为输入框做一些其他的效果,如提示文字,icon、标签文字等。...关于TextField的其他用法就不在一一介绍了,有兴趣的小伙伴可以自己尝试下。...小结 可以根据TextField的相关属性来完成特定的输入需求 CheckBox、Radio、Switch是开发中常用的选择组件 Slider滑块组件,可以满足用户对进度的精确控制 CheckboxListTile
在 Flutter 里 TextField 是一个比较复杂的控件,而在整个 TextField 里嵌套了许多不同实现的控件,它们组成了我们常用的输入框效果,如下图所示是关于 TextField 的主要构成部分...使用 RestorableInt 用于配置和保存 BottomNavigationBar 的 index ; 在 State 混入 RestorationMixin 并且在 restoreState 方法里恢复...;上述例子运行后通过打开模拟器开发者设置里的 Don't keep activities 就可以看到效果。...image 一般情况下是使用 MaterialApp 内部默认自带了一个 RootRestorationScope ,所以我们只需要给 MaterialApp 设置 restorationScopeId...所以本篇主要是通过介绍 TextField 的组成,以及解释内部各组成部分的作用,让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现,当遇上问题或者需求时,可以快速定位和解决问题,例如:
是表单相关控件,类似于H5中form。...autovalidate参数为是否自动验证,设置为true时,TextField发生变化就会调用validator,设置false时,FormFieldState.validate调用时才会回调validator...validator验证函数,输入的值不匹配的时候返回的字符串显示在TextField的errorText属性位置,返回null,表示没有错误。...在使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的save、validate、reset等方法,一般通过如下方法设置: final _formKey...save方法回调每一个FormField的save方法,通常情况下保存表单数据。
如果需要用户输入位于某个范围的值 , 就可以使用滑动条组件 ,比如调 色板中设置 RGB 的三个值所用的滑动条。当创建一个滑动条时,必须指定它的方向、初始值、 滑块的大小、最小值和最大值。...TextField 类的构造方法有4种重载形式,通过给参数赋值,可以设置文本框中的初始文本字符,以及文本框的列数。TextField类的构造方法见表。...通过给 Checkbox 类构造方法的参数赋值,可以设置复选框的文本标签内容,以及复选框的状态值。Checkbox类的构造方法见表。...) 选择指定索引的选项 void select(String str) 选择指定字符串的选项 列表(List) 列表是一种输入信息的组件,提供了一个可滚动的选项列表;通过设置,每次可以从中选择单项或多项作为输入...最后,将两个按钮添加到窗口的布局中,并设置窗口的最佳大小并可见。 这样,运行程序后,会显示一个窗口和两个按钮,点击按钮会显示对应的对话框。
Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕上的显示元素,而是一个描述显示元素的配置数据。...Flutter中真正代表屏幕显示元素的类是Element。 在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...Scaffold常用的属性: 1)appBar:用于设置顶部的标题栏,不设置就不显示; 2)body:Widget类型,显示Scaffold内容的主要容器。...dispose():当状态组件需要被永久地从视图树中移除时,调用dispose()。调用dispose()后,组件会被销毁,在调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。...如果没有提供controller,则TextField组件内部会自动创建一个。 focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互的一种常见方式。
其中 const 的值在编译期确定,final 的值要到编译时才确定。(ps Flutter 在 Release 下是 AOT 模式。) Dart 下的数值,在作为字符串使用时,是需要显式指定的。...= "999" 表示如果 AA 为空,给 AA 设置成 99。 Dart 方法可以设置 参数默认值 和 指定名称 。...Dart 中多构造函数,可以通过如下代码实现的。默认构造方法只能有一个,而通过Model.empty() 方法可以创建一个空参数的类,其实方法名称随你喜欢。...如下代码还可以看出,State 中主要的声明周期有 : initState :初始化,理论上只有初始化一次,第二篇中会说特殊情况下。...完整Item Flutter 中,你的布局很多时候就是这么一层一层嵌套出来的,当然还有其他更高级的布局方式,这里就先不展开了。
刚开始做Flutter文本框时候,使用的是TextField。似乎大多数情况下都没有问题。...但是现在有一种情况: **问题1: **当页面文本框中的初始值是动态的,从后台获取到的时候,应该怎么办呢? 这种情况下,说明创建TextEditingController时,并不知道文本内容。...这种情况我根本没遇到过,但是我觉得Flutter肯定有解决方法。...意思就是说,当不指定controller时,initialValue 就可以自动生成controller的初始值。 既然有解决方案,那么就是修改一下代码即可。...'Do not use the @ char.' : null; }, ) TextField: 例如制作一个显示文本框,框中提示输入文本框中的内容信息。 ?
,类似于H5中form。...autovalidate参数为是否自动验证,设置为true时,TextField发生变化就会调用validator,设置false时,FormFieldState.validate调用时才会回调validator...validator验证函数,输入的值不匹配的时候返回的字符串显示在TextField的errorText属性位置,返回null,表示没有错误。...在使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的save、validate、reset等方法,一般通过如下方法设置: final _formKey...save方法回调每一个FormField的save方法,通常情况下保存表单数据。
参数是点击的索引值 onTap: (index){ // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引...// 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration(color: Colors.white),...组件 ---- TextField 组件构造函数的可选参数 : 下面代码中的可选参数就是 TextField 组件可以设置的参数选项 ; class TextField extends StatefulWidget...参数是点击的索引值 onTap: (index){ // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引...// 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration(color: Colors.white),
其中 const 的值在编译期确定,final 的值要到编译时才确定。(ps Flutter 在 Release 下是 AOT 模式。) Dart 下的数值,在作为字符串使用时,是需要显式指定的。...= "999" 表示如果 AA 为空,给 AA 设置成 99。 Dart 方法可以设置 参数默认值 和 指定名称 。...参数类型 可以指定或者不指定。...Dart 中多构造函数,可以通过如下代码实现的。默认构造方法只能有一个,而通过Model.empty() 方法可以创建一个空参数的类,其实方法名称随你喜欢。...如下代码还可以看出,State 中主要的声明周期有 : initState :初始化,理论上只有初始化一次,第二篇中会说特殊情况下。
领取专属 10元无门槛券
手把手带您无忧上云