Flutter 如何使用颤振中的对象创建下拉列表

我尝试创建一个下拉列表，并用几个对象填充它，这些对象表示用户可以从中选择一个的几个服务器，但当我运行应用程序时，我收到一个错误消息：

在生成DropdownWidget时抛出了以下断言（脏，状态：_DropdownWidgetState#1f58f）：应该只有一个项目具有[DropdownButton]的值：“ServerModel”的实例。检测到零个或2个或更多具有相同值的[DropdownMenuItem]

你能帮我找出我代码中的错误吗

import 'package:flutter/material.dart';
​
class ServerSettingsPage extends StatefulWidget {
  @override
  _ServerSettingsPageState createState() => _ServerSettingsPageState();
}
​
class _ServerSettingsPageState extends State<ServerSettingsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      title: Text("Server Settings")),
      body: _buildUI(),
    );
  }
​
  Widget _buildUI() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      child: Center(
        child: Column(
          children: <Widget>[
            Text(
              'Select a server:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            DropdownWidget(),
          ],
        ),
      ),
    );
  }
}
​
class DropdownWidget extends StatefulWidget {
  DropdownWidget({Key key}) : super(key: key);
​
  @override
  _DropdownWidgetState createState() => _DropdownWidgetState();
}
​
class _DropdownWidgetState extends State<DropdownWidget> {
  ServerModel dropdownValue =
      ServerModel(name: 'Default', url: 'https://defaultServer.com/');
​
  @override
  Widget build(BuildContext context) {
    return DropdownButton<ServerModel>(
      value: dropdownValue,
      icon: Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.purple[700]),
      underline: Container(
        height: 2,
        color: Colors.purple[700],
      ),
      onChanged: (ServerModel newServer) {
        setState(() {
          dropdownValue = newServer;
        });
      },
      items: <ServerModel>[
        ServerModel(name: 'Default', url: 'https:defaultServer.com/'),
        ServerModel(name: 'Alpha', url: 'https://alphaServer.com/'),
        ServerModel(name: 'Beta', url: 'https://betaServer.com/'),
      ].map<DropdownMenuItem<ServerModel>>((ServerModel server) {
        return DropdownMenuItem<ServerModel>(
          value: server,
          child: Text(server.name, style: TextStyle(fontSize: 20)),
        );
      }).toList(),
    );
  }
}

非常感谢您阅读这篇文章

应该只有一个项目具有[DropdownButton]的值： “ServerModel”的实例。零或2或更多 检测到具有相同值的[DropdownMenuItem]s

之所以会出现这种情况，是因为下拉列表中的选定值必须指向现有列表项（显然，该列表中不应该有任何重复项）。您现在设置它的方式是，ServerModel列表在小部件构建期间生成，一旦构建，就不会在小部件的状态中引用该列表。 我希望我的答案足够清楚，同时看看下面的正确代码：

class _DropdownWidgetState extends State<DropdownWidget> {
  List<ServerModel> serverModels = <ServerModel>[
    ServerModel(name: 'Default', url: 'https:defaultServer.com/'),
    ServerModel(name: 'Alpha', url: 'https://alphaServer.com/'),
    ServerModel(name: 'Beta', url: 'https://betaServer.com/'),
  ];
  ServerModel selectedServer;

  @override
  initState() {
    super.initState();
    selectedServer = serverModels[0];
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton<ServerModel>(
      value: selectedServer,
      icon: Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.purple[700]),
      underline: Container(
        height: 2,
        color: Colors.purple[700],
      ),
      onChanged: (ServerModel newServer) {
        setState(() {
          selectedServer = newServer;
        });
      },
      items: serverModels.map((ServerModel map) {
        return new DropdownMenuItem<ServerModel>(
            value: map, child: Text(map.name));
      }).toList(),
    );
  }
}

class\u DropdownWidgetState扩展状态{
列出服务器型号=[
ServerModel（名称：“Default”，url：“https:defaultServer.com/”），
服务器模型（名称：'Alpha'，url:'https://alphaServer.com/'),
服务器型号（名称：'Beta'，url:'https://betaServer.com/'),
];
服务器型号选择服务器；
@凌驾
initState（）{
super.initState（）；
selectedServer=serverModels[0]；
}
@凌驾
小部件构建（构建上下文）{
返回下拉按钮(
值：selectedServer，
图标：图标（图标。向下箭头），
iconSize:24，
海拔：16，
样式：TextStyle（颜色：Colors.purple[700]），
下划线：容器(
身高：2，
颜色：颜色。紫色[700]，
),
onChanged:（服务器模型新闻服务器）{
设置状态（）{
selectedServer=newServer；
});
},
项目：serverModels.map（（ServerModel映射）{
返回新的DropdownMenuItem(
值：map，子：Text（map.name））；
}).toList（），
);
}
}

在dartpad上测试、工作的交互式答案：

---

您正面临一个平等问题

在Dart中，非基本类型（如

SizedBox

、

List

）和您的案例中的

ServerModel

）使用引用相等性相互比较，这意味着如果它们具有相同的引用，则它们彼此相等。也就是说，它们是同一个实例

因此，此代码将打印false：

print(ServerModel(name: 'Default', url: 'https://defaultServer.com/') == ServerModel(name: 'Default', url: 'https://defaultServer.com/'));

解决方案是覆盖类

ServerModel

的相等运算符

class ServerModel {
  ServerModel({this.name, this.url});

 ServerModel.empty() {
    this.name = null;
    this.url = null;
  }
   String name;
   String url;

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;
    return other is ServerModel && other.name == name && other.url == url;
  }

  @override
  int get hashCode => name.hashCode ^ url.hashCode;
}

现在应该可以了

PRO提示：用于自动生成相等和哈希代码

---

专业提示：使用autoequal生成相等的道具）

// TL;DR
print(ServerModel(xyz) == ServerModel(xyz)); // false

class ServerModel {
  ServerModel({this.name, this.url});

 ServerModel.empty() {
    this.name = null;
    this.url = null;
  }
   String name;
   String url;

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;
    return other is ServerModel && other.name == name && other.url == url;
  }

  @override
  int get hashCode => name.hashCode ^ url.hashCode;
}