我如何同时构建一个只有一个文本字段的表单？

Question

我当时试图制作一个显示一个字段的表单来完成接下来的事情：

• 按下“下一步”按钮时，它会验证该字段，如果一切正常，则让用户转到下一个字段。
• 当用户按下键盘上的下一个按钮时，它应该做同样的事情。
• 如果可能，字段之间的滑动动画。

我想到的是这样的：

List<Widget> questions = [List of textFieldForm]
int pageCount = 0;
GlobalKey _formKey = GlobalKey<FormState>();

    pickSection(pageCount) {
      return questions[pageCount];
    }

 Widget build(BuildContext context) {
   return Form(
              key: _formKey,
              child: Column(
                  children: [
                    pickSection(widget.pageCount),
                    Container(
                        child: Row(children: [
                          Container(
                            width: screenWidth * 0.4,
                            child: TextButton(
                              onPressed: widget.pageCount == 0
                                  ? null
                                  : () {
                                      setState(() {
                                        widget.pageCount--;
                                      }),
                              child: Text("BACK"),
                            ),
                          ),
                          Container(
                            width: screenWidth * 0.4,
                            child: TextButton(
                              onPressed: () {
                                if (_formKey.currentState!.validate()) {
                                  if (widget.pageCount == questions.length - 1) {
                                    print("FORM ENDS");
                                  } else {
                                    setState(() {
                                      widget.pageCount++;
                                    });
                                  }
                                }
                              },
                              child: Text("NEXT"),
                            ),
                          ),
                        ])
                      ),
                  ]),
              ),
}

通过这种方式，我会在调用索引时验证每个字段，因为我将每个小部件都视为它自己的形式，但我想不出一种方法来实现动画，或者使用下一步按钮使字段前进键盘（同样，因为这将每个字段都视为它自己的表单）。

请帮我弄清楚如何实现它。动画并不重要，但使用下一步按钮来推进字段是至关重要的。

提前致谢。

Answer 1

您可以使用可见性小部件（用于根据条件显示小部件）和维护标志来实现此目的。

bool goToNextField = false;

   TextButton(
                          onPressed: () {
                            if (_formKey.currentState!.validate()) {
                              goToNextField = true;
                              if (widget.pageCount == questions.length - 1) {
                                print("FORM ENDS");
                              } else {
                                setState(() {
                                  widget.pageCount++;
                                });
                              }
                            }
                          },

并在下一个小部件中使用可见性小部件

 Widget nextField () {
    return Visibility(
     visible: goToNextField,
     child :
     // what you want to show when next button is pressed
  );
}