flutter - 如何更新 Flutter 中的 ValueListenableBuilder 值？

Question

我正在尝试与Provider一起实现ValueListenableBuilder。我有一个使用flutter_form_builder包构建的简单表单。

当显示以下屏幕时，它使用id参数显示交易详细信息。现在，当交易数据加载时，它会正确填写表格。然后我使用FormBuilderChoiceChip小部件编辑事务类型，我使用onChanged参数检测新值并使用ValueListenableBuilder相应地更新 UI 。一切都按预期工作。问题是第一次加载屏幕时以下逻辑不起作用。当我更改选择时，它会显示正确的值。

class EditTransactionViewArguments {
  final int id;
  EditTransactionViewArguments(this.id);
}

class EditTransactionView extends StatelessWidget {
  final int id;
  EditTransactionView({Key? key, required this.id}) : super(key: key);

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final GlobalKey<FormBuilderState> _formKey = GlobalKey<FormBuilderState>();
  final ValueNotifier<String?> selected = ValueNotifier('');

  @override
  Widget build(BuildContext context) {
    final TransactionController transactionController = Provider.of<TransactionController>(context, listen: false);

    transactionController.findOne(id);

    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: white,
      body: Column(
        children: [
          Consumer<TransactionController>(
            builder: (context, model, child) {
              final TransactionWithCustomer? transaction = model.currentTransaction;

              if (transaction != null) {
                return Column(
                  children: [
                    FormBuilder(
                      key: _formKey,
                      child: Column(
                        children: [
                          ValueListenableBuilder<String?>(
                            valueListenable: selected,
                            builder: (context, value, _) {
                              return Column(
                                children: [
                                  Text('Initial Value: ${transaction.transaction.type}'),
                                  Text('Selected Value: $value'),
                                ],
                              );
                            },
                          ),
                          ValueListenableBuilder<String?>(
                            valueListenable: selected,
                            builder: (context, value, __) {
                              return FormBuilderChoiceChip(
                                name: 'type',
                                decoration: const InputDecoration(labelText: 'Type'),
                                initialValue: transaction.transaction.type,
                                options: [
                                  FormBuilderFieldOption(
                                    value: 'debit',
                                    child: Row(
                                      children: [
                                        const Text('Debit'),
                                        if (value == 'debit') const Icon(Icons.check, color: danger)
                                      ],
                                    ),
                                  ),
                                  FormBuilderFieldOption(
                                    value: 'credit',
                                    child: Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        const Text('Credit', style: TextStyle(color: success)),
                                        if (value == 'credit') const Icon(Icons.check, color: success)
                                      ],
                                    ),
                                  ),
                                ],
                                onChanged: (String? val) => selected.value = val,
                              );
                            },
                          ),
                        ],
                      ),
                    ),
                  ],
                );
              } else {
                return const CustomLoadingIndicator();
              }
            },
          ),
        ],
      ),
    );
  }
}

屏幕加载时，数据正确但无法更新 UI：

更改选择后，UI 更改已正确完成：

标签： flutterdart