flutter第七篇:文本框、单选框、复选框、

文本框

TextField表示文本框,默认只有底部边框,如果想变成四边形的框,需要利用其decoration属性,指定其值为InputDecoration实例,指定InputDecoration的border属性值为OutlineInputBorder()。如果想去掉所有边框,则需要把border指定为InputBorder.none。

如果想让文本框有初始值,则需要利用TextField的controller属性,controller属性是个TextEditingController实例,通过其text属性指定文本框里的初始值。如果想让文本在竖直方向上居中,则需要设置InputDecoration的contentPadding属性,上下都设为0。但是在外部容器高度较小时(小于48),即使设置了contentPadding,也不会居中。因为TextField的高度固定是48,当用Container限制其高度,在Container高度小于48时,TextField的高度等于Container的高度,在Container的高度大于48时,TextField的高度还是48。当TextField高度小于48时,用contentPadding就实现不了居中了。此时需要用planB,见https://juejin.cn/post/7106053918353784868

如果想要有placeholder,则需利用InputDecoration的hintText属性。如果想修改hintText的字体大小、颜色等,需要设置InputDecoration的hintTextStyle属性,在TextStyle中设置fontSize、fontWeight等。如果想在hintText前面加个图标,需要设置InputDecoration的prefixIcon属性。如果想在TextField前面放个图标,则可以用InputDecoration的icon属性。prefixIcon属性和icon属性的区别在于,前者是在TextField内部的,而后者是在TextField外部的。如果想给TextField设置背景颜色,则需要先设置InputDecoration的filled属性为true,再设置fillColor属性即可。

如果想让文字在水平方向上居中,则需要设置textAlign为TextAlign.center,默认从最左侧开始。

如果想调整文本框的字体大小,则需要设置TextField的style属性,在TextStyle中设置fontSize、fontWeight等。

如果想一进入页面就让TextField获得焦点并唤起键盘,则需要设置其autoFocus属性值为true。

如果想唤起键盘时键盘上只有数字,则需要把keyboardType设置为TextInputType.number,但其实此时键盘上还有一些标点符号。keyboardType类型除了TextInputType.number,还有很多,如TextInputType.phone、TextInputType.emailAddress等,适用于不同的场景。

如果想限制只能输入数字,则需要设置inputFormatters为[FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))]。

如果想限制文字的最大长度,则需要设置maxLength属性。设置了maxLength属性后,在文本框右下角会有型如"1/11"的计数提示,如果想自定义此计数提示,则需要设置InputDecoration的counterText属性,如果设为空字符串则会看不到计数提示。

如果想把普通输入框升级成密码输入框,则需要设置obscureText属性为true。

如果想在文本框左下角展示一些文字,则可以用InputDecoration的helperText属性。

如果想在左上角边框上展示一些文字,则可以用InputDecoration的labelText属性。如

果想禁用文本框的输入,则需要设置enabled属性为false,此时文本框将无法获得焦点,进而无法输入。

利用TextField的onChange属性可以拿到文本框中的内容,每当文本框的内容变化时,都能拿到最新的内容。onChange属性值是一个函数,入参即是文本框的内容。

利用TextField的onSubmitted属性,在点击虚拟键盘的回车后,可以拿到文本框的内容。onSubmitted属性值是一个函数,点击回车就会触发此函数执行,入参即是文本框的内容。

单选框、复选框

单选框用radio、radioListTile组件,复选框用checkbox、checkboxListTile组件。radio就是一个单选框,不包含框前面的文本,文本需要Text。 而radioListTile可以利用其title属性放文本。radioListTile独占一行,文本和复选框两边对齐。多个radioListTile放在一个Row中会报错。checkbox、checkboxListTile同理。

CircularProgressIndicator表示转圈圈的进度条,LinearProgressIndicator表示从左到右的横线进度条,可以利用color属性和backgroundColor属性设置已完成进度的颜色和未完成进度的颜色,利用value设置已完成进度的值。CupertinoActivityIndicator表示苹果专用的菊花形状的进度条,使用时需要引入cupertino.dart,可以利用radius设置菊花的半径,利用color设置菊花的颜色。

利用InkWell可以给任意组件添加点击事件,如单击、双击、长按等。

日期类DateTime,时间类TimeOfDay。showDatePicker展示日期选择控件,showTimePicker展示时间选择控件。控件默认是英文,可以配置国际化来展示中文。

利用json.encode(m)来把对象转成字符串,用json.decode(s)来把字符串转成Map。使用时需要import 'dart:convert';

利用dio包可以发起http请求。https://pub.dev/packages/dio

sleep:await Future.delayed(const Duration(seconds: 5));

 

posted on 2024-10-25 14:44  koushr  阅读(43)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示