动态更改键盘类型 - Flutter

Question

我需要动态更改键盘。键盘从

TextInputType.text

开始，当用户输入 3 个字母时，它会切换到

TextInputType.number

并且用户输入 4 个数字。例如：

ABC1234

。

final _controller = TextEditingController();

TextFormField(
  decoration: InputDecoration(
  labelText: "code",
  hintText: 'ABC1234'),
  controller: _myController,
  keyboardType: TextInputType.text,
),

Answer 1

这是您的工作代码

键盘也自动更换

final _controller = TextEditingController();
late FocusNode myFocusNode = FocusNode();

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: TextFormField(
          style: Theme.of(context).textTheme.bodyText2,
          controller: _controller,
          focusNode: myFocusNode,
          textCapitalization: TextCapitalization.characters,
          keyboardType: (_controller.text.length >= 3) ? TextInputType.number : TextInputType.name,
          onChanged: (text) {
            final newText = text.toUpperCase();
            if (_controller.text != newText) {
              _controller.value = _controller.value.copyWith(text: newText);
            }
            if (_controller.text.length == 3){
              myFocusNode.unfocus();
              Future.delayed(const Duration(milliseconds: 50)).then((value) {
                myFocusNode.requestFocus();
              });
            }
          },
          inputFormatters: [
            FilteringTextInputFormatter.allow(
                RegExp('[a-zA-Z0-9]'))
          ],
          decoration: const InputDecoration(labelText: 'ABC1234'),
        ),
      ),
    ),
  );
}

输出：

Answer 2

要动态更改您的

TextInputType

，您可以做的是：

final _controller = TextEditingController();
//Creating a variable to store the type and initializing it with the default text type.
var keyboardType = TextInputType.text;

TextFormField(
  decoration: InputDecoration(
  labelText: "code",
  hintText: 'ABC1234'),
  controller: _myController,
  //Passing the variable created in here
  keyboardType: keyboardType,
  onChanged: (value) {
    //Checking if the value's length is less than 4, if it is, it should be type `text`.
    if(value.isEmpty || value.length < 4) {
      setState(() => keyboardType = TextInputType.text);
    } else {
      //Else, it should be type `number`
      setState(() => keyboardType = TextInputType.number);
    }
  }  
),

将动态更改键盘类型，但可能不会更改键盘，并且您可能必须再次关闭并打开键盘。

Answer 3

您可以像这样使用keyboardType。它适用于数字和字母。

keyboardType: TextInputType.visiblePassword

Answer 4

声明一个类似于键盘类型控制器的变量，其中键盘类型是变量，TextInputTupe是它的数据类型。

TextInputType keyboardtype = TextInputType.text;

现在，检查你的textformfield的字符串，如果你的string.length大于3那么键盘类型是

TextInputType.number

检查文本表单字段中 onchanged 的长度

final _controller = TextEditingController();
TextInputType keyboardType = TextInputType.text;
TextFormField(
  decoration: InputDecoration(
  labelText: "code",
  hintText: 'ABC1234'),
  controller: _myController,
  keyboardType: TextInputType.text,
  onChanged: (value){
    var inputText = _myController.text;
    if(inputText.length>3){
      keyBoardType = TextInputType.number;
    }
  }
),

如果您使用一些正则表达式将输入格式检查到文本表单字段中的

inputFormatters

，那就更好了。如果您不了解输入格式化程序，只需谷歌一下即可。