我的自定义下拉小部件在尝试使用模型实例为其设置初始值时抛出错误

Question

我创建了以下自定义下拉小部件。

class CustomDropdown extends StatefulWidget {
  final Color? textColor;
  final Color? backgroundColor;
  final Color? iconColor;
  final bool? boldText;
  final Object? initialValue;
  final List<DropdownMenuItem<Object?>> itemList;
  final Function(Object?) onItemSelect;

  const CustomDropdown({
    Key? key,
    this.textColor,
    this.backgroundColor,
    this.boldText,
    this.iconColor,
    required this.initialValue,
    required this.itemList,
    required this.onItemSelect,
  }) : super(key: key);

  @override
  _CustomDropdownState createState() => _CustomDropdownState();
}

class _CustomDropdownState extends State<CustomDropdown> {
  late Object? _dropdownValue;
  late bool _boldText;

  @override
  void initState() {
    super.initState();
    _dropdownValue = widget.initialValue;
    _boldText = widget.boldText ?? false;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 20,
      child: DropdownButtonHideUnderline(
        child: DropdownButton<Object?>(
          value: _dropdownValue,
          icon: Icon(
            Icons.expand_more_outlined,
            color: widget.iconColor ?? (widget.textColor ?? Colors.black),
          ),
          dropdownColor: widget.backgroundColor ?? Colors.white,
          style: TextStyle(
            color: widget.textColor ?? Colors.black,
            fontWeight: _boldText ? FontWeight.bold : FontWeight.normal,
          ),
          items: widget.itemList,
          onChanged: (value) {
            setState(() => _dropdownValue = value);
            widget.onItemSelect(value);
          },
        ),
      ),
    );
  }
}

然后我实例化我在单独的 dart 文件中创建的上述小部件，如下所示，

class CurrencyDropdown extends StatelessWidget {
  const CurrencyDropdown({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomDropdown(
        initialValue: Currency(id: 1, displayText: 'USD'),     <------------ This line throws an error
        boldText: true,
        iconColor: ColorData.disabledTextColor,
        itemList: [
          DropdownMenuItem(
            child: Text('USD'),
            value: Currency(id: 1, displayText: 'USD'),
          ),
          DropdownMenuItem(
            child: Text('LKR'),
            value: Currency(id: 2, displayText: 'LKR'),
          ),
        ],
        onItemSelect: (_) {},
      ),
    );
  }
}

在上面的代码中，如果我用 null 替换我用箭头指向的值，一切正常。但是，如果我提供上面代码片段中显示的值，它会引发错误。

错误文字说的是，

应该只有一项具有 [DropdownButton] 的值：{ id: 1, displayText: USD }。检测到具有相同值的零个或两个或多个 [DropdownMenuItem] 'package:flutter/src/material/dropdown.dart'

此外，它显示了以下代码片段，断言失败：第 915 行第 15 行：

'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

我也遇到了下面的堆栈溢出帖子，但找不到解决方案，

当提供 class 而不是字符串时，Flutter 下拉菜单失败值

有人可以帮助我吗？非常感谢！

Answer 1

您的 initialValue 与 itemList 中的任何值都不匹配，请尝试以下代码：

class CurrencyDropdown extends StatelessWidget {
  CurrencyDropdown({Key? key}) : super(key: key);

  List<Currency> list = [
    Currency(id: 1, displayText: 'USD'),
    Currency(id: 2, displayText: 'LKR'),
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomDropdown(
        initialValue: list[0],
        boldText: true,
        iconColor: Colors.grey,
        itemList: list
            .map(
              (e) => DropdownMenuItem(
                child: Text(e.displayText),
                value: e,
              ),
            )
            .toList(),
        onItemSelect: (_) {},
      ),
    );
  }
}

我的自定义下拉小部件在尝试使用模型实例为其设置初始值时抛出错误

My custom dropdown widget throws an error when trying to set an initial value for it using a model instance

flutter

dart

flutter-layout

flutter-state

flutter-2