如何在 Flutter 中将地图列表显示到 DropdownMenuItem 中

Posted 2023-02-23

【中文标题】如何在 Flutter 中将地图列表显示到 DropdownMenuItem 中

【英文标题】：How to display list of map into DropdownMenuItem in Flutter

【发布时间】：2019-11-07 05:05:27

【问题描述】：

我是 Flutter 的新手。 我想从我的列表变量中显示 DropdownMenuItem。 查看我的代码。

// my list variable


  List listUserType = [
    'name': 'Individual', 'value': 'individual',
    'name': 'Company', 'value': 'company'
  ];




// items property in DropdownMenuItem

return DropdownButtonFormField<List<Map>>(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.settings),
          hintText: 'Organisation Type',
          filled: true,
          fillColor: Colors.white,
          errorStyle: TextStyle(color: Colors.yellow),
        ),
        items: listUserType.map((map) 
          return DropdownMenuItem(
            child: Text(map['name']),
            value: map['value'],
          );
        ).toList());

这是我得到的结果

I/flutter (22528): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (22528): The following assertion was thrown building RegisterPage(dirty, state: RegisterPageState#5b83a):
I/flutter (22528): type 'List<DropdownMenuItem<dynamic>>' is not a subtype of type
I/flutter (22528): 'List<DropdownMenuItem<List<Map<dynamic, dynamic>>>>'

我不知道是什么导致了错误。

【问题讨论】：

你能发布整个下拉代码

已编辑代码

DropDown 是为显示一项而设计的，如果可以显示key 或value，那么我会尽力提供帮助，否则我不知道该怎么办

【参考方案1】：

尝试删除<List<Map>>

return DropdownButtonFormField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.settings),
          hintText: 'Organisation Type',
          filled: true,
          fillColor: Colors.white,
          errorStyle: TextStyle(color: Colors.yellow),
        ),
        items: listUserType.map((map) 
          return DropdownMenuItem(
            child: Text(map['name']),
            value: map['value'],
          );
        ).toList());

【参考方案2】：

将DropdownButtonFormField<List<Map>> 更改为DropdownButtonFormField<String> 并将String 类型参数添加到return DropdownMenuItem<String>

【参考方案3】：

我使用 YourClassView 类型的 DropDownButtonField 显示完整的流程。我创建了一个名为 _listMenuItems 的变量，它将保存您的 DropdownMenuItem。您必须对其 进行属性转换，否则将发生转换错误。 _currentComboView 点保留用户从 DropdownButtonField 中选择的 YourClassView 对象。从 initState() 覆盖调用 _loadStatusCombo。它调用provder 来获取名为dataViews 的YourClassView 对象列表。我通过强制转换和使用 map 函数将 dataViews 映射到 _listMenuItems 中。确保包含 .tolist 以平整映射结果。

YourClassView has two field: DisplayValue and DatabaseValue
YourClassView _currentComboView;
List<DropdownMenuItem> _listMenuItems =
  <DropdownMenuItem<YourClassView>>[];

                  DropdownButtonFormField<YourClassView>(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: const BorderRadius.all(
                              const Radius.circular(2.0),
                            ),
                          ),
                          filled: true,
                          hintStyle: TextStyle(color: Colors.grey[800]),
                          hintText: "Select a Status",
                          fillColor: Colors.orange),
                      items: _listMenuItems,
                      isDense: true,
                      isExpanded: true,
                      value: this._currentComboView,
                      validator: (value) =>
                          value == null ? 'field required' : null,
                      onChanged: (YourClassView value) 
                        setState(() 
                          this._currentComboView = value;
                        );
                      ),


_loadStatusCombo() 
    Provider.of<Api>(context, listen: false)
        .getComboViews()
        .then((dataViews) 
        setState(() 
          _listMenuItems =
             dataViews.map<DropdownMenuItem<YourClassView>>((item) 
            return DropdownMenuItem<YourClassView>(
                value: item, child: Text(item.displayValue));
        ).toList();
      );
     );