Flutter - 使用 keyValuePair 的 DropdownButton

Question

我是新手。我正在尝试创建一个包含键值对列表的下拉按钮。当用户从列表中选择一个项目时，我想获取所选项目的键。我已经搜索过这个例子，但没有找到任何方法来做到这一点。是否有我应该使用的另一个组件，或者是否有一个插件可以做到这一点。感谢您对此的帮助。

Answer 1

我创建了一个简单的用户类

class User {
  const User(this.id,this.name);

  final String name;
  final int id;
}

和一个简单的 StatefulWidget，它将显示一个下拉按钮和文本

class MyApp extends StatefulWidget {
  State createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  User selectedUser;
  List<User> users = <User>[const User(1,'Foo'), const User(2,'Bar')];

  @override
  void initState() {
    selectedUser=users[0];
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(

        body: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Center(
              child: new DropdownButton<User>(
                value: selectedUser,
                onChanged: (User newValue) {
                  setState(() {
                    selectedUser = newValue;
                  });
                },
                items: users.map((User user) {
                  return new DropdownMenuItem<User>(
                    value: user,
                    child: new Text(
                      user.name,
                      style: new TextStyle(color: Colors.black),
                    ),
                  );
                }).toList(),
              ),
            ),
            new Text("selected user name is ${selectedUser.name} : and Id is : ${selectedUser.id}"),
          ],
        ),
      ),
    );
  }
}

这是最终结果