Flutter 基于多个页面创建表单

Posted 2023-02-23

【中文标题】Flutter 基于多个页面创建表单

【英文标题】：Flutter create form based on multiple pages

【发布时间】：2021-04-10 22:52:49

【问题描述】：

我需要基于多个页面创建表单，验证并在完成时提交。我如何使用 provider 和 flutter bloc 包来实现类似这种形式的东西？我尝试使用存储创建这样的表单，但我认为这是不好的做法。有人知道吗？之前谢谢！

【参考方案1】：

我建议您使用flow_builder (Link) 插件，它将根据状态为您处理流程。存储库中的示例正是您想要的。首先，您将构建一个模型，该模型将用作状态

class Profile 
  const Profile(this.name, this.age, this.weight);

  final String name;
  final int age;
  final int weight;

  Profile copyWith(String name, int age, int weight) 
    return Profile(
      name: name ?? this.name,
      age: age ?? this.age,
      weight: weight ?? this.weight,
    );
  

然后你可以像这样使用FlowBuilder 小部件：

FlowBuilder<Profile>(
  state: const Profile(),
  onGeneratePages: (profile, pages) 
    return [
      MaterialPage(child: NameForm()),
      if (profile.name != null) MaterialPage(child: AgeForm()),
    ];
  ,
);

然后您可以使用以下方法更新表单页面中的小部件：

context.flow<Profile>().update((profile) => profile.copyWith(name: _name));

【讨论】：

嘿，伙计，我不清楚一件事。我必须在哪里加载数据？在这种情况下，我有一个包含多个页面的表单。我是在 ProfileFlow 上还是在 ProfileNameForm 中加载数据？

我不清楚你在加载什么以及为什么加载。您可以提出完整详细的问题并在此处评论链接。我稍后会检查它。 @AFetter

@Amir_p 偶然，你知道如何检查年龄之前是否有值吗？