下拉按钮错误。应该只有一个项目具有 [下拉按钮] 的值，

Question

我已经在ListView中创建了DropdownBotton，并且我有一个需要在DropdownMenuItem中显示的值列表。

我有 2 个关于 DropdownBotton 的问题，

1. 如何在我的方案的下拉按钮中设置默认值。
2. (控制台错误)

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

下面是我的代码：

ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: const ScrollPhysics(),
itemCount: snapshot.data!.length,
itemBuilder: (_, index) {
List<String> selectedItemValue = <String>[
("$${snapshot.data![index].price} ${snapshot.data![index].productType.type1}"),
("$${snapshot.data![index].price} ${snapshot.data![index].productType.type2}"),
("$${snapshot.data![index].price} ${snapshot.data![index].productType.type3}")];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
padding: const EdgeInsets.all(5.0),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: dropdownValue,
items: selectedItemValue.map((dropValue) {
return DropdownMenuItem<String>(
value: dropValue,
child: Text(dropValue),
);
}).toList(),
onChanged:
(newDropdownValue) {
setState(() {
dropdownValue =
newDropdownValue!;
print(
'dropdown: $dropdownValue');
});
},
),
),
),
],
);
}
),

请有人在这个问题上帮助我，提前谢谢。

Answer 1

DropdownButton的值在DropdownMenuItem' 值中应该是唯一的，并且项目中必须有一个与DropDownButton的当前值完全匹配的DropDownMenuItem。 在您的情况下，您没有从selectedItemValue中设置DropdownButtons 值。因此，您的问题的答案是，

1. 将您希望的DropdownButton的初始值设置为selectedItemValue中的默认值。

2. 为避免此错误，请将DropdownButton移动到单独的StatefullWidget(在本例中为CustomDropdownButton)。 按如下所示更改代码。

ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: const ScrollPhysics(),
itemCount: snapshot.data!.length,
itemBuilder: (_, index) {
List<String> selectedItemValue = <String>[
("$${snapshot.data![index].price} ${snapshot.data![index].productType.type1}"),
("$${snapshot.data![index].price} ${snapshot.data![index].productType.type2}"),
("$${snapshot.data![index].price} ${snapshot.data![index].productType.type3}")];
final defaultValue = selectedItemValue[1];
return CustomDropdownButton(defaultValue:defaultValue, values: selectedItemValue, onItemSelected: (value) {print("Selected Item : $value");});
}
),

CustomDropdownButton类

class CustomDropdownMenu extends StatefulWidget {
const CustomDropdownMenu(
{Key? key,
required this.defaultValue,
required this.values,
required this.onItemSelected})
: super(key: key);
final dynamic Function(String? selectedValue) onItemSelected;
final String defaultValue;
final List<String> values;
@override
_CustomDropdownMenuState createState() => _CustomDropdownMenuState();
}
class _CustomDropdownMenuState extends State<CustomDropdownMenu> {
late String dropdownValue;
@override
void initState() {
super.initState();
dropdownValue = widget.defaultValue;
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
padding: const EdgeInsets.all(5.0),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: dropdownValue,
items: widget.values.map((dropValue) {
return DropdownMenuItem<String>(
value: dropValue,
child: Text(dropValue),
);
}).toList(),
onChanged: (newDropdownValue) {
setState(() {
dropdownValue = newDropdownValue!;
});
widget.onItemSelected(newDropdownValue);
},
),
),
),
],
);
}
}

Answer 2

您的问题是为您的下拉列表提供一个可能在列表中复制的value。这意味着您的字符串列表可能包含具有相同字符串的多个项目。要解决此问题，您需要为value参数提供一个唯一值。在这种情况下，您可以使用数组的索引，如下面的代码所示。

我尝试使用虚拟列表复制您的代码，以便我可以运行它并对其进行测试。

class _StarterPageState extends State<StarterPage> {
Map<int, int?> dropdownValues = {};
final List<String> _list = [
'List Item 1',
'List Item 2',
'List Item 3',
'List Item 4',
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: const ScrollPhysics(),
itemCount: _list.length,
itemBuilder: (_, parentListIndex) {
List<String> selectedItemValues = <String>[
'Dropdown Item 1',
'Dropdown Item 2',
'Dropdown Item 3',
'Dropdown Item 4',
];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
padding: const EdgeInsets.all(5.0),
child: DropdownButtonHideUnderline(
child: DropdownButton<int>(
hint: const Text('Select Item'), // Shown when value is null
// ?? (selectedItemValues.isNotEmpty ? 0 : null) => this adds a default value if the value is null
value: dropdownValues[parentListIndex] ?? (selectedItemValues.isNotEmpty ? 0 : null),
items: List.generate(
selectedItemValues.length,
(i) => DropdownMenuItem<int>(
value: i,
child: Text(selectedItemValues[i]),
),
),
onChanged: (newDropdownValue) {
setState(() {
dropdownValues[parentListIndex] = newDropdownValue!;
print('dropdown: ${dropdownValues[parentListIndex]}');
});
},
),
),
),
],
);
},
),
);
}
}

此外，由于您有多个下拉列表，因此需要分隔下拉列表值，因此这就是我创建具有以下结构的地图的原因：

{
<parentListIndex>: <dropdownValueIndex>,
<parentListIndex>: <dropdownValueIndex>,
//...
}

您可以像这样将hint参数添加到DropdownButton小部件中：

DropdownButton<int>(
hint: const Text('Select Item'),
value: dropdownValueIndex,
//...
)

在此DartPad中观看现场演示 https://dartpad.dev/?id=08ace6b8f73cff0216673dcf9def433d