使用 Flutter Form Builder 如何通过添加 FormBuilderFieldOption 的值来更改 FormBuilderDateTimePicker 的日期值

Posted 2023-03-07

【中文标题】使用 Flutter Form Builder 如何通过添加 FormBuilderFieldOption 的值来更改 FormBuilderDateTimePicker 的日期值

【英文标题】：Using Flutter Form Builder how to change the date value of FormBuilderDateTimePicker by adding the value of FormBuilderFieldOption

【发布时间】：2020-07-09 09:35:23

【问题描述】：

我是颤振的新手，我正在尝试通过单击使用 FormBuilderChoiceChip 创建的芯片之一来更改颤振 FormBuilderDateTimePicker 的初始值。我需要将FormBuilderChoiceChip下的每个FormBuilderFieldOption的值添加到FormBuilderDateTimePicker的initialValue中。 代码如下：

 child: Column(
                children: <Widget>[
                 FormBuilderChoiceChip(
                   attribute: "custom_days",
                   spacing: 3.0,
                   options: [
                     FormBuilderFieldOption(
                       child: Text("3 Days"),
                              value: 3
                     ),
                     FormBuilderFieldOption(
                       child: Text("5 Days"),
                              value: 5
                     ),
                     FormBuilderFieldOption(
                       child: Text("7 Days"),
                              value: 7
                     ),
                   ],
                  ),
                  FormBuilderDateTimePicker(
                    attribute: "date",
                    inputType: InputType.date,
                    format: DateFormat("dd-MM-yyyy"),
                    decoration: InputDecoration(labelText: "Select Date"),
                    initialValue: DateTime.now(),
                  )
                 ]
                )

这是输出的图像： 单击每个筹码时，应将值添加到日期的初始值中，并更新到未来的日期。

【参考方案1】：

您可以使用 onChanged 事件更改 date 属性的基础值，但该属性的初始值在 UI 上保持不变。

FormBuilderChoiceChip(
              attribute: "custom_days",
              spacing: 3.0,
              onChanged: (daysToAdd) 
                _fbKey.currentState.save();
                _fbKey.currentState.setAttributeValue(
                    'date',
                    _fbKey.currentState.value['date']
                        .add(Duration(days: daysToAdd)));
                _fbKey.currentState.save();
              ,
              options: [
                FormBuilderFieldOption(
                    child: Text(
                      "3 Days",
                    ),
                    value: 3),
                FormBuilderFieldOption(
                    child: Text(
                      "5 Days",
                    ),
                    value: 5),
                FormBuilderFieldOption(child: Text("7 Days"), value: 7),
              ],
            )

setAttributeValue() 仅在后台工作，但不会更新 UI，正如包创建者 here 所解释的那样。

【参考方案2】：

您可以通过didChange 或patchValue 更改字段值。在您的芯片 onChnage 上更新日期字段。

使用 didChange 更改单个字段值：

_formKey.currentState.fields['color_picker'].didChange(Colors.black);

使用 patchValue 更改多个字段值

_formKey.currentState.patchValue(
  'age': '50',
  'slider': 6.7,
  'filter_chip': ['Test 1'],
  'choice_chip': 'Test 2',
  'rate': 4,
  'chips_test': [
    Contact('Andrew', '[e-mail]', 'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg'),
  ],
);

please check the api reference