我有一個相當復雜的表單，其中下拉串列會根據以前的選擇而變化。例如，如果我選擇“送貨”或“取貨”選項，則下一個下拉選單將基于該選擇并顯示商店串列或送貨選項。
我有下面的代碼并嘗試了一些選項，但下拉選單似乎沒有根據選擇更新，但是我不知道為什么它應該隨著狀態變化而重繪 。
關于最佳方法的任何建議？我認為這可能與需要唯一的密鑰有關，但這似乎并不能解決問題，并且還會導致其他問題，例如在其他欄位更改時清除所選專案。
問題： 如何根據 Dart/Flutter 中先前的表單欄位選擇提供動態下拉串列？
DropDownInputField(
inputList: const [
'Delivery',
'Pickup',
],
onchanged: (selection) {
setState(() {
order.shippingOption = selection;
});
},
name: 'Shipping Option',
),
const SizedBox(
height: 20,
),
DropDownInputField(
inputList: retrieveList(order.shippingOption),
onchanged: (value) => order.deliveryOption = value,
name: 'Delivery Options',
),
選項生成功能
List<String> retrieveList(String shippingOption) {
switch (shippingOption.toLowerCase()) {
case "delivery":
return [
'Standard',
'Express',
];
break;
case "pickup":
return [
'Store 1',
'Store 2',
];
break;
州級
class _ShippingFormScreenState extends State<ShippingFormScreen>
with SingleTickerProviderStateMixin {
TabController tabController;
Order order;
uj5u.com熱心網友回復：
generation Function將決定第二個下拉項。但是如果您單擊選擇第二個下拉項第 1 項，則會出錯。要處理這種情況，您還需要更新第二個下拉值。您可以設定第二個下拉值=null。因此，我們需要使用可為空的字串作為選擇值。
在第一個 DropDownFiled 上onChanged使第二個下拉值為空。
DropDownInputField(
inputList: const [
'Delivery',
'Pickup',
],
onchanged: (selection) {
setState(() {
order.shippingOption = selection;
order.deliveryOption = null;
});
},
name: 'Shipping Option',
),
第二個下拉選單似乎沒問題。但請確保將這些欄位設為可為空。我會鼓勵你檢查這個
uj5u.com熱心網友回復：
您必須使用頂部下拉選單禁用底部下拉選單 onChanged
從檔案中，像這樣禁用：
如果 items 或 onChanged 為 null，則按鈕將被禁用，向下箭頭將變灰，并且將顯示 disabledHint（如果提供）
所以我們將禁用底部下拉選單，看看訂單是否有變化。您應該將底部下拉 onChanged 函式更改為此
items: retrieveList(order.shippingOption),
onChanged: order.shippingOption == null
? null
: (value) {
setState(() {
order.deliveryOption = value!;
});
},
并更改retrieveList為：
List<String> retrieveList(String? shippingOption) {
if (shippingOption == null) return [];
switch (shippingOption.toLowerCase()) {
case "delivery":
return [
'Standard',
'Express',
];
case "pickup":
return [
'Store 1',
'Store 2',
];
default:
throw Exception('Unknown shipping option');
}
}
}
小部件的完整代碼
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Order order = Order();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropDownInputField(
items: const [
'Delivery',
'Pickup',
],
onChanged: (value) {
setState(() {
order.shippingOption = value!;
});
},
value: order.shippingOption,
name: 'Shipping Option',
),
const SizedBox(
height: 20,
),
DropDownInputField(
items: retrieveList(order.shippingOption),
onChanged: order.shippingOption == null
? null
: (value) {
setState(() {
order.deliveryOption = value!;
});
},
name: 'Delivery Options',
value: order.deliveryOption,
),
],
),
),
);
}
List<String> retrieveList(String? shippingOption) {
if (shippingOption == null) return [];
switch (shippingOption.toLowerCase()) {
case "delivery":
return [
'Standard',
'Express',
];
case "pickup":
return [
'Store 1',
'Store 2',
];
default:
throw Exception('Unknown shipping option');
}
}
}
class Order {
String? shippingOption;
String? deliveryOption;
}
class DropDownInputField extends StatelessWidget {
const DropDownInputField({
Key? key,
required this.items,
required this.onChanged,
required this.value,
required this.name,
}) : super(key: key);
final List<String> items;
final ValueChanged<String?>? onChanged;
final String? value;
final String name;
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: value,
hint: Text(name),
items: <DropdownMenuItem<String>>[
...items.map((e) => DropdownMenuItem(
child: Text(e),
value: e,
))
],
onChanged: onChanged,
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/369071.html