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

Flutter DropdownMenu不会更新当前选择

是因为没有正确设置状态管理。

在Flutter中,DropdownMenu是一个常用的下拉菜单组件,它可以让用户从预定义的选项中选择一个值。当用户选择一个新的值时,应用程序应该更新当前选择并重新渲染界面。

要解决DropdownMenu不更新当前选择的问题,可以按照以下步骤进行:

  1. 定义一个变量来保存当前选择的值。例如,可以使用一个字符串类型的变量selectedValue来保存当前选择的值。
  2. 在DropdownMenu的onChanged回调函数中,更新selectedValue的值。这个回调函数会在用户选择一个新的值时被调用。例如,可以使用setState函数来更新selectedValue的值,以触发界面重新渲染。
  3. 在DropdownMenu的value属性中,将selectedValue作为当前选择的值进行设置。这样,DropdownMenu会根据selectedValue的值来显示当前选择的选项。

以下是一个示例代码:

代码语言:txt
复制
String selectedValue = 'Option 1';

DropdownButton<String>(
  value: selectedValue,
  onChanged: (newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
  items: [
    DropdownMenuItem(
      value: 'Option 1',
      child: Text('Option 1'),
    ),
    DropdownMenuItem(
      value: 'Option 2',
      child: Text('Option 2'),
    ),
    DropdownMenuItem(
      value: 'Option 3',
      child: Text('Option 3'),
    ),
  ],
)

在上述示例中,selectedValue变量保存了当前选择的值。在用户选择一个新的值时,selectedValue会被更新,并且界面会重新渲染以显示新的选择。

对于Flutter开发,腾讯云提供了一系列相关产品和服务,例如:

  • 腾讯云移动开发平台:提供了丰富的移动开发工具和服务,包括移动应用开发框架、移动测试工具等,可以帮助开发者快速构建高质量的移动应用。
  • 腾讯云云服务器:提供了可靠、安全的云服务器实例,可以用于部署和运行Flutter应用程序。
  • 腾讯云对象存储:提供了高可靠、低成本的对象存储服务,可以用于存储Flutter应用程序中的静态资源文件。
  • 腾讯云数据库:提供了可扩展、高性能的数据库服务,可以用于存储和管理Flutter应用程序中的数据。

以上是关于Flutter DropdownMenu不会更新当前选择的解决方法和腾讯云相关产品的介绍。希望对您有帮助!

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

相关·内容

Flutter 组件集录 | 下拉菜单 DropdownMenu 组件

前言 Flutter 框架中新增了 DropdownMenu 下拉按钮,可以让我们更方便地实现下拉选择的交互。本文案例源码可以详见 【FlutterUnit 的 DropdownMenu】 2....DropdownMenu 基础使用 首先通过一个最简单的案例体验一下 DropdownMenu 的使用,如下所示: 点击使会下拉展示菜单选项,选择科目 ; 点击时选中科目,下方的文本相应变化; 支持输入定位到指定的菜单条目...弹出菜单样式 下面是右侧选择图标的 DropdownMenu 组件构建逻辑,其中 requestFocusOnTap: 点击时是否获取焦点,置为 true 在移动端上会弹出软键盘,桌面端无法输入。...enableFilter: 弹出菜单项是否以当前内容搜索,如果为 true, 会因为过滤使得菜单响应减少。...icon.label, leadingIcon: Icon(icon.icon), ); }, ).toList(), ); } 下面是左侧选择颜色的

1.9K10

不会错过的2020年7个最重要的Flutter更新

Material 风格组件更新 新功能并不是框架中唯一值得注意的更改。在这一年中,Material 包已经增加了新的小部件,并进行了更新以匹配新的Material指南。...今年推出的新小部件是: NavigationRail InteractiveViewer 而更新的小部件包括: DatePicker TimerPicker Slider RangeSlider 其他已更新的小部件是...在Flutter 1.22中,扩展了Flutter中可用的标准“Material”按钮集,并修改了它们的主题。...该框架已更新,以使其与iOS 14的新策略和功能兼容*。cupertino_icons*程序包已扩展为带有新图标,并且现有图标已更新为与最新的iOS 14样式匹配。...整整一年来,程序包开发人员一直在更新其程序包,以使它们从一开始就与null安全兼容。因此,开发人员的过渡将更加轻松。

1.5K10

Flutter 专题】104 图解自定义 ACEDropdownButton 下拉框

