flutter - 如何在 Flutter 中创建带有对象的下拉列表

Question

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

构建 DropdownWidget(dirty, state: _DropdownWidgetState#1f58f) 时抛出了以下断言:应该只有一个项目具有 [DropdownButton] 的值:“ServerModel”实例。检测到具有相同值的零个或两个或更多 [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(),
    );
  }
}

这是 ServerModel 类:

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

非常感谢您阅读这篇文章。

Answer 1

There should be exactly one item with [DropdownButton]'s value: Instance of 'ServerModel'. Either zero or 2 or more [DropdownMenuItem]s were detected with the same value

发生这种情况是因为下拉列表中的选定值必须指向现有的列表项(显然该列表中不应有任何重复项)。你现在设置它的方式是在你的小部件构建期间生成 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(),
    );
  }
}

在 dartpad 上经过测试、有效的交互式答案: https://dartpad.dev/153bad9baac64382e27bc41cdc8131c9