填充时如何跳转到下一个 TextFormField？

编程问答 2022-04-30

问题描述

我目前正在为我的入职建立生日页面。

正如您在图片中看到的，我创建了三个文本表单域，用户可以在其中键入日月和年（LengthLimitingTextInputFormatter = 2 表示日和月，4 表示年）。

当一个文本字段填充了所需的数字时，我如何做到这一点，例如12 天，焦点将自动跳转到下一个 TextFormFiled 月份，用户无需点击所需数字以外的任何内容。

提前致谢！

birthday page of onboarding

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
        Text(
          dateComposition,style: TextStyle(fontSize: 18,fontWeight: FontWeight.w600),),SizedBox(height: 7),Container(
          margin: EdgeInsets.all(4),width: dateComposition == "Year"? 73: 55,child: TextFormField(
            textAlign: TextAlign.center,//Keyboardtype for numbers
            keyboardType: TextInputType.number,//only numbers can be typed in
            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly,LengthLimitingTextInputFormatter(dateComposition=="Year"? 4 : 2),],autofocus: true,cursorColor: kPrimarymagentaColor,decoration: Inputdecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: kTextIconColorDarkBlue),borderRadius: BorderRadius.circular(15),hintText: dateCompositionHintText,hintStyle: TextStyle(fontWeight: FontWeight.w600,fontSize: 18.0),contentPadding: EdgeInsets.only(
                left: 10,right: 10,top: 10,bottom: 10,focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),borderSide: BorderSide(
                  color: kPrimarymagentaColor,width: 1.5,);
  }
}
`````

解决方法

为此，您必须将 FocusNode() 分配给您的 TextField()，然后在您的 TextField 的 onSubmitted 方法中，您必须mySecondTextFieldFocusNode.requestFocus()。

 FocusNode textSecondFocusNode = new FocusNode();

    TextFormField textFirst = new TextFormField(
      onFieldSubmitted: (String value) {
        FocusScope.of(context).requestFocus(textSecondFocusNode);
      },);

    TextFormField textSecond = new TextFormField(
      focusNode: textSecondFocusNode,);
,

您可以添加属性 textInputAction 并将其设置为 TextInputAction.next,

TextFormField(
  textInputAction: TextInputAction.next,...
)
focusfocustextfieldtextfieldtextfieldtextformfield