时间戳

首页 > 解决方案 > 如何在 Flutter 中创建包含对象的下拉列表

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

问题描述

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

The following assertion was thrown building DropdownWidget(dirty, state: _DropdownWidgetState#1f58f): 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

你能帮我找出我在代码中做错了什么吗？

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;
}

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

标签： flutterdart

解决方案

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

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

推荐阅读