填充后如何跳转到下一个 TextFormField？答案

【问题标题】：How can jump to next TextFormField when one is filled?填充后如何跳转到下一个 TextFormField？
【发布时间】：2021-05-25 20:28:09
【问题描述】：

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

如图所示，我创建了三个文本表单字段，用户可以在其中输入日月和年（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),
            ],
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
            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,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
`````

【问题讨论】：

标签： flutter focus textfield textformfield

【解决方案1】：

为此，您必须将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,
    );

【讨论】：

【解决方案2】：

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

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

【讨论】：