Question

我想在PageView中制作一个4步表单。有4个小部件，每个小部件对应一个阶段。每个小部件都有一个TextField和一个转到下一页的按钮。在最后一个小部件上，按钮必须检索文本字段的4个值才能保存它们。我该怎么办？

  Widget build(BuildContext context) {
    super.build(context);
    Size _screenSize = MediaQuery.of(context).size;

    return Scaffold(
      key: _scaffoldKey,

      body: PageView(
        controller: controller,
        scrollDirection: scrollDirection,
        pageSnapping: true,
        children: <Widget>[
          TitleInput(pcontainer: widget.pcontainer, controller: controller),
          DescriptionInput(pcontainer: widget.pcontainer, controller: controller),
          EstimationPage(pcontainer: widget.pcontainer, controller: controller),
          ImageCapture()
        ],
      ),
    );
  }```

//Button to go to next page:

Widget showNextPage(PageController controller, String topicTitle) {
  return new Padding(
      padding: EdgeInsets.fromLTRB(12.0, 45.0, 12.0, 0.0),
      child: SizedBox(
        height: 60.0,
        width: 70,
        child: new RaisedButton(
          elevation: 5.0,
          shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(30.0)),
          color: Colors.blue,
          child: new Text('Suivant',
              style: new TextStyle(fontSize: 20.0, color: Colors.white)),
          onPressed: () => controller.nextPage(curve: Curves.ease, duration: Duration(milliseconds: 300)),
        ),
      )
    );
  }

Answer 1

我想为您推荐一个替代解决方案：您可以尝试使用Stepper小部件，而不是使用PageView。

您可以定义指示必须发生的事件的顺序的步骤，当然，这是非常可定制的。这是您如何使用此小部件的基本框架：

Stepper(
    steps: [
        Step(
            title: Text("Step number 1"),
            content: Text("widgets"),
        ),
        Step(
            title: Text("Step number 2"),
            content: Text("widgets"),
        ),
    ],
)

medium上有一篇很好的文章，显示了此小部件的许多技巧。

我认为，如果您按顺序执行了一系列步骤，则应该尝试使用此小部件，因为它易于使用并且对用户非常直观。

Answer 2

可以通过创建一个数据模型对象来保存所有必需的数据并将该对象传递给每个小部件以更新各自的数据来满足此特定要求。

例如：

class DataModel {
  String fullName;
  String aboutInfo;
  String contactDetails;
}

，然后按如下所示传递模型的实例（_dataModel）：

mainWidget调用=> fullNameWidget(_dataModel) // updates only fullName

fullNameWidget调用=> descriptionWidget(_dataModel) // updates only aboutInfo

descriptionWidget调用=> contactWidget(_dataModel) // updates only contactDetails

contactWidget调用=> finalWidget(_dataModel) // uses data collected in the _dataModel

重要的是，确保在每个小部件中传递相同的模型实例以更新其各自的字段，然后使用实例中的更新数据继续进行并在最后一步中将其保存。

Answer 3

只需使用静态变量

// Define the Static Variable in Global class you can use any name
class Global{
static String s1,s2,s3,s4;
}

您可以通过以下方式分配值

Global.s1 = "someValue";

您可以通过以下方式访问值

print(Global.s1);

如何在PageView中的小部件之间共享数据？

3 个答案: