Flutter - DropdownButton使用keyValuePair

时间:2018-04-08 17:06:40

标签: flutter

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

1 个答案:

答案 0 :(得分:10)

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

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}"),
          ],
        ),
      ),
    );
  }
}

和一个简单的StatefulWidget,它将显示一个下拉按钮和Text

class MainViewModel
{
    public LoginViewModel LoginViewModel { get; set; }
    Notifier notifier = new Notifier();

    public MainViewModel()
    {
        LoginViewModel = new LoginViewModel();
    }
    private Visibility mdiPanelVisibility=Visibility.Visible;
    public Visibility MDIPanelVisibility
    {
        get
        {
            return mdiPanelVisibility;
        }
        set
        {
            mdiPanelVisibility = value;
            NotifyPropertyChanged("MDIPanelVisibility");
        }
    }

    private RelayCommand showMDIPanelCommand;
    public RelayCommand ShowMDIPanelCommand
    {
        get
        {
            return showMDIPanelCommand ??
                (showMDIPanelCommand = new RelayCommand(obj =>
                {
                    MDIPanelVisibility = Visibility.Visible;
                }));
        }
    }

    private RelayCommand hideMDIPanelCommand;
    public RelayCommand HideMDIPanelCommand
    {
        get
        {
            return hideMDIPanelCommand ??
                (hideMDIPanelCommand = new RelayCommand(obj =>
                {
                    MDIPanelVisibility = Visibility.Hidden;
                }));
        }
    }
    private event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

这是最终的结果 enter image description here