首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在showMenu下改变PopupMenuItem的背景色?

在Flutter中,可以通过自定义PopupMenuItemchild属性来改变其背景色。具体步骤如下:

  1. 创建一个PopupMenuButton,并将其onSelected属性设置为一个回调函数,用于处理选择菜单项后的操作。
代码语言:txt
复制
PopupMenuButton(
  onSelected: (value) {
    // 处理选择菜单项后的操作
  },
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        value: 1,
        child: Text('菜单项1'),
      ),
      PopupMenuItem(
        value: 2,
        child: Text('菜单项2'),
      ),
    ];
  },
)
  1. 在回调函数中,可以根据选择的值来改变菜单项的背景色。可以使用StatefulWidget来管理菜单项的状态。
代码语言:txt
复制
class MyPopupMenu extends StatefulWidget {
  @override
  _MyPopupMenuState createState() => _MyPopupMenuState();
}

class _MyPopupMenuState extends State<MyPopupMenu> {
  int selectedValue;

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      onSelected: (value) {
        setState(() {
          selectedValue = value;
        });
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: 1,
            child: Container(
              color: selectedValue == 1 ? Colors.blue : null,
              child: Text('菜单项1'),
            ),
          ),
          PopupMenuItem(
            value: 2,
            child: Container(
              color: selectedValue == 2 ? Colors.blue : null,
              child: Text('菜单项2'),
            ),
          ),
        ];
      },
    );
  }
}

在上述代码中,通过判断selectedValue的值来决定菜单项的背景色是否为蓝色。

  1. MyPopupMenu添加到需要显示菜单的位置。
代码语言:txt
复制
showMenu(
  context: context,
  position: RelativeRect.fromLTRB(100, 100, 0, 0),
  items: [
    PopupMenuItem(
      child: MyPopupMenu(),
    ),
  ],
);

通过调用showMenu方法,并将MyPopupMenu作为菜单项添加到items中,即可在指定位置显示菜单。

这样,当选择菜单项时,选中的菜单项将会有不同的背景色。你可以根据实际需求自定义菜单项的样式和背景色。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Flutter 实战】菜单(Menu)功能

