Flutter：带有自定义地图的下拉菜单答案

【问题标题】：Flutter: dropdown with custom mapFlutter：带有自定义地图的下拉菜单
【发布时间】：2021-02-14 12:14:56
【问题描述】：

我有一张地图列表：

var taxesGroups = [
{
  "name": "Spain",
  "taxes": [
    {"name": "IVA", "percentage": "21"},
    {"name": "IRPF", "percentage": "19"},
  ]
},
{
  "name": "UK",
  "taxes": [
    {"name": "VAT", "percentage": "20"},
  ]
}
];

var dropdownValue = taxesGroups[0]["name"];

到目前为止，我尝试过这个：

DropdownButton(
                  value: dropdownValue,
                  items: taxesGroups.map((taxGroup) {
                    return DropdownMenuItem<String>(
                      value: taxGroup["name"],
                      child: Text(taxGroup["name"]),
                    );
                  }).toList(),
                  onChanged: (taxGroup) {
                    setState(() {
                      dropdownValue = taxGroup;
                    });
                  },
                ),

我收到此错误：

type 'List' 不是 type 的子类型 '列表'

我想这与我想在下拉列表中显示的信息（西班牙、英国）以及我在选择一个选项时得到的信息有关，但我不明白

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您的 taxGroups 地图不匹配。

我试图用这个重新创建你的用例，它可以工作。

            class MyApp2 extends StatefulWidget {
              @override
              _MyAppState createState() => _MyAppState();
            }

            class _MyAppState extends State<MyApp2> {
              @override
              Widget build(BuildContext context) {
                return MaterialApp(
                  home: MyHomePage(),
                );
              }
            }

            class MyHomePage extends StatefulWidget {
              @override
              _MyHomePageState createState() => _MyHomePageState();
            }

            class _MyHomePageState extends State<MyHomePage> {
              var taxesGroups = [
                {
                  "name": "Spain",
                  "taxes": [
                    {"name": "IVA", "percentage": "21"},
                    {"name": "IRPF", "percentage": "19"},
                  ]
                },
                {
                  "name": "UK",
                  "taxes": [
                    {"name": "VAT", "percentage": "20"},
                  ]
                }
              ];

              var dropdownValue;

              @override
              void initState() {
                dropdownValue = taxesGroups[0];
                super.initState();
              }

              @override
              Widget build(BuildContext context) {
                return Scaffold(
                  appBar: AppBar(
                    title: Text("AppBar"),
                  ),
                  body: DropdownButton(
                    value: dropdownValue['name'],
                    items: taxesGroups.map((taxGroup) {
                      return DropdownMenuItem<String>(
                        value: taxGroup["name"],
                        child: Text(taxGroup["name"]),
                      );
                    }).toList(),
                    onChanged: (taxGroup) {
                      print('taxGroup $taxGroup');
                      taxesGroups.map((e) {
                        if (e["name"] == taxGroup)
                          setState(() {
                            dropdownValue = e;
                          });
                      });
                    },
                  ),
                );
              }
            }

【讨论】：

我不知道为什么，但如果我不为 .forEach 更改内部的 .map，它对我不起作用。但是，是的，它有效。所以唯一的方法是再次制作另一个循环？我不能拿走我点击的地图并避免额外的地图？或者至少取点击选项的索引来做一个 taxGroups[index]
如果您以某种方式获得索引，那么是的，您可以这样做。但我无法弄清楚如何做到这一点。

【解决方案2】：

为地图添加类型为 DropownMenuItem

    DropdownButton(
     value: dropdownValue,
     items: taxesGroups.map<DropdownMenuItem>((taxGroup) {
      return DropdownMenuItem<String>(
         value: taxGroup["name"],
         child: Text(taxGroup["name"]),
       );
     }).toList(),
     onChanged: (taxGroup) {
      setState(() {
       dropdownValue = taxGroup;
      });
    },
   ),

【讨论】：

这并不能解决任何问题，只是添加了一个类型