是否可以在 Flutter 的 IconButton 中使用 DropDownButton?

2024-04-23

Update:

@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,以便在按下图标时显示下拉菜单。

Update:我已经根据提出的建议更新了我的代码,但是该图标没有出现。

我不确定这是否是我的小部件树的问题。


更新答案

请检查此代码:

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

注意:这不是下拉菜单,但我认为这就是您想要的。

旧答案

您可以尝试使用 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: (_) {},
                                ),
                              ],
                            ),
                          ],
                        ),
                      );
                    });
              })
        ],
      )
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以在 Flutter 的 IconButton 中使用 DropDownButton? 的相关文章

随机推荐

  • iOS 10 通知内容扩展未加载

    我有一个简单的应用程序来处理推送通知 我的通知服务扩展正在运行 我可以发送带有图像 URL 的远程通知并加载它 我似乎无法让通知内容扩展正常工作 我已经看过多个教程 他们都说 只需从目标菜单创建一个通知内容扩展 然后在通知内容扩展 Info
  • ASP.NET MVC OutputCache 不适用于根 URI

    我正在学习 ASP NET MVC 并被一个问题困扰 在HomeController中 Index操作具有OutputCache属性 但它似乎不起作用 HandleError public class HomeController Cont
  • pytest 由于 ModuleNotFoundError 失败,但在使用“python -m pytest”时有效

    类似于这个OP的问题 https stackoverflow com questions 56755761 filenotfounderror when using python m pytest vs pytest 但反过来说 pytes
  • Reactjs this.refs 与 document.getElementById

    如果我只有基本表格 我还应该吗 this refs或者只是去document getElementById 我所说的基本是指 export default class ForgetPasswordComponent extends Reac
  • 使用渐变填充 SVG 形状

    如何将线性渐变和阴影应用于此图案
  • 熊猫选择倒数第二列,这也不是 nan

    我已尽可能多地清理数据并在 Pandas 数据框中读取它们 所以问题是不同的文件有不同的列数 但它总是倒数第二个非纳米列是我想要的 那么有什么办法可以把它们挑出来吗 这是数据的示例 f g h l 0 39994 29 568 29 569
  • 如何在SSRS图轴上跨越月份和年份?

    我真的很喜欢下面 SSRS 图表中 x 轴的月份和年份的跨度 我怎么做 将日期拆分为数据集中的几列 将这些列添加为条形图的类别组
  • Android ListView 填充内容而不移动 ListView 高度?

    我有一个 ListView 里面有一堆项目 如何使顶部和底部项目的顶部边距为 10dp 底部项目的底部边距为 10dp 现在我可以通过 ListView 上的填充或边距来做到这一点 但结果是 当您滚动时 ListView 的边缘现在距屏幕底
  • PHP中1个月代表多少天?

    我发现 php 中的月份加法和减法存在奇怪的问题 我的问题是 1 个月有相当于天数吗 如果是 这是所有编程语言的通用标准吗 举几个例子 echo date Y m d strtotime 2011 03 31 1 months 2011 0
  • node.js http 服务器,检测客户端何时断开连接

    我使用express 和node js 作为http 服务器 我存储响应对象 以便可以将事件流式传输到该通道上的客户端 有没有办法检测客户端何时断开连接 当我杀死我的客户端时 我仍然可以写入响应对象 而不会收到任何类型的异常 错误 看起来只
  • 安装 Rails 版本 3.2.15 时出现“Gem::RemoteFetcher::UnknownHostError”

    我之前已经在实时 ubuntu USB 上成功安装了 Rails 3 2 15 并具有数据持久性 现在我已经习惯了操作系统 Ubuntu 12 04 LTS 我已经将它安装在笔记本电脑上 并且正在安装我在实时 USB 中使用的东西 长话短说
  • 更改控制台大小

    Delphi中的简单问题 我创建了一个控制台应用程序 如果控制台窗口的高度少于 80 行 我需要将其高度更改为 80 行 这需要从代码中完成 并且实际上是在代码内有条件的 即 当发生错误时 它会增加控制台的大小 以便整个 巨大的 错误报告可
  • NSIS:在标签中插入链接

    假设我有以下 nsDialog 标签 单击 接受 即表示我同意示例的许可协议和隐私政策 您可以访问需要使用个人信息的功能 欲了解更多信息 请下载示例的内容政策 我想在此标签中插入链接 如下所示 单击 接受 即表示我同意示例的内容许可协议 h
  • 动画 GIF 作为 THREE.js 中的纹理

    我正在寻找一种在 THREE js 中使用 GIF 动画作为纹理的方法 我目前可以加载纹理 甚至是 GIF 格式 但它无法播放动画 有什么办法可以做到吗 我发现了一些像这样的链接 https github com JordiRos GLGi
  • 如何从 JavaScript 变量保存 png

    我在 javascript 变量中有一个以 base64 编码的图像 data image png base64 base64 data 编辑 我需要将该文件保存到磁盘而不要求访问者右键单击 编辑 是否可以 如何 提前致谢 此致 我知道这个
  • 如何从 Rails 中的 RSpec 测试调用应用程序帮助器方法?

    标题是不言自明的 我尝试过的一切都导致了 未定义的方法 澄清一下 我并不是想测试辅助方法 我正在尝试在集成测试中使用辅助方法 您只需在测试中包含相关的帮助程序模块即可使方法可用 describe foo do include ActionV
  • Knockout:避免绑定中的循环更新

    我有一个与接口交互的自定义 绑定Scribe https github com guardian scribe 一个内容可编辑的所见即所得编辑器 当编辑器内容发生变化时 它会更新关联的可观察量 并在关联的可观察量发生变化时更新编辑器 ko
  • 将属性添加到对象数组

    我有一个对象数组 如下所示 Object Results Array 2 Results Array 2 0 1 0 Object id 1 name Rick 1 Object id 2 name david 我想向该对象数组的每个元素添
  • 如何在 Node.js 中无限读取行

    while 1 rl question Command function answer console log answer 刚刚尝试了这段代码 但不是一一输入 而是闪烁 命令 行 我知道 Node js 是非阻塞的 但我不知道如何解决这个
  • 是否可以在 Flutter 的 IconButton 中使用 DropDownButton?

    Update override Widget build BuildContext context return new Container height MediaQuery of context size height child Si