flutter - 自定义TextFiled 输入框的样式，以及参数说明

系统默认的输入框样式

命名参数使用说明obscureText让输入的文字模糊化， 也就是变成密码输入框， 填入布尔值contentPadding设置输入框中的文字内边距， 使用在装饰器中focusNode动态设置输入框的焦点 FocusNode 类型maxLength输入框的输入的长度maxLengthEnforced当输入的文字超过限制长度后，是否还能继续输入，如果是 false，则继续可以输入，但是边框线变红 ，为 true， 则不能再输入decoration输入框的样式， 用 InputDecoration() 修饰onSubmitted当软键盘上的 textInputAction: TextInputAction.done, 时触发controller让输入控制器，可以监听输入框的变化，能灵活操作输入框onEditingComplete输入框完成输入后的回调autofocus输入框是否是焦点状态 ，传入布尔值onChanged输入框的值变化时的回调，可以获取输入框的值maxLines输入框可以输入几行，同 web 端的 textAreareadOnly输入框是否可编辑，布尔值onTap点击输入框时回调inputFormatters可以限制用户输入的内容，比如只想让用户输入字符 ， 传入一个数组， [WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),]showCursor是否显示光标 传入布尔值 如：falsecursorWidth光标的宽度 如： 2cursorRadius光标的圆角 如： Radius.circular(10)cursorColor光标的颜色 如：Colors.redtoolbarOptions表示长按时弹出的菜单 有 copy、cut、paste、selectAll ，如： ToolbarOptions(copy: true,cut: true,paste: true,selectAll: true)textAlignVertical表示垂直方向的对齐方式textDirection表示文本方向textCapitalization配置键盘是大写还是小写， 仅控制软键盘是大写模式还是小写模式，你也可以切换大小写，系统并不会改变输入框内的内容 class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Column( children: [ UserNameInputTextField(), PassWordTextFiled(), ], ), ); } } TextEditingController _userNameController = TextEditingController(); TextEditingController _pwdController = TextEditingController(); // 焦点 FocusNode passWordFocusNode = FocusNode(); class UserNameInputTextField extends StatefulWidget { @override _UserNameInputTextFieldState createState() => _UserNameInputTextFieldState(); } class _UserNameInputTextFieldState extends State<UserNameInputTextField> { @override void initState() { // TODO: implement initState super.initState(); _userNameController.addListener(() { _userNameController.text = "Hello world"; }); } @override Widget build(BuildContext context) { return TextField( textInputAction: TextInputAction.next, autofocus: true, readOnly: false, controller: _userNameController, keyboardType: TextInputType.emailAddress, decoration: InputDecoration( prefixIcon: Icon(Icons.people), hintText: "请输入账号", labelText: "用户名", ), onEditingComplete: () { FocusScope.of(context).requestFocus(passWordFocusNode); }, onChanged: (value) { print("userName: ${value}"); }, ); } } class PassWordTextFiled extends StatefulWidget { @override _PassWordTextFiledState createState() => _PassWordTextFiledState(); } class _PassWordTextFiledState extends State<PassWordTextFiled> { @override Widget build(BuildContext context) { return TextField( obscureText: true, textInputAction: TextInputAction.done, onSubmitted: (content) => print( "userName: ${_userNameController.text}" + '\n' + "password: ${_pwdController.text}", ), focusNode: passWordFocusNode, maxLength: 8, controller: _pwdController, maxLengthEnforced: false, decoration: InputDecoration( prefixIcon: Icon(Icons.lock), hintText: "请输入密码", labelText: "密码", ), ); } } controller 参数说明 （ 一个输入框对应一个 控制器）TextEditingController 的实例TextEditingController userNameController = TextEditingController();userNameController.addListener()监听某个输入框，传入函数 () { }userNameController.text获取输入框的值userNameController.text = “Hello”给输入框设置默认值 // 控制器 TextEditingController _userNameController = TextEditingController(); TextEditingController _pwdController = TextEditingController(); // 焦点 FocusNode passWordFocusNode = FocusNode();

InputDecoration（） ,实现自定义输入框的样式

参数说明 （用于设置输入框的样式，使用InputDecoration（）修饰）contentPadding设置文字的内边距， 如contentPadding: EdgeInsets.all(10),prefixIcon设置输入框左侧的图标hintText输入框的默认提示语，如：请输入账号labelText输入框的标题， 如用户名， 密码errorText出错时，显示的提示语，一般需要配合具体的条件fillColor配置输入框的背景色filled是否填充背景色， 默认false ，同 fillColor 一块使用enabledBorder设置没有焦点时输入框的底部边框focusedBorder设置获取焦点后输入框的底部边框

实现一个圆角输入框 Widget build(BuildContext context) { return TextField( // obscureText: true, textInputAction: TextInputAction.done, onSubmitted: (content) => print( "userName: ${_userNameController.text}" + '\n' + "password: ${_pwdController.text}", ), focusNode: passWordFocusNode, maxLength: 8, controller: _pwdController, maxLengthEnforced: false, decoration: InputDecoration( filled: true, enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Color(0x00FF0000)), borderRadius: BorderRadius.all( Radius.circular(100), ), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Color(0x00000000)), borderRadius: BorderRadius.all( Radius.circular(100), ), ), contentPadding: EdgeInsets.all(10), prefixIcon: Icon(Icons.lock), // fillColor: Colors.blue, hintText: "请输入密码", ), ); }