flutter 嵌套页面布局和传递数据的适当方式?

inb24sb2  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(208)

我有3页纸:

> A page where the user enters their desired display name
  > A page where the user enters their desired username
    > A page where the user enters their desired password

我需要能够将数据(显示名称、用户名、密码)传递到密码页面,其中有一个最终的“提交”按钮,它将实际创建用户的帐户。
到目前为止,我所做的是创建3个单独的小部件,并调用Navigator.push来连接它们。
然而,对于provider库,它看起来并没有真正处理导航推送,根据this answer
因此,我想知道我还应该如何布局我的小部件,使它能够像预期的那样与provider一起工作?

ia2d9nvy

ia2d9nvy1#

你的嵌套页面看起来非常好,这里有两种可能的方法,你提到的其中一种方法是使用provider。相反,你可以使用内置参数和Navigator.push来沿着小部件树传递你的数据。
它可能有点“脏”,但在您的情况下应该能很好地工作,因为没有太多的数据和嵌套页面要传递。
首先,您需要定义需要传入的参数,例如:

// You can pass any object to the arguments parameter.
// In this example, create a class that contains both
// a customizable title and message.
class ScreenArguments {
  final String displayName;
  final String username;

  ScreenArguments({this.displayName, this.username});
}

接下来,传递所需的数据,如下所示:

Navigator.pushNamed(
  context,
  ExtractArgumentsScreen.routeName,
  arguments: ScreenArguments(
    displayName: 'Your Display Name',
  ),

然后,在下一个屏幕上,您需要提取小部件树构建上下文中的参数:

final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;

通过此方法访问数据并将其存储在嵌套页上的新变量中:

String displayName = args.displayName

再次重复此步骤,直到您的最终嵌套页,并包含用户名参数。提取这些参数,现在您可以在最终嵌套页上将表单提交到数据库
示例流程:

> A page where the user enters their desired display name
  - Pass this argument through Nagivator.push
  > A page where the user enters their desired username
    - Store the displayName argument as variable
    - Pass both displayName and username argument through Navigator.push
    > A page where the user enters their desired password
      - Store both displayName and username argument as variable
      - Retrieve all input variables and pass into submit form

有关如何通过Navigator正确传递参数的详细信息,请参阅此dart文档

相关问题