TextField单行文本框和多行文本框1.textfield ——————3354
1 .属性
consttextfield(keykey，this.controller，//控件为文本this.focusNode， //键盘焦点this.decoration=constinputdecoration ) )正在编辑//边框装饰TextInputType keyboardType，//键盘类型this.textinpution //键盘操作按钮类型this.textcapitalization=textcapitalization.nononis//输入文本样式this.textAlign=TextAlign.start //文本方向this.autofocus=false，//this.obsccction是否自动对焦，例如密码格式this.autocorrect=true，this.maxlines //最大允许输入长度this.maxLengthEnforced=true //最大输入长度this.onChanged，//当文本内容更改时this.onEditingComplete，//内容被提交//是否允许在用户请求完成时回调this.inputFormatters验证和格式this.enabled，this.cursorWidth=2.0，//游标//光标圆角弧度this.cursorColor，//光标颜色this //键盘亮度this.scroll padding=constedgeinsets.all (20.0 )，滚动到//视图
decoration ——————装饰器，可以修改样式、padding、文字位置调整、提示文字、icon、标签文字等。 在上面的代码中添加了decoration属性keyboard type ——3——————键盘输入类型。 keyboard type : textinput type.visible password密码obscureText——————显示密码和普通文本框，且maxLine必须为1 textAlign ——————字符对齐方法maxLines ——————多行maxlength ——3——3——最多有多少个字符on changed ——33——3333——字符发生了变化报告是否回调RAC us 3360 4——自动对焦，首次进入时弹出键盘单击onEditingComplete ————键盘按钮确认时启动onSubmitted。 //同样是单击键盘完成按钮时触发的回调，该回调具有参数，参数是当前输入框的值。 (String ) textInputAction ————键盘右下角按钮的字符或图标) textinput action : textinput action.go， )2.TextField的普通classtextdemoextenddent @ overridewidgetbuild (buildcontextcontext ) return container (child : column ) 请输入sizzteld textfield (decoration : input decoration (hint text : )搜索的内容)、border: OutlineInputBorder、)、SSD hee coration textfield (maxlines :4，decoration : input decoration (hint text : '多行文本框'，border 3360 outlineinpup )
ecoration: 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 { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('FlutterDemo')), body: TextFieldAndCheckPage(), )); }}class TextFieldAndCheckPage extends StatefulWidget { @override State<StatefulWidget> createState() => TextFieldAndCheckPageState();}class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> { //手机号的控制器 TextEditingController phoneController = TextEditingController(); //密码的控制器 TextEditingController passController = TextEditingController(); @override Widget 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(); }); }}