我正在为电子商务系统构建一个应用程序,它可以将数据发布到服务器。有多个项目类别,它们具有不同且可自定义的值。例如,笔记本电脑类别可以具有处理器、RAM、存储大小属性。其中一些属性是文本框(例如型号),而其他属性则需要是下拉菜单(例如处理器 - 核心 i7、i5 等)。属性的数量无法固定,因为它取决于类别(可能随时添加或删除)
我试图构建一个表单,根据属性类型(AttributeType 列)将此属性显示为文本框或下拉列表。我能够显示文本框和下拉列表(成功地显示了它们的元素。我遇到的问题是访问下拉值以创建对服务器的发布请求。
这是代码
FutureBuilder<FormListModel>(
future: _formList,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.customattributes.length,
itemBuilder: (context, index) {
var item = snapshot.data.customattributes[index];
print(item.name);
if (item.AttributeType == 'Text') {
return Container(
//padding: EdgeInsets.only(top: 8),
margin:
EdgeInsets.only(top: 15, left: 15, right: 15),
child: Column(
children: [
Form(
child: TextFormField(
controller: model_controller,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
labelText: item.name,
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent),
),
),
onChanged: (value) {
//print(model_controller.text);
},
),
),
],
),
);
} else if (item.AttributeType == 'Selectlist') {
return Container(
//padding: EdgeInsets.only(top: 8),
margin:
EdgeInsets.only(top: 20, left: 15, right: 15),
child: Column(
children: [
Form(
child: InputDecorator(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
vertical: 12, horizontal: 12),
labelText: item.name,
labelStyle: TextStyle(
fontSize: 20,
color: Colors.blueAccent),
border: const OutlineInputBorder(),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
isDense: true,
icon: Icon(Icons.keyboard_arrow_down),
value: selectedAttribute,
onChanged: (newValue) {
setState(() {
selectedAttribute = newValue;
});
},
//decoration: InputDecoration(border: InputBorder.none),
items: item.children
.map<DropdownMenuItem>((items) {
return DropdownMenuItem<String>(
child: Row(
children: [
Padding(
padding:
EdgeInsets.only(top: 7),
child: Text(items.element),
),
],
),
value: items.element,
);
}).toList(),
),
),
),
),
],
),
);
} else {
return null;
}
},
);
} else {
return Container();
}
}),
这是我们从服务器获取的用于使用 ListView.builder 创建表单的 json 文件
{
"category": {
"CategoryName": "Laptops",
"CategoryID": 34
},
"customattributes": [
{
"Name": "Model",
"AttributeType": "Text",
"AttributeID": 7
},
{
"Name": "Processor",
"AttributeType": "Selectlist",
"AttributeID": 2,
"Children": [
{
"Element": "Intel Core i3"
},
{
"Element": "Intel Core i5"
},
{
"Element": "Intel Core i7"
}
]
},
{
"Name": "Storage Size",
"AttributeType": "Selectlist",
"AttributeID": 1,
"Children": [
{
"Element": "1TB"
},
{
"Element": "2TB"
},
{
"Element": "2.5TB"
}
]
},
{
"Name": "RAM",
"AttributeType": "Selectlist",
"AttributeID": 3,
"Children": [
{
"Element": "12GB"
},
{
"Element": "16GB"
]
}
],
}
这是表格
当我从下拉列表中选择任何值时,我收到一条错误消息:应该只有一个项目具有 [DropdownButton] 的值
- 那么我如何访问每个下拉列表的值,以便我可以向服务器发出 http post 请求。请记住,每个类别的下拉菜单(属性)数量各不相同。 第二个问题,不是那么重要,但有没有一种方法可以使用 json 文件中属性的“名称”列为每个下拉列表分配名称。
最佳答案
在onChanged方法中更改下拉值时尝试将其他下拉值设置为null
关于flutter - 应该只有一项具有 [DropdownButton] 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65915250/