和尚之前尝试过 Flutter 自带的 DropdownButton 下拉框,简单方便;但仅单纯的原生效果不足以满足各类个性化设计;于是和尚以 DropdownButton 为基础,调整部分源码...backgroundColor 设置下拉框背景色; 添加 menuRadius 设置下拉框边框效果; 添加 isChecked 设置下拉框中默认选中状态及 iconChecked 选中图标; 下拉框在展示时不会遮挡...、_DropdownMenu 和 _DropdownRoute; ?...中绘制 _DropdownMenuPainter 时处理,默认的背景色为 Theme.of(context).canvasColor;当然我们也可以手动设置主题中的 canvasColor 来更新下拉框背景色...避免遮挡 和尚选择自定义 ACEDropdownButton 下拉框最重要的原因是,Flutter 自带的 DropdownButton 在下拉框展示时会默认遮挡按钮,和尚预期的效果是: 若按钮下部分屏幕空间足够展示所有下拉

1.9K20

Flutter 源码系列:DropdownButton 源码浅析

DropdownButton 构造函数及简单使用 其实关于 DropdownButton 的构造函数和简单使用我在上一篇文章中已经有过讲解, 如有不懂怎么用的,可以看这篇文章:Flutter DropdownButton...3.为什么每次弹出的位置都是我上次选择item的位置? 带着如上问题,我们开始。 DropdownButton 是用什么实现的?...为什么每次弹出的位置都是我上次选择item的位置? 上面可以看到在点击的时候跳转到了 _DropdownRoute,而 _DropdownRoute 最终返回了一个 _DropdownMenu。..._DropdownMenu _DropdownMenu 是一个有状态的小部件,那我们直接看它的 _State....ListView3.展开时通过计算当前选中的 index 来进行绘制背景,以达到效果 通过查看源码,我们是不是可以进行举一反三: 1.是否可以使用 PopupRoute 来实现一些功能?

1.6K30

Flutter 3.7更新详解

现在你可以按照类或者内存类型对当前的内存分配进行分析,可以在运行时分析哪些代码调用了哪些部分的内存,也可以对比两个不同时间点的内存快照之间的差异来了解内存使用的细节。...我们对 gen-l10n 进行了重写以支持下述特性: 描述性的语法错误 嵌套或多个复数、选择和占位的消息内容 更多内容可以了解已经更新Flutter 应用里的国际化 文档。...本次版本发布中,Flutter 引擎在动态更新应用状态至 Dart VM 方面有所进步。...结语 还是那句话,如果没有 Flutter 社区中优秀、热情贡献者们,Flutter 不会像现在这样优秀,在我们未来持续进行的这段旅程中,我们希望你可以知道,没有你们,我们无法做出这样的优秀成绩。...Flutter 3.3更新详解

3.1K00

FlutterFlutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

Container 组件 , Container 组件内部包含了一个 Column 组件 ; /// 浮动按钮点击事件 /// 点击浮动按钮 , 弹出一个菜单 /// 菜单有两个按钮 , 分别是 拍照 / 选择图片...onPressed: () { /// 浮动按钮点击事件 /// 点击浮动按钮 , 弹出一个菜单 /// 菜单有两个按钮 , 分别是 拍照 / 选择图片...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn.../docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com/flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程...: GitHub 地址 : https://github.com/han1202012/flutter_photo ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 : https

1.5K30

TDesign 更新周报(2022年7月第2周)

panelPreselection api优化面板月份展示Drawer: 优化抽屉拖拽体验 Bug FixesSpace: 过滤无效的节点Cascader: 修复多选时,文本过长未处理的问题修复选中内容过多时,再点击选择器后的闪动问题...value 类型, 将传入 TCheckBox 组件的 name 转为 string 类型Cascader: 修复筛选无法输入问题DatePicker: 优化面板月份展示Transfer: 全选应该只选择搜索后的结果...Popup: 移除 transitionProps 属性,存在不兼容更新 Bug FixesTabs: 修复选项卡不存在时滑动报错问题DropdownMenu: 修复关闭时无动画的问题 FeaturesFab...: 支持文本自适应Tag: 视觉更新支持图标DropdownMenu: 新增 toggle 示例方法,用于切换下拉菜单DropdownMenu: 新增 keys 属性以支持自定义 label 和 value...: 修复 dropdownmenu-item 的 label 不支持动态更新等问题DropdownMenu: 修复 radio、checkbox 样式问题详情见:https://github.com/Tencent

2.2K10

TDesign 更新周报(2022年5月第4周)

