Riverpod 是在多个选项卡上显示/收集多个文本表单字段输入的最佳方式吗?

问题描述 投票:0回答:1

鉴于以下页面有 3 个选项卡,全部包含多个文本字段,使用 Riverpod 库是从每个选项卡的 textformfield 小部件设置和收集值的最佳/最简单方法吗?

enter image description here

“保存”按钮应收集所有值。 同样,在创建表单时,会传入一个包含所有信息的数据模型,并且应将其分布在选项卡之间。 我一直在读到似乎有多种方法可以做到这一点,例如提供程序、文本控制器等,但我刚刚找到了 Riverpod 库,它似乎是最简单的选择。

谢谢!

flutter riverpod
1个回答
0
投票

您可以使用 flutter_form_builder 包简化处理多个 TextFormFields。它通过提供用于验证和输入收集的内置小部件使表单处理变得更容易,而无需手动管理每个字段。

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

class MyFormPage extends StatelessWidget {
final _formKey = GlobalKey<FormBuilderState>();

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text('Form Example')),
  body: Padding(
    padding: const EdgeInsets.all(16.0),
    child: FormBuilder(
      key: _formKey,
      child: Column(
        children: [
          FormBuilderTextField(
            name: 'email',
            decoration: InputDecoration(labelText: 'Email'),
          ),
          FormBuilderTextField(
            name: 'password',
            decoration: InputDecoration(labelText: 'Password'),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState?.saveAndValidate() ?? false) {
                print(_formKey.currentState?.value);
              } else {
                print('Validation failed');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    ),
  ),
);

} }

© www.soinside.com 2019 - 2024. All rights reserved.