老孟导读:今天介绍Flutter中的菜单功能。...menu有一个非常重要参数Offset,这个参数是控制菜单弹出位置,通常情况,菜单在当前按钮下面展示: PopupMenuButton( offset: Offset(0,100...PopupMenuButton每一项都需要是PopupMenuEntry类型,PopupMenuEntry为抽象类,其子类有PopupMenuItem、PopupMenuDivider、CheckedPopupMenuItem...showMenu 如果你看下PopupMenuButton源码会发现,PopupMenuButton也是使用showMenu实现,用法如下: showMenu( context: context...属性和PopupMenuButton基本一样,但使用showMenu需要我们指定位置,所以一般情况,我们不会直接使用showMenu,而是使用PopupMenuButton,免去了计算位置过程。

2.4K10
  • 『Flutter』常用组件 按钮、图片

    主要按钮组件包括: ElevatedButton:这是一个凸起按钮,常用于主要操作。它有默认阴影和灰度效果,当按时会有视觉反馈。...FlatButton(现在称为TextButton):这是一个无阴影平面按钮,通常用于不太重要操作。它在按时不会改变外观,提供简洁视觉效果。...OutlineButton(现在称为OutlinedButton):这个按钮有一个边框,但没有背景色。当按时,边框和文字颜色会变化,适用于需要强调边框而非背景色场景。...它可以包含图标而不是文本,适用于空间有限或需要图形化表示地方。 FloatingActionButton:这是一个圆形按钮,通常悬浮在内容上方,用于促进应用中主要动作,添加、编辑等。...这对于一些图标(箭头)非常重要,其方向可能会因语言阅读方向(从左到右或从右到左)而改变

    50231

    Android开发:仿美团下拉列表菜单,帮助类,复用简单

    既能够反复使用,有简单便捷 首先,查看界面效果图 界面倒是比較简单,主要列功能: 这个是靠一个帮助类实现。...下次想在自己项目中实现该功能,一句引用代码,传入特定參数既能够实现该功能 菜单弹出时候。背景变灰色。...菜单收回,背景回复白色 自己主动给选定选项加入背景色,假设下次选择其它选项,背景色自己主动切换 回调菜单选择项 假设你须要是一级选择菜单,如上功能是全然足够了,好了,一是代码部分:...topView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { showMenu...button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mMenuHelper.showMenu

    1.4K10

    Flet-基于FlutterPython跨平台开发框架(组件学习)

    Flet是一个基于谷歌开发FlutterPython跨平台开发框架,允许用你喜欢语言构建交互式多用户Web,桌面和移动应用程序,而无需拥有前端开发经验。...控件被组织到层次结构或树中,其中每个控件都有一个父控件(Page 除外)和容器控件( Column),下拉列表可以包含子控件。...按类别划分控件: 下面分别介绍框架常用组件及示例: 1、Layout布局 页面 页是视图控件容器。页面实例和根视图是在启动新用户会话时自动创建。 视图 视图是所有其他控件最顶层容器。...page.padding = 0 page.update() Container容器 容器允许使用背景色和边框装饰控件,并使用填充,边距和对齐方式对其进行定位。...(text="Item 1"), PopupMenuItem(), # divider PopupMenuItem(

    10.1K53

    【Flutter Widgets大全】电子书开源

    【Flutter Widgets大全】是老孟耗费大量精力整理,总共有330多个组件详细用法,开源到Github上,希望可以帮助到大家,开源不易,转发一可不可以?。...为了方便对比学习,我将相近或相反功能组件整理到一个文件中,比如所有的 Button 类组件、弹出类组件等。 如果想系统学习入门知识,请到 Flutter 老孟 实战 查看。...在线查看 PhysicalModel 在线查看 PhysicalShape 在线查看 Placeholder 在线查看 PopupMenuButton 在线查看 PopupMenuDivider 在线查看 PopupMenuItem...showCupertinoModalPopup 在线查看 showDatePicker 在线查看 showDialog 在线查看 showGeneralDialog 在线查看 showLicensePage 在线查看 showMenu...还整理了大量 Widgets 继承关系图: Widget直接子类,仅仅4个(其实还有一个抽象类) RenderObjectWidget及其子类共有89个: ProxyWidget及其子类共有34个:

    1.2K10

    C# winform ——界面美化技巧

    C# winform 界面美化技巧(扁平化设计) 转 关于C#界面美化一些小技巧 在不使用第三方控件 IrisSkin 前提下,依然可以对winform做出让人眼前一亮美化 ?...drawitem事件,来达到改变tabpage字体、字体颜色以及背景色目的 private void tabControl1_DrawItem(object sender, DrawItemEventArgs...因为进度条ProgressBar由于是虚拟模式运行,所以调整BackColor和ForeColor都不会产生效果,它仍然会根据windows主题来更改,为了使其按照我们想要颜色来显示,我们可以将虚拟模式命令去掉...,个人不推荐上述方案,更加推荐通过重写ProgressBarOnePaint方法来改变颜色(前景色和背景色)。...} } } 完成以上步骤之后,我们如何在界面中插入自己进度条呢?

    5.6K41

    C# winform 界面美化技巧(扁平化设计)

    C# winform 界面美化技巧(扁平化设计) 关于C#界面美化一些小技巧 在不使用第三方控件 IrisSkin 前提下,依然可以对winform做出让人眼前一亮美化 首先,我们先来实现主界面的扁平化...drawitem事件,来达到改变tabpage字体、字体颜色以及背景色目的 private void tabControl1_DrawItem(object sender, DrawItemEventArgs...因为进度条ProgressBar由于是虚拟模式运行,所以调整BackColor和ForeColor都不会产生效果,它仍然会根据windows主题来更改,为了使其按照我们想要颜色来显示,我们可以将虚拟模式命令去掉...,个人不推荐上述方案,更加推荐通过重写ProgressBarOnePaint方法来改变颜色(前景色和背景色)。...} } } 完成以上步骤之后,我们如何在界面中插入自己进度条呢?

    6.9K30

    Flutter 入门指北之快速搭建界面(含Flutter知识体系)

    ,这边切换 PageView 页面后,TabBar 也需要随之改变 // 通过 tabController 来改变 TabBar 显示位置 _tabController.index...= position; }, ), ); } } 最终效果图就不贴了,可以发现滑动 PageView 或者点击切换 TabBar 位置,界面显示内容都会随之改变...传入值,把 body 传入 PageView 修改成单个 TabChangePage ,然后把 TabChangePage 这个类做修改,把 Container aligment 属性也注释了...不要慌,静下心喝杯茶,眺望远方,这里就需要用 SafeArea 来处理了,在 TabChangePage Container 外层加一层 SafeArea @override Widget...部分代码查看 checkbox_swicth_main.dart 文件 终于这节把 Scaffold 留下坑都填完了,然后又讲了两种基础部件,节要填留下别的坑了,目测还留了 2 个大坑,那就等以后继续解决吧

    1.7K20

    C++项目(1):学生信息管理系统(简单教学版)

    这篇文章,就是把一个超简单案例,翻来覆去说几遍。  为什么一般情况,看别人代码很困难?  ...软件设计   这么小软件,是直接开始写代码,还是设计一再写呢?  考虑了一,还是先设计一吧。说一些设计原则。  一、一些设计原则  1....其实更好做法是,在代码里多写注释!  e.g. 输入变量是什么,返回值是什么,什么样情况返回什么样结果……  开发完head文件以后,再到它对应CPP文件中,完成函数体。  ...可以现在就把具体函数体写全了,  也可以先就把函数体{...}空起来,意思一即可。  我更推荐第二种做法。让程序在语法上能通,具体业务等我们把软件框架搭起来以后再实现。  e.g....C存在目的则是确保M和V同步,一旦M改变,V应该同步更新。    框架和设计模式区别     有很多程序员往往把框架模式和设计模式混淆,认为MVC是一种设计模式。

    1.2K10

    ps切图必知必会

    工具软件对文件进行操作 清除参考线(视图–>清除参考线) 添加参考线(快捷键ctrl+R调出标尺) 图层(F7),信息(F8)注意要把尺寸换成像素为单位 移动工具(对图片进行移动,拖动,移动它会脱离图层,改变元素位置...ctrl+D,或者鼠标点击一矩形选框,在点图片区域任意一部分,都可以取消上一次矩形选框) 裁切工具(切片工具),可实现切图 吸管工具(取色器,吸字体,吸背景色) 橡皮擦(可对你进行过ps操作,进行擦除...) 简单 操作过程gif所示,整个过程,清除辅助线,调出标尺(ctrl+R),信息(F8),即可,放大缩小(ctrl+,ctrl-)或者按住Alt键不放,滚动滚轮向上滚(放大),向下滚,缩小,显示,...如何在网页中抠图 印屏幕,键盘上prtSc SysRq键(把你屏幕上你看到给截取出来) 浏览器(chrome)插件,控制台工具,审查元素,探测到图片,打开图片url,打开图片保存即可 网页上图片都可以拿到...(psd | jPG/Gif/png)特点 JPG/GIF/PNG应用 如何抹掉psd原文件或者图片文字 添加前景色和删除背景色何在网页中抠图 合成雪壁图(css sprite) 使用雪碧图结合定位嵌入到网页中去

    3K20

    C#-DevExpress改变表格行颜色

    改变行颜色通过行样式进行设置,这里使用了一个转换器,可以根据表格单元格数据满足不同条件时,将行背景色设置为不同颜色,参考部分代码如下:xmlns:dxg:"http://schemas.devexpress.com...targetlype, object parameter, Culturelnfo culture){ throw new NotImplementedException (); }}改变行选中颜色当你使用上面的代码进行行颜色设置时...,会发现行选中颜色没办法改变了,可以增加如下代码实现: 使用合并行之后,改变选中颜色这里用是...devexpress15版本,默认设置表格单元格合并属性AllowCellMerge=”True”之后,选中行之后,行背景色没有改变,如何在合并单元格之后,选中能够改变行颜色,我们通过设置单元格样式来实现

    2.2K20

    行式报表-行式引擎适用于大数据量情形

    描述 在 行式报表 中,介绍了行式列表报表制作方式,下面来介绍几个在行式报表典型应用示例。 在线视频教程请点击: 行式报表 2....索引 小节 内容简介 文档链接 条件属性 在满足一定条件改变单元格格式或者显示成不同值。 添加预警,间隔背景色-条件 数据过滤 从大量数据当中,获取到符合条件数据。...排序 结果集筛选 通过设置数据列高属性中结果集筛选来让其只显示 N 个数据。 结果集筛选 1.1 预期效果 在满足一定条件改变单元格格式或者显示成不同值。...条件属性作用是对满足条件数据进行高亮显示加上背景色等,从而突出显示异常数据,其中新值属性会改变单元格显示值。如需了解更多请点击: 条件属性。...注:由于单元格计算顺序,高级排序需要设置在单元格父格上。这里订单 ID,在取订单 ID 时就根据运货费字段值进行降序排列。

    2.4K10

    30分钟精通快应用

    这里值得说明是,android由于屏幕碎片化严重,开发者往往需要消耗不少精力在屏幕适配上面,快应用长度单位支持 px 和 %,这里介绍一比较简单方式: 修改 配置文件manifest.json:...:当点击签到领京豆按钮时,增加京豆数量,改变签到状态图,同时改变按钮文字: export default { data: { text: '欢迎打开详情页',.../progress_unsign_6.png" }, /** * 当用户点击菜单按钮时触发,调用app中定义方法showMenu * 注意:使用加载器测试`创建桌面快捷方式.../progress_sign_7.png" } } 实际操作中,会遇到各种各样问题,: 新增加图片时,需要重新运行编译命令,自动更新或者扫二维码都不生效 , 与 ;...保存该文件从浏览器打开,会自动唤起快应用 快应用&微信小程序&JDReact三者比较 最后 本文只是简单介绍了一快应用入门,开发文档上还有很多内容需要各位有兴趣开发者自己去研究。

    1.8K90
    领券