flutter - 如何在上下文中的Flutter中结合DropdownMenu和AppLocalization？

我在与AppLocalization一起使用下拉菜单时遇到麻烦。我已经根据电话设置中用户选择的语言实现了自动本地化。在我还想实现具有本地化值的下拉菜单之前，它的效果很好。当我渲染下拉菜单时，它可以工作，但是在选择value后，会出现类似Flutter: There should be exactly one item with [DropdownButton]'s value的错误，请注意，我需要在KeyValueRecords列表中使用appLocalization，

import 'package:MyHorse.sk/app_localizations.dart';

class AddNewTrainingFormState extends State<AddNewTrainingForm> {

  KeyValueRecordType recordType;

  @override
  Widget build(BuildContext context) {
    List<KeyValueRecordType> recordTypes = <KeyValueRecordType>[
      KeyValueRecordType(
          key: "dressage",
          value: AppLocalizations.of(context).translate('dressage')),
      KeyValueRecordType(
          key: "cavaletti",
          value: AppLocalizations.of(context).translate('cavaletti')),
      KeyValueRecordType(
          key: "jumping",
          value: AppLocalizations.of(context).translate('jumping')),
      KeyValueRecordType(
          key: "hacking",
          value: AppLocalizations.of(context).translate('hacking')),
      KeyValueRecordType(
          key: "groundwork",
          value: AppLocalizations.of(context).translate('groundwork')),
      KeyValueRecordType(
          key: "competition",
          value: AppLocalizations.of(context).translate('competition')),
      KeyValueRecordType(
          key: "other", value: AppLocalizations.of(context).translate('other')),
    ];

        return Scaffold(
              body: Container(
              child: Theme(
                data: Theme.of(context).copyWith(
                  canvasColor: Colors.black,
                ),
                child: DropdownButton<KeyValueRecordType>(
                  value: recordType,
                  onChanged: (KeyValueRecordType value) {
                    setState(() {
                      recordType = value; //show selected value
                    });
                  },
                  items: recordTypes
                      .map<DropdownMenuItem<KeyValueRecordType>>(
                          (recordType) =>
                              new DropdownMenuItem<KeyValueRecordType>(
                                child: Text(recordType.value),
                                value: recordType,
                              ))
                      .toList(),
                ),
              ),

class KeyValueRecordType {
  String key;
  String value;

  KeyValueRecordType({this.key, this.value});
}

所以错误是:

There should be exactly one item with [DropdownButton]'s value: Instance of 'KeyValueRecordType'.
I/flutter ( 9900): Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
I/flutter ( 9900): 'package:flutter/src/material/dropdown.dart':
I/flutter ( 9900): Failed assertion: line 834 pos 15: 'items == null || items.isEmpty || value == null ||
I/flutter ( 9900):               items.where((DropdownMenuItem<T> item) {
I/flutter ( 9900):                 return item.value == value;
I/flutter ( 9900):               }).length == 1'

我尝试了不同的方法，当我在onchanged中指定recordType.key时，出现此键不存在的错误。我也尝试将List放在FutureBuilder和单独的函数中，都没有用。由于需要上下文，因此无法将其放在 build 方法之外。

最佳答案

您可以在下面复制粘贴运行完整代码
您可以使用https://pub.dev/packages/equatable包并扩展Equatable程式码片段

import 'package:equatable/equatable.dart';
...
class KeyValueRecordType extends Equatable {
  String key;
  String value;

  KeyValueRecordType({this.key, this.value});

  @override
  List<Object> get props => [key, value];
}

工作演示

完整的代码

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

class KeyValueRecordType extends Equatable {
  String key;
  String value;

  KeyValueRecordType({this.key, this.value});

  @override
  List<Object> get props => [key, value];
}

class AddNewTrainingForm extends StatefulWidget {
  @override
  AddNewTrainingFormState createState() => AddNewTrainingFormState();
}

class AddNewTrainingFormState extends State<AddNewTrainingForm> {
  KeyValueRecordType recordType;

  @override
  Widget build(BuildContext context) {
    List<KeyValueRecordType> recordTypes = <KeyValueRecordType>[
      KeyValueRecordType(key: "dressage", value: 'dressage'),
      KeyValueRecordType(key: "cavaletti", value: 'cavaletti'),
      KeyValueRecordType(key: "jumping", value: 'jumping'),
      KeyValueRecordType(key: "hacking", value: 'hacking'),
      KeyValueRecordType(key: "groundwork", value: 'groundwork'),
      KeyValueRecordType(key: "competition", value: 'competition'),
      KeyValueRecordType(key: "other", value: 'other'),
    ];

    return SafeArea(
      child: Scaffold(
          body: Container(
        child: Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.white,
          ),
          child: DropdownButton<KeyValueRecordType>(
            value: recordType,
            onChanged: (KeyValueRecordType value) {
              setState(() {
                recordType = value; //show selected value
              });
            },
            items: recordTypes
                .map<DropdownMenuItem<KeyValueRecordType>>(
                    (recordType) => new DropdownMenuItem<KeyValueRecordType>(
                          child: Text(recordType.value),
                          value: recordType,
                        ))
                .toList(),
          ),
        ),
      )),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AddNewTrainingForm(),
    );
  }
}