20 Flutter TextField单行文本和多行文本

TextField单行文本框和多行文本框

1.TextField

————————基本等价于Android中EditText，其中属性都有很多一致

1.属性

const TextField({
Key key,
this.controller, // 控制正在编辑文本
this.focusNode, // 获取键盘焦点
this.decoration = const InputDecoration(), // 边框装饰
TextInputType keyboardType, // 键盘类型
this.textInputAction, // 键盘的操作按钮类型
this.textCapitalization = TextCapitalization.none, // 配置大小写键盘
this.style, // 输入文本样式
this.textAlign = TextAlign.start, // 对齐方式
this.textDirection, // 文本方向
this.autofocus = false, // 是否自动对焦
this.obscureText = false, // 是否隐藏内容，例如密码格式
this.autocorrect = true, // 是否自动校正
this.maxLines = 1, // 最大行数
this.maxLength, // 允许输入的最大长度
this.maxLengthEnforced = true, // 是否允许超过输入最大长度
this.onChanged, // 文本内容变更时回调
this.onEditingComplete, // 提交内容时回调
this.onSubmitted, // 用户提示完成时回调
this.inputFormatters, // 验证及格式
this.enabled, // 是否不可点击
this.cursorWidth = 2.0, // 光标宽度
this.cursorRadius, // 光标圆角弧度
this.cursorColor, // 光标颜色
this.keyboardAppearance, // 键盘亮度
this.scrollPadding = const EdgeInsets.all(20.0), // 滚动到视图中时，填充边距
this.enableInteractiveSelection, // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
this.onTap, // 点击时回调
})

——————重要属性

decoration ——————装饰器，可以修改样式，padding，调整文字位置，提示文字，icon、标签文字等。
我们给上面的代码新增decoration属性
keyboardType ——————键盘输入类型(除了隐藏密码不能做到)
keyboardType: TextInputType.visiblePassword, 显示密码
obscureText——————密码和普通文本框，maxLine必须1，否则报错
textAlign ——————文字对齐方式
maxLines ——————多行
maxLength——————最多多少文字
onChanged ——————文字改变时回调
autofocus: true——————自动对焦，第一次进来就弹起键盘
onEditingComplete ————点击键盘按钮确认时触发
onSubmitted,  //同样是点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(String)
textInputAction ————修改键盘右小角按钮文字或图标（textInputAction: TextInputAction.go,）

2.TextField普通

class TextDemo extends StatelessWidget {const TextDemo({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Column(children: <Widget>[TextField(),SizedBox(height: 20),TextField(decoration: InputDecoration(hintText: "请输入搜索的内容", border: OutlineInputBorder()),),SizedBox(height: 20),TextField(maxLines: 4,decoration: InputDecoration(hintText: "多行文本框", border: OutlineInputBorder()),),SizedBox(height: 20),TextField(obscureText: true,decoration:InputDecoration(hintText: "密码框", border: OutlineInputBorder()),),SizedBox(height: 20),TextField(decoration: InputDecoration(border: OutlineInputBorder(), labelText: "用户名")),SizedBox(height: 20),TextField(obscureText: true,decoration: InputDecoration(border: OutlineInputBorder(),labelText: "密码",// labelStyle: TextStyle())),SizedBox(height: 20),TextField(decoration: InputDecoration(icon: Icon(Icons.people), hintText: "请输入用户名")),],),);}
}

3.添加TextEditingController进行文字上的监听获取

案例：实现登录

import 'package:flutter/material.dart';
void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home: Scaffold(appBar: AppBar(title: Text('FlutterDemo')),body: TextFieldAndCheckPage(),));}
}class TextFieldAndCheckPage extends StatefulWidget {@overrideState<StatefulWidget> createState() => TextFieldAndCheckPageState();
}class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {//手机号的控制器TextEditingController phoneController = TextEditingController();//密码的控制器TextEditingController passController = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('输入和选择'),),body: Column(children: <Widget>[TextField(controller: phoneController,keyboardType: TextInputType.number,decoration: InputDecoration(contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.phone),labelText: '请输入你的用户名)',helperText: '请输入注册的手机号',),autofocus: false,),TextField(controller: passController,keyboardType: TextInputType.number,decoration: InputDecoration(contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.lock),labelText: '请输入密码)',),obscureText: true),RaisedButton(onPressed: _login,child: Text('登录'),),],),);}void _login() {print({'phone': phoneController.text, 'password': passController.text});if (phoneController.text.length != 11) {showDialog(context: context,builder: (context) => AlertDialog(title: Text('手机号码格式不对'),));} else if (passController.text.length == 0) {showDialog(context: context,builder: (context) => AlertDialog(title: Text('请填写密码'),));} else {showDialog(context: context,builder: (context) => AlertDialog(title: Text('登录成功'),));phoneController.clear();}}void onTextClear() {setState(() {phoneController.clear();passController.clear();});}
}

20 Flutter TextField单行文本和多行文本相关推荐

CSS单行文本和多行文本
单行显示: p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap; } text-overflow 设置文本溢出 clip:默认 ...
NGUI 3.5教程（二）Label 标签 (Hello world)、多行文本
写在前面: 本文将创建NGUI的第一个样例.依照编程传统,第一个样例,就是做一个Hello world 显示出来.NGUI.我们用Label来实现 . 欢迎大家纠错.拍砖!原创非常辛苦,如有转 ...
如何快速将合并居中的单行文本变为多行以匹配不同内容
如何快速将合并居中的单行文本变为多行以匹配不同内容 **问题:**在Excel中将合并居中的单行文本变为多行以匹配不同内容,如下图,如果数量较少,很容易处理,如果数量很多,处理起来相对麻烦,本文尝试用 ...
TextBox 单行文本框，多行文本框
把TextBox的TextMode属性设置为MultiLine就变成了多行文本了 SingleLine - 默认.表示单行输入模式. MultiLine - 表示多行输入模式. Password - ...
【前端技巧】文本内容单行省略及多行省略
@Author:Outman @Date:2022-10-27 1.文本内容单行省略: .one-line-omission{/* 固定最大宽度 */max-width:200px;/* 不换行 */ ...
Flutter 从 TextField 安全泄漏问题深入探索文本输入流程
Flutter 的 TextField 相信大家都很熟悉,作为输入控件 TextField 经常出现在需要登录的场景,例如在需要输入密码的 TextField 上配置 obscureText: tru ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
Flutter TextField详解
文章目录基本属性 TextField InputDecoration 样式基础样式隐藏文本键盘类型键盘按钮大小写光标最多行数计数器图标提示文字去除下划线边框获取输入内容关 ...
Flutter TextField 交互实例 —— 新手礼包
大家好,我是 17. 新手礼包一共 3 篇文章,每篇都是描述尽量详细,实例讲解,包会! Flutter Row 实例 -- 新手礼包 Flutter TextField UI 实例 -- 新手礼包 F ...

20 Flutter TextField单行文本和多行文本

TextField单行文本框和多行文本框

1.TextField

2.TextField普通

3.添加TextEditingController进行文字上的监听获取

20 Flutter TextField单行文本和多行文本相关推荐

最新文章

热门文章