flutter 文本框使用
程序员文章站
2022-03-04 20:49:16
...
const TextField({
Key key,
// 编辑框的控制器,跟文本框的交互一般都通过该属性完成,如果不创建的话默认会自动创建
this.controller,
// 用于控制`TextField`是否占有当前键盘的输入焦点, 使我们和键盘交互的`handle`
this.focusNode,
// 用于控制`TextField`的外观显示,如提示文本、背景颜色、边框等
this.decoration = const InputDecoration(),
// 键盘类型
TextInputType keyboardType,
// 决定键盘右下角按钮显示的内容
this.textInputAction,
// 设置什么情况下使用大写字母, 默认不使用大写字母
this.textCapitalization = TextCapitalization.none,
// 正在编辑的文本样式, `TextStyle`
this.style,
// 输入框文本的对其方式
this.textAlign = TextAlign.start,
// 输入框文本的其实位置
this.textDirection,
// 是否自动获取焦点, 默认`false`
this.autofocus = false,
// 是否隐藏正在编辑的文本,如用于输入密码的场景等,文本内容会用“•”替换, 默认`false`
this.obscureText = false,
// 是否自动校验, 默认`false`
this.autocorrect = true,
// 输入框能输入的最大行数
this.maxLines = 1,
// 输入框能输入的最多字符个数
this.maxLength,
// 达到最大长度(`maxLength`)时是否阻止输入, 默认`true`: 不能继续输入, `false`可以继续输入
this.maxLengthEnforced = true,
// 输入文本发生变化时的回调
this.onChanged,
// 点击键盘完成按钮时触发的回调,该回调没有参数,(){}
this.onEditingComplete,
// 点击键盘完成按钮时触发的回调,该回调有参数,参数即为当前输入框中的值。(String){}
this.onSubmitted,
// 对输入文本的校验
this.inputFormatters,
// 输入框是否可用, `false`则输入框会被禁用
this.enabled,
// 光标的宽度
this.cursorWidth = 2.0,
// 光标的圆角
this.cursorRadius,
// 光标的颜色
this.cursorColor,
// 键盘的外观, Brightness.light和dark
this.keyboardAppearance,
// 当TextField滚动时, 设置文本字段在滚动后的位置与可滚动项的边缘的距离
this.scrollPadding = const EdgeInsets.all(20.0),
// 长按输入的文本, 设置是否显示剪切,复制,粘贴按钮, 默认是显示的
this.enableInteractiveSelection = true,
// 点击输入框时的回调(){}
this.onTap,
})
示例代码
用到了吐司插件 在pubspec.yaml 导入
oktoast: ^2.2.0
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
void main() => runApp(TextFiedDemo());
class TextFiedDemo extends StatefulWidget {
@override
_TextFiled createState() => _TextFiled();
}
class _TextFiled extends State<TextFiedDemo> {
TextEditingController userController = TextEditingController();
TextEditingController passController = TextEditingController();
@override
Widget build(BuildContext context) {
// TODO: implement build
return OKToast(
child: MaterialApp(
home: Scaffold(
body: new ListView(
children: <Widget>[
TextField(
decoration: new InputDecoration(
hintText: "This is a hint", helperText: "官方表单Demo"),
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(labelText: "数字优先的文本框"),
),
TextField(
decoration: new InputDecoration(
// 添加一个图标
icon: Icon(Icons.phone),
labelText: "请输入你的用户名",
helperText: "带图标和label的文本输入框",
),
),
TextField(
decoration: new InputDecoration(
labelText: "请输入密码",
icon: Icon(Icons.lock),
helperText: "带图标和label的密码输入框",
),
// 是否隐藏输入
obscureText: true,
),
Text(
'模拟登陆',
style:
TextStyle(fontSize: 20, height: 3, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
TextField(
controller: userController,
//控制器,控制TextField文字 同 Android View id
decoration: new InputDecoration(
icon: Icon(Icons.phone), //添加一个图标
hintText: '请输入你的用户名',
),
autofocus: false,
),
TextField(
controller: passController,
decoration: new InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
icon: Icon(Icons.lock), //添加一个图标
hintText: '请输入密码',
),
obscureText: true, //
),
new Container(
width: 340.0,
padding: new EdgeInsets.all(20),
child: new Card(
color: Colors.blue,
elevation: 16.0,
child: new FlatButton(
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
'登录',
style: new TextStyle(
color: Colors.white, fontSize: 16.0),
),
),
onPressed: _login))),
],
))),
);
}
//登陆校验
void _login() {
print({'用户名': userController.text, '密码': passController.text});
if (userController.text.isEmpty) {
showToast('请输入用户名!', position: ToastPosition.bottom);
} else if (passController.text.isEmpty) {
showToast('请输入密码!', position: ToastPosition.bottom);
} else if (userController.text == 'lx' && passController.text == '123') {
showToast('登陆成功!', position: ToastPosition.bottom);
userController.clear();
passController.clear();
} else {
showToast('用户密码错误!', position: ToastPosition.bottom);
}
}
void onTextClear() {
setState(() {
userController.clear();
passController.clear();
});
}
}
推荐阅读
-
安卓中使用HttpURLConnection连接网络简单示例 --Android网络编程
-
node.js中的fs.linkSync方法使用说明_node.js
-
在Word2010文档中使用“即点即输”功能
-
在PPT中使用快捷键来快速定位到想要的某一张幻灯片页面上
-
编写一个函数 reverse_string(char * string)(递归实现) 实现:将参数字符串中的字符反向排列。 要求:不能使用C函数库中的字符串操作函数。
-
ajax根据ID查询数据库并返回Json格式数据返回js,使用append显示到页面。判断json值为[]或者[[]]的问题。
-
PowerPoint文本框输入使用字体中的下标效果为字符设置下标
-
WPS文字2013中使用查找功能把邮箱地址一次性全部提取出来
-
没有图片处理工具使用WPS文字如何将图片变为灰白色
-
输入编号会默认转为自动编号 使用Word自动编号会打乱已有排版