Flutter 基于多个页面创建表单

Question

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

Answer 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));