是否可以在Flutter的IconButton中使用DropDownButton? [英] Is it possible to use a DropDownButton within an IconButton in Flutter?

问题描述

更新:

@override
  Widget build(BuildContext context) {
    return new Container(
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              height: 220.0,
              width: MediaQuery.of(context).size.width,
              child: new GestureDetector(
                onTap: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                },
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 40.0),
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: Stack(
                            children: [
                              Center(
                                child: Text(
                                  'Profile',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontFamily: 'Lato',
                                    color: Colors.white,
                                    fontSize: 50.0,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                              ),
                              Positioned(
                                right: 8,
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Padding(padding: EdgeInsets.only(top: 400)),
                                    PopupMenuButton<String>(
                                      icon: Icon(
                                        Icons.settings,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                      onSelected: choiceAction,
                                      itemBuilder: (BuildContext context) {
                                        return Constants.choices.map((String choice) {
                                          return PopupMenuItem<String>(
                                            value: choice,
                                            child: Text(choice),
                                          );
                                        }).toList();
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),

我正在尝试在IconButton的OnPressed命令中实现一个DropDownButton，以便在按下该图标时显示一个下拉菜单.

I am trying to implement a DropDownButton inside the OnPressed command of an IconButton, so that when the icon is pressed, a drop down menu is shown.

更新:我已经根据建议更新了代码，但是没有出现该图标.

Update: I've updated my code with the suggestion made, however the icon does not appear.

我不确定这是否是我的窗口小部件树的问题.

I'm not sure if this is a problem with my widget tree.

推荐答案

您可以尝试使用showDialog

You can try using showDialog

child: Row(
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.settings,
                color: Colors.black,
                size: 30.0,
              ),
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text('Country List'),
                        content: new ListView(
                          children: <Widget>[
                            new Column(
                              children: <Widget>[
                                new DropdownButton<String>(
                                  items: <String>['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((String value) {
                                    return new DropdownMenuItem<String>(
                                      value: value,
                                      child: new Text(value),
                                    );
                                  }).toList(),
                                  onChanged: (_) {},
                                ),
                              ],
                            ),
                          ],
                        ),
                      );
                    });
              })
        ],
      )

更新后的答案

请检查此代码:

class DropdownMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(padding: EdgeInsets.only(top: 400)),
        PopupMenuButton<String>(
          icon: Icon(Icons.settings),
          onSelected: choiceAction,
          itemBuilder: (BuildContext context) {
            return Constants.choices.map((String choice) {
              return PopupMenuItem<String>(
                value: choice,
                child: Text(choice),
              );
            }).toList();
          },
        ),
      ],
    ));
  }
}

class Constants {
  static const String FirstItem = 'First Item';
  static const String SecondItem = 'Second Item';
  static const String ThirdItem = 'Third Item';

  static const List<String> choices = <String>[
    FirstItem,
    SecondItem,
    ThirdItem,
  ];
}

void choiceAction(String choice) {
  if (choice == Constants.FirstItem) {
    print('I First Item');
  } else if (choice == Constants.SecondItem) {
    print('I Second Item');
  } else if (choice == Constants.ThirdItem) {
    print('I Third Item');
  }
}

注意:这不是下拉菜单，但我认为这是您想要的.

Note: This is not dropdown menu but i think this is what you want.

这篇关于是否可以在Flutter的IconButton中使用DropDownButton?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！