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

系统默认的输入框样式

命名参数	使用说明
obscureText	让输入的文字模糊化， 也就是变成密码输入框， 填入布尔值
contentPadding	设置输入框中的文字内边距， 使用在装饰器中
focusNode	动态设置输入框的焦点 FocusNode 类型
maxLength	输入框的输入的长度
maxLengthEnforced	当输入的文字超过限制长度后，是否还能继续输入，如果是 false，则继续可以输入，但是边框线变红 ，为 true， 则不能再输入
decoration	输入框的样式， 用 InputDecoration() 修饰
onSubmitted	当软键盘上的 textInputAction: TextInputAction.done, 时触发
controller	让输入控制器，可以监听输入框的变化，能灵活操作输入框
onEditingComplete	输入框完成输入后的回调
autofocus	输入框是否是焦点状态 ，传入布尔值
onChanged	输入框的值变化时的回调，可以获取输入框的值
maxLines	输入框可以输入几行，同 web 端的 textArea
readOnly	输入框是否可编辑，布尔值
onTap	点击输入框时回调
inputFormatters	可以限制用户输入的内容，比如只想让用户输入字符 ， 传入一个数组， [WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),]
showCursor	是否显示光标 传入布尔值 如：false
cursorWidth	光标的宽度 如： 2
cursorRadius	光标的圆角 如： Radius.circular(10)
cursorColor	光标的颜色 如：Colors.red
toolbarOptions	表示长按时弹出的菜单 有 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: "请输入密码",
      ),
    );
  }