文章目录
1 TextField构造方法2 TextField主要属性3 示例说明3.1 默认展示3.2 多行输入3.3 密码输入3.4 游标颜色、粗细，控制输入长度3.5 下划线(隐藏)3.6 下划线(改变属性)3.7 圆角输入框3.8 带有图标输入框3.9 监听内容变化，获取输入框的内容3.10 改变键盘右下角的功能键3.11 改变键盘的输入类型4 完整代码5 运行效果6 github源代码7 结束语TextField是一个material design风格的输入框，其本身有很多属性，不过这些属性大家不必全部记住，只要会使用就可以。使用到了，可以直接在构造方法中进行查询
1 TextField构造方法
const TextField({Key key,this.controller,this.focusNode,this.decoration = const InputDecoration(),TextInputType keyboardType,this.textInputAction,this.textCapitalization = TextCapitalization.none,this.style,this.strutStyle,this.textAlign = TextAlign.start,this.textAlignVertical,this.textDirection,this.readOnly = false,this.showCursor,this.autofocus = false,this.obscureText = false,this.autocorrect = true,this.maxLines = 1,this.minLines,this.expands = false,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.dragStartBehavior = DragStartBehavior.start,this.enableInteractiveSelection,this.onTap,this.buildCounter,this.scrollController,this.scrollPhysics,})
2 TextField主要属性
3 示例说明
3.1 默认展示
只有一条下划线
TextField()
3.2 多行输入
TextField(maxLines: 4,decoration: InputDecoration(hintText: '多行文本'),),
3.3 密码输入
如果要使一个表单变成密码框，只需配置 obscureText 属性是 true
TextField(obscureText: true,decoration: InputDecoration(hintText: '密码框'),),
3.4 游标颜色、粗细，控制输入长度
TextField(autofocus: true,cursorColor: Colors.deepOrange,cursorRadius: Radius.circular(20.0),cursorWidth: 10.0,maxLength: 10,)),
3.5 下划线(隐藏)
TextField(autofocus: true,decoration: InputDecoration(border: InputBorder.none //隐藏下划线)),
3.6 下划线(改变属性)
默认下划线是跟随主题的红色，这里将其改为橘色700。
Container(padding: EdgeInsets.all(20),child: TextField(autofocus: true,decoration: InputDecoration(border: InputBorder.none //隐藏下划线)),decoration: BoxDecoration(// 下滑线橘色700，宽度3像素border: Border(bottom: BorderSide(color: Colors.orange[700], width: 3.0))),),
3.7 圆角输入框
TextField(autofocus: true,cursorColor: Colors.deepOrange,cursorRadius: Radius.circular(20.0),cursorWidth: 10.0,maxLength: 10,obscureText: true,decoration: InputDecoration(// 文本内容的内边距contentPadding: EdgeInsets.all(10.0),// 圆角矩形的输入框样式border: OutlineInputBorder(// 圆角半径 10borderRadius: BorderRadius.circular(10.0),)),)
3.8 带有图标输入框
TextField(decoration: InputDecoration(prefixIcon: Icon(Icons.lock),suffixIcon: Icon(Icons.remove_red_eye),labelText: "密码",hintText: "您的登录密码",hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0)),obscureText: true,)
3.9 监听内容变化，获取输入框的内容
如果我们要获取输入的内容，这时候可以通过onChange, onSubmitted
TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(suffixIcon: Icon(Icons.search),labelText: "用户名",helperText: '请输入用户名、手机号',hintText: "用户名或手机号",prefixIcon: Icon(Icons.person)),textInputAction:TextInputAction.go,// 将键盘显示类型设置为文本键盘keyboardType: TextInputType.text,)
3.10 改变键盘右下角的功能键
TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(suffixIcon: Icon(Icons.search),labelText: "用户名",helperText: '请输入用户名、手机号',hintText: "用户名或手机号",prefixIcon: Icon(Icons.person)),textInputAction:TextInputAction.go,// 将键盘显示类型设置为文本键盘keyboardType: TextInputType.text,)
3.11 改变键盘的输入类型
TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(prefixIcon: Icon(Icons.lock),suffixIcon: Icon(Icons.remove_red_eye),labelText: "密码",hintText: "您的登录密码",hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0)),obscureText: true,textInputAction:TextInputAction.go,// 将键盘显示类型设置为数字键盘keyboardType: TextInputType.number,)
4 完整代码
import 'package:flutter/material.dart';/// create at/// by laohe(老贺)/// describe：class TextFieldWidgets extends StatefulWidget {TextFieldWidgets({Key key}) : super(key: key);@override_TextFieldWidgetsState createState() => _TextFieldWidgetsState();}class _TextFieldWidgetsState extends State<TextFieldWidgets> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('TextFieldWidgets'),),body: Container(child: ListView(children: <Widget>[Text("1 默认展示",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(),),///默认展示Divider(),Text("2 多行输入",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(maxLines: 4,decoration: InputDecoration(hintText: '多行文本'),),),Divider(),Text("3 密码输入",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(obscureText: true,decoration: InputDecoration(hintText: '密码框'),),),Divider(),Text("4 游标颜色、粗细，控制输入长度",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(autofocus: true,cursorColor: Colors.deepOrange,cursorRadius: Radius.circular(20.0),cursorWidth: 10.0,maxLength: 10,)),Divider(),Text("5 下划线(隐藏)",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(autofocus: true,decoration: InputDecoration(border: InputBorder.none //隐藏下划线)),),Divider(),Text("6 下划线(改变属性)",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(autofocus: true,decoration: InputDecoration(border: InputBorder.none //隐藏下划线)),decoration: BoxDecoration(// 下滑线橘色700，宽度3像素border: Border(bottom: BorderSide(color: Colors.orange[700], width: 3.0))),),Divider(),Text("7 圆角输入框",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(autofocus: true,cursorColor: Colors.deepOrange,cursorRadius: Radius.circular(20.0),cursorWidth: 10.0,maxLength: 10,obscureText: true,decoration: InputDecoration(// 文本内容的内边距contentPadding: EdgeInsets.all(10.0),// 圆角矩形的输入框样式border: OutlineInputBorder(// 圆角半径 10borderRadius: BorderRadius.circular(10.0),)),)),Divider(),Text("8 带有图标输入框",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(decoration: InputDecoration(prefixIcon: Icon(Icons.lock),suffixIcon: Icon(Icons.remove_red_eye),labelText: "密码",hintText: "您的登录密码",hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0)),obscureText: true,)),Divider(),Text("9 监听内容变化，获取输入框的内容",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(suffixIcon: Icon(Icons.search),labelText: "用户名",helperText: '请输入用户名、手机号',hintText: "用户名或手机号",prefixIcon: Icon(Icons.person)),textInputAction:TextInputAction.go,// 将键盘显示类型设置为文本键盘keyboardType: TextInputType.text,)),Divider(),Text("10 改变键盘右下角的功能键",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(suffixIcon: Icon(Icons.search),labelText: "用户名",helperText: '请输入用户名、手机号',hintText: "用户名或手机号",prefixIcon: Icon(Icons.person)),textInputAction:TextInputAction.go,// 将键盘显示类型设置为文本键盘keyboardType: TextInputType.text,)),Divider(),Text("11 改变键盘的输入类型",style: TextStyle(color: Colors.black, fontSize: 18.0),textAlign: TextAlign.left,),Container(padding: EdgeInsets.all(20),child: TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(suffixIcon: Icon(Icons.search),labelText: "用户名",helperText: '请输入用户名、手机号',hintText: "用户名或手机号",prefixIcon: Icon(Icons.person)),textInputAction:TextInputAction.go,// 将键盘显示类型设置为文本键盘keyboardType: TextInputType.text,)),Container(padding: EdgeInsets.all(20),child: TextField(onChanged: (text) {//内容改变的回调print('change $text');},onEditingComplete:(){print('editing ');},onSubmitted: (text) {//内容提交(按回车)的回调print('submit $text');},decoration: InputDecoration(prefixIcon: Icon(Icons.lock),suffixIcon: Icon(Icons.remove_red_eye),labelText: "密码",hintText: "您的登录密码",hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0)),obscureText: true,textInputAction:TextInputAction.go,// 将键盘显示类型设置为数字键盘keyboardType: TextInputType.number,)),],)),);}}
5 运行效果
6 github源代码
TextFieldWidgets下载地址
如果总结的对您帮助，麻烦star！！！
7 结束语
对基本组件，只有经常在项目中使用才可孰能生巧，作出漂亮的合理的Widget出来。希望上面的讲解对大家有所帮助，对基本属性的学习，不用死记，只要练习写几个demo，然后自己尝试的改变一下属性看一下运行效果，很快就可以学会了。
