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

Question

我是颤振的新手，我正在尝试通过单击使用 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(),
                  )
                 ]
                )

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

Answer 1

date您可以使用事件更改属性的基础值，但属性onChanged的初始值在 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，如包创建者在此处解释的那样。

Answer 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', 'stock@man.com', 'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg'),
  ],
});

请检查 api 参考