组件库 Vue2 for Web 发布 0.41.6 Features ColorPicker:新增颜色选择器,使用请参照 官网 Bug Fixes Table: EnhancedTable,树形结构中...releases/tag/0.41.6 Vue3 for Web 发布 0.15.2 Bug Fixes ColorPicker:修复 color-picker-panel 使用 v-model 值没有正确更新...Miniprogram for WeChat 发布 0.12.1 Bug Fixes Dialog:修复按钮传入 openType 不生效的问题 Collapse:修复 t-class 外部样式类无法使用的问题 DropdownMenu...Collapse:headerRightContent 移除 boolean 类型,存在不兼容更新 Features Steps:节点支持自定义样式 Bug Fixes Tabbar:优化代码避免在...setData 里传输不必要的页面实例 Sticky:修复在无法获取页面实例时报错的问题 Skeleton:添加组件基础默认样式 DropdownMenu:修正遮罩层的位置,以及下拉菜单的高度 DropdownMenu

1.6K30

谷歌 Flutter 1.17 发布

除了新的小部件,此版本还包括“材质” DatePicker和“文本选择”溢出小部件的更新。...更新的文本选择在Android上溢出 iOS上的更新文本选择溢出 当按钮的长度比没有溢出时可以显示的时间长时,文本选择菜单现在可以提高Android和iOS的保真度。...此版本更新了TextTheme API以匹配当前的Material规范,但保留了旧名称,以使您的代码不会中断。但是,旧名称已被弃用,因此您将收到警告,以鼓励您采用新名称。...在进行此更改之前,如果您有任何分析错误,“热重装”将不会重装您的代码。如果分析错误不会影响您当前正在运行的代码(例如在单元测试中),那么这可能会令人沮丧。...如果您希望在Android Studio或IntelliJ的Flutter插件中更早地访问此类更改,Flutter团队现在为IntelliJ插件提供了一个开发通道,您可以选择该通道以更快地进行更新

3.5K10

Flutter 1.17版本重磅发布

此版本更新了TextTheme API以匹配当前的Material规范,但保留了旧名称,以使您的代码不会中断。但是,旧名称已被弃用,因此您将收到警告,以鼓励您采用新名称。...工具:将Dart DevTools端口移植到Flutter,Android快速入门等 此版本使我们非常接近将Dart DevTools的当前版本与新的Flutter版本交换。...如果您以Android为目标,则需要注意的另一个变化是,当创建新的Flutter项目时,AndroidX是唯一的选择。...进行此更改之前,如果您遇到任何分析错误,“热重装”将不会重装您的代码。如果分析错误不会影响您当前正在运行的代码(例如在单元测试中),那么这可能会令人沮丧。...如果您希望在Android Studio或IntelliJ的Flutter插件中更早地访问此类更改,我们现在为IntelliJ插件提供了一个开发通道,您可以选择该通道以更快地进行更新

2.5K10

flutter跨平台原理

Hot Reload这种神奇的效果,在DartVM将程序中的类结构更新完成后,Flutter会立即重建整个控件树,从而更新界面。...的转换,因为Flutter在执行热刷新时会保留程序原来的state 3.全局变量和静态成员变量,这些变量不会在热刷新时更新。...4.修改了main函数中创建的根控件节点,Flutter在热刷新后只会根据原来的根节点重新创建控件树,不会修改根节点。...3.AOT方式编译成机器码,例如Flutter App框架(Flutter)。 最终选择Dart作为开发语言主要有几个原因: 1.健全的类型系统,同时支持静态类型检查和运行时类型检查。...Dart的垃圾回收也采用了多生代算法,新生代在回收内存时采用了“半空间”算法,触发垃圾回收时Dart会将当前半空间中的“活跃”对象拷贝到备用空间,然后整体释放当前空间的所有内存: 整个过程中Dart

1.9K30

Vant Weapp 1.0 正式版发布

版本中,我们新增了 11 个实用的基础组件: Grid 宫格,用于展示内容或进行页面导航 Image 图片,增强版的 Image 标签,支持图片懒加载与加载失败提示 Circle 环形进度条,告知用户当前的状态和进度...提供界面加载过程中的过渡效果 IndexBar 索引栏,通讯录中的字母索引栏,用于长列表快速索引 Uploader 文件上传,上传一个或多个文件 CountDown 倒计时,用于显示活动倒计时、短信验证码等 DropdownMenu...下拉菜单,用于列表的分类选择、筛选及排序 ?...从 1.0 版本开始,Vant Weapp 中的所有组件都支持通过 CSS组定义属性 进行样式定制,具体使用姿势可查看更新日志。 ?...1.3 不兼容更新 1.0 版本中包含少量不兼容更新,主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目,请按照更新日志依次检查,大部分项目可以无痛升级。

