flutter - 应该只有一项具有 [DropdownButton] 的值

标签 flutter dart drop-down-menu flutter-futurebuilder

我正在为电子商务系统构建一个应用程序,它可以将数据发布到服务器。有多个项目类别,它们具有不同且可自定义的值。例如,笔记本电脑类别可以具有处理器、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"
            ]
        }
    ],
    
}

这是表格

enter image description here

当我从下拉列表中选择任何值时,我收到一条错误消息:应该只有一个项目具有 [DropdownButton] 的值

enter image description here

  1. 那么我如何访问每个下拉列表的值,以便我可以向服务器发出 http post 请求。请记住,每个类别的下拉菜单(属性)数量各不相同。 第二个问题,不是那么重要,但有没有一种方法可以使用 json 文件中属性的“名称”列为每个下拉列表分配名称。

最佳答案

在onChanged方法中更改下拉值时尝试将其他下拉值设置为null

关于flutter - 应该只有一项具有 [DropdownButton] 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65915250/

相关文章:

dart - Flutter FlatButton 不显示点击动画/波纹效果

flutter - 如何使用Flutter Web通过联系表发送电子邮件?

flutter - 无法加载 Assets

html - Bootswatch 下拉列表 - 列表的最后一个字符被截断

c# - 修改我的串联查询 C#

Flutter BLoC - Bloc vs Cubit 事件驱动状态管理优势

flutter - 如何在 Flutter 上生成具有不同随机起点的随机模糊渐变颜色背景?

flutter - 如何根据 flutter 中的文本高度调整容器高度?

android - Lollipop 中新的底部菜单的名称是什么

flutter_bloc(在事件处理程序正常完成后调用发出