首页
学习
活动
专区
工具
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(), ); } 下面是左侧选择颜色的

5.2K10

您不会错过的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 在下拉框展示时会默认遮挡按钮,和尚预期的效果是: 若按钮下部分屏幕空间足够展示所有下拉

    2K20

    Flutter 源码系列:DropdownButton 源码浅析

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

    1.7K30

    Flutter 3.7更新详解

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

    3.2K00

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

    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.6K30

    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.3K10

    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.7K30

    谷歌 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

    2K30

    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.

    95640

    Vant Weapp 1.0 正式版发布

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

    78220

    【Flutter 工程】001-Flutter 状态管理:Riverpod

    【Flutter 工程】001-Flutter 状态管理:Riverpod 一、概述 1、官方状态管理 状态管理处理应用程序数据流动和 UI 更新的关键概念。...Flutter 提供了 StatefulWidget 作为最基本的状态管理方法。有状态组件可以存储和更新自身状态,适用于简单的场景和局部状态。...2、状态管理解决方案 在 Flutter 中,还有其他的状态管理方法可供选择,以下是一些常见的状态管理方法。...2、ref.read: ref.read方法用于读取状态,但不会订阅状态变化。 当使用ref.read读取状态时,它会立即返回当前的状态值,但不会自动更新界面。...3、总结 使用ref.watch会订阅状态的变化并自动更新界面,适用于需要及时响应状态变化的情况。 使用ref.read会立即返回当前的状态值,适用于不需要及时更新界面的情况。

    7210

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

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

    2.7K30

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

    用于判定单个文件的是否继续上传 @chaishi (#1461)新增事件 onValidate,文件校验不通过时触发,可能情况有:自定义全文件校验不通过、文件数量校验不通过、文件数量校验不通过、文件名重复(允许重复文件名场景下不会触发... @chaishi (#1461) Bug FixesTreeSelect: 修复 data 异步更新,input 值没有及时更新的问题 @HelKyle (#1481)Dropdown:优化dropdown...disabled 状态下点击报错的问题 @LeeJim (#853) OthersTabBar: 新增单元测试 @LeeJim (#846)Upload: 新增单元测试 @anlyyao (#847)DropdownMenu...Tencent/tdesign-miniprogram/releases/tag/0.21.0解决方案及周边TDesign Vue Starter 发布 0.4.2 Features多标签页的右键操作扩展支持非当前页进行操作...Tencent/tdesign-vue-starter/releases/tag/0.4.2TDesign Vue Next Starter 发布 0.5.1 Features多标签页的右键操作扩展支持非当前页进行操作

    1.6K30
    领券