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

【问题标题】：How share data between widget in PageView?如何在 PageView 中的小部件之间共享数据？
【发布时间】：2020-04-07 16:29:22
【问题描述】：

我想在 PageView 中制作一个 4 步表单。有 4 个小部件，每个小部件对应一个阶段。每个小部件都有一个 TextField 和一个用于转到下一页的按钮。在最后一个小部件上，按钮必须检索 Textfields 的 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)),
        ),
      )
    );
  }

【问题讨论】：

标签： flutter

【解决方案1】：

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

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

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

medium 上有一篇非常好的文章，其中显示了有关此小部件的许多提示。

我认为，如果您有一系列有序的步骤，您真的应该尝试这个小部件，因为它易于使用且对用户来说非常直观。

【讨论】：

【解决方案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

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

【讨论】：

好的，谢谢您的回答，但是第一个小部件如何调用第二个小部件，因为所有小部件都在主小部件中由小部件列表调用？
哦，我没有注意到列表层次结构。这使得在小部件列表方法中变得更加容易。只需在小部件中传递相同的_dataModel。在PagView 中，您可以在页面控制器中使用animatePageTo() 更改页面。

【解决方案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);

【讨论】：