74120

Flutter 即学即用系列博客——01 环境搭建

Flutter 有英文版的官网和中文网,大家可以根据自己的喜好和情况进行选择Flutter 官网安装链接?...获取 Flutter SDK ? 从图中可以看到,当前的目标是获取 Flutter SDK。 点击蓝色按钮,下载 Flutter SDK。...可以看到 Flutter 插件安装好了,只不过这里提示版本不够新。 如果你的 Android Studio 版本为 3.0 或者更高,就不会报错,那么可以忽略下面的修复步骤。...而 Flutter 需要 Android Studio 3.0 或者更高版本支持。 这边更新 Android Studio 之后重启。...此外,还需要更新 dart。 更新完之后就可以看到创建 Flutter 项目了。 ? 到了这里基本上对于 Android 开发的你来说环境搭建就完成了。 ? 4.

92640

Flutter浪潮下的音视频研发探索

Flutter之前已经有很多跨平台UI解决方案,那为什么选择Flutter呢? 我们主要考虑性能和跨平台的能力。...虽然现在闲鱼某些场景下会有卡顿闪退等情况,但是这是一个新事物发展过程中的必然问题,我们相信未来性能肯定不会成为限制Flutter发展的瓶颈的。 ?...的数据更新就可以顺利把刚才创建的数据更新到它的纹理中,然后再将纹理交给SKIA渲染到屏幕上。...Flutter引擎启动后会启动四个线程: 第一个线程是UI线程,这是Flutter自己定义的UI线程,主要负责GPU发出的VSync信号时候用当前Dart编译的机器码和当前运行环境创建出Layer Tree...第二,多线程并发式能够保证模块内的OpenGL操作是在当前线程内而不会跑到主线程去,彻底避免Flutter的OpenGL 环境被破坏。第三,多线程并行可以充分利用CPU多核架构,提升处理速度。 ?

2.6K30

Flutter + zsh 」设置镜像后 macOS 执行 flutter packages get flutter pub get 依然慢

一、前言 国内使用 Flutter 时,会出现 flutter 下载/更新慢的问题 此时如果我们去网上搜索都是让添加镜像,但有时添加了还是不行 这里我详细的总结了下解决方法 二、国内镜像 首先还是中规中矩...但是一部分同学还是不行 比如由于我使用的是 iTerm2,所以我终端使用的是 zsh,当然还有其他情况 差了些文章 Mac环境搭建Flurrer问题解决 后,我发现终端启动时 ~/.bash_profile 将不会被加载...这里就直接 po 出 flutter 插件默认本地路径: flutter 的 SDK 目录 /.pub-cache/hosted/当前使用的镜像地址文件夹/ 3.3.1 参考示例: /usr/local...3.3.2 解决方法: 第一步,按需选择操作步骤: 1、耐心等待下载(若下载的插件数量非常多,等待的耗时会比较长) 2、将其他镜像文件夹下已下载的插件文件,拷贝到当前使用的镜像的目录下,并执行 flutter...packages get (避免有遗漏的插件) 3、手动到插件的 github 下载文件,放到当前使用的镜像目录下 第二步,执行 flutter run 大功告成~~ 总结 国内敲代码实属难以享受编程的乐趣

1.7K20

从渲染原理剖析如何提高 Flutter 应用性能

Flutter 性能概述 1.1 Flutter 基本渲染原理 在我们讨论如何对 Flutter 进行性能优化之前,首先得掌握 Flutter 的渲染原理,这样才能更好的对症下药。...timeline 具体所呈现的内容如下图所示,进入 timeline 之后,Record Streams Profile 值选择 Flutter Developer 即可,里面可以很清晰的看到每个渲染步骤所花的时长...其中,ComponentElement 主要做组合,不会直接参与布局。...,再对上一帧的 Element 树做遍历,在 Element 类上有一个 updateChild 的方法,它可以对子节点进行比较并操作,通过查看当前的子节点类型和上一帧的子节点类型是否一致,如果不一致,...还有 Flutter 组件选择等其他方面也是有所讲究的,例如 ListView 和 ListView.builder 之间的选择;还有在实际的业务开发中,对于 Opacity 这样大量消耗性能的 Widget

1.4K30
领券