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

Flutter DropDownButton -下拉按钮禁用时如何显示所选值?

Flutter DropDownButton是一个下拉按钮组件,用于在Flutter应用程序中创建下拉菜单。当下拉按钮被禁用时,可以通过设置value属性来显示所选值。

要显示禁用状态下的所选值,可以使用DropdownMenuItem组件的disabled属性。当禁用下拉按钮时,可以将所选值作为DropdownMenuItem的child属性传递,并将disabled属性设置为true。这样,禁用状态下的下拉按钮将显示所选值。

以下是一个示例代码:

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

DropdownButton(
  value: selectedValue,
  onChanged: isDropdownEnabled ? (newValue) {
    setState(() {
      selectedValue = newValue;
    });
  } : null,
  items: [
    DropdownMenuItem(
      value: 'Option 1',
      child: Text('Option 1'),
      disabled: selectedValue == 'Option 1' && !isDropdownEnabled,
    ),
    DropdownMenuItem(
      value: 'Option 2',
      child: Text('Option 2'),
      disabled: selectedValue == 'Option 2' && !isDropdownEnabled,
    ),
    DropdownMenuItem(
      value: 'Option 3',
      child: Text('Option 3'),
      disabled: selectedValue == 'Option 3' && !isDropdownEnabled,
    ),
  ],
)

在上面的示例中,selectedValue变量用于存储当前所选值。isDropdownEnabled变量用于控制下拉按钮是否禁用。当isDropdownEnabled为false时,下拉按钮将被禁用。

DropdownMenuItem的disabled属性根据所选值和isDropdownEnabled的值来确定是否禁用。如果所选值与当前选项的值相匹配并且下拉按钮被禁用,则禁用该选项。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。对于更多关于Flutter的信息,你可以参考腾讯云的Flutter开发文档:Flutter开发文档

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

相关·内容

Flutter 专题】74 图解基本 DropdownButton 下拉选项框按钮

和尚对于 Flutter 并不系统,总是遇到问题才会准备尝试,今天和尚准备学习一下下拉选择框;Android 提供了便利的 Spinner 而 Flutter 对应的是 DropdownButton...为选中回调;两者其中一个为 null 时为按钮禁用状态,不可点击,默认下拉 icon 为灰色;items 不为空时,需为相同类型的 DropdownMenuItem 类型列表; DropdownButton...icon 为下拉按钮右侧图标,iconSize 为下拉按钮图标尺寸,禁用和启动状态下均可设置;若 icon 设置尺寸以 icon 尺寸为准; icon: Icon(Icons.arrow_right),...disabledHint 为禁用状态下默认展示内容,hint 为按钮启用状态下默认展示内容,采用 hint 时 DropdownMenuItem 中 type 不为空,否则只会显示第一条 item; /...elevation 是 z 轴上垂直阴影,只能是 1 / 2 / 3 / 4 / 6 / 8 / 9 / 12 / 16 / 24,默认阴影高度是 8,若设置其他显示; //源码 8: <BoxShadow

7.4K31

你知道吗,Flutter内置了10多种Button控件

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用...DropdownButton DropdownButton下拉选择按钮,基本用法如下: var _dropValue = '语文'; _buildButton() { return DropdownButton...当用户未选中时,即value 为null,显示''请选中",用法如下: DropdownButton( hint: Text('请选择'), value: null, ... ) 效果如下...默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下: DropdownButton( icon: Icon(Icons.add), iconSize: 24, iconDisabledColor...设置其初始: PopupMenuButton( initialValue: '语文', ... ) 设置初始后,打开菜单后,设置的将会高亮,效果如下: ?

1.9K30

你知道吗,Flutter内置了10多种Button控件

版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度...DropdownButton下拉选择按钮,基本用法如下: var _dropValue = '语文'; _buildButton() { return DropdownButton(...''请选中",用法如下: DropdownButton( hint: Text('请选择'), value: null, ... ) 效果如下: [1240] 默认情况下,下拉选项的图标是倒立的三角...PopupMenuButton( initialValue: '语文', ... ) 设置初始后,打开菜单后,设置的将会高亮,效果如下: [1240] 获取用户选择了某一项的...', icon: Icon(Icons.person), iconSize: 30, color: Colors.red, onPressed: () {}, ) 当长按时显示提示,效果如下

2.4K00

Flutter | 超实用简单菜单弹出框 PopupMenuButton

点击 AppBar 右上角的按钮,弹出一个菜单供用户选择。 幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果。...大致意思为: 当按下的时候显示一个菜单,选择了一个项目的时候会回调 onSelected,传递的所选菜单的。 可以提供 child or icon ,但是不能同时提供。...里定义了 PopupMenuButton3.设置 icon 为 Icon(Icons.more_vert)4.itemBuilder 需返回一个 List>5.这里传入的就是...总结 这样就完成了一个超级简单并且实用的菜单弹出框, 其实它的实现逻辑和 DropdownButton 差不多,都是使用了 PopupRoute, 有对这方面感兴趣的同学,可以查看我以前写的文章:Flutter...源码系列:DropdownButton 源码浅析 完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

4.9K30

Flutter 源码系列:DropdownButton 源码浅析

DropdownButton 构造函数及简单使用 其实关于 DropdownButton 的构造函数和简单使用我在上一篇文章中已经有过讲解, 如有不懂怎么用的,可以看这篇文章:Flutter DropdownButton...下面重点说一下 DropdownButton如何实现的。 DropdownButton 的实现 我们需要带着如下几个问题去看源码: 1.DropdownButton 是用什么来实现的?...我们在上一篇文章中已经了解到,DropdownButton 是一个 statefulWidget,那我们想要了解他是如何实现的,就直接跳转到他的 _DropdownButtonState 类中。...innerItemsWidget 是什么 接着往上面找: // 如果为空(则_selectedindex为空),或者如果禁用,则显示提示或完全不显示。...2.如果不是选中的 index,则根据 index 来控制透明动画延时时间,来达到效果3.点击时用 Navigator.pop 来返回选中的 到这里我们就把 material/dropdown.dart

1.6K30

AngularDart Material Design 选择 顶

当与单个选择模型一起使用时下拉选择时关闭。 使用多选模型时,用户必须通过单击其外部来关闭下拉列表。 可以通过传递material-select-item元素手动声明选择选项。...buttonAriaLabelledBy String 在下拉按钮中描述选择的元素的id。 例如,对于带有数字选项的下拉列表,显示“每页结果”的文本元素。...disabled bool 是否禁用该按钮。 enforceSpaceConstraints bool  避免渲染下拉屏幕。 error String  下拉按钮下方显示错误。...showButtonBorder bool  是否显示下拉按钮的下边框。 slide String  弹出缩放的方向。 有效为x,y或null。...role String 下拉按钮的ARIA角色。 showButtonBorder bool 是否显示下拉按钮的下边框。

6K20

重走Flutter状态管理之路—Riverpod进阶篇

前面一篇文章,我们了解了如何正确的去读取状态,这一篇,我们来了解下不同的Provider都有哪些使用场景。...这种按钮的一个普通的实现,是一个获得当前页面索引的Widget,如果该索引等于0,我们将禁用该按钮。 这段代码可以是这样。...但是如果Provider暴露的没有变化,那么PreviousButton将不会重建。 这个变化既提高了我们的按钮的性能,又有一个有趣的好处,就是把逻辑提取到我们的Widget之外。...为此,我们将使用DropDownButton。...更新状态的简化 参考下面的这个场景,有时候,我们需要根据前一个状态,来修改后续的状态,例如Flutter Demo中的加数器。

3.3K10

Flutter&Flame 游戏 - 贰贰】菜单、字体和浮层

线上加载,可以使用 google_fonts 的字体库,所有的字体样式都可以通过 GoogleFonts 类通过静态方法获取,使用时会自动下载字体。...在 Flame 中展示浮层 有时我们有显示浮层的需求,比如暂停游戏时,显示暂停面板。不然用户不小心碰到了暂停键,有可能不知所措,显示一个浮层界面可以更好的引导交互。...另外,定义了一个 menuId 的静态常量,为了方便标识这个菜单,而不是在每处使用时,都写一个死的字符串。...id 和 组件内容 的映射关系: image.png ---- 3.通过 浮层id 开启或隐藏浮层,其中 overlays 是 Game 中的公开成员: image.png ---- 本文介绍了,如何在...@张风捷特烈 2022.06.17 未允转 我的 掘金主页 : 张风捷特烈 我的 B站主页 : 张风捷特烈 我的 github 主页 : toly1994328

1.5K30

Flutter:使用复选框进行下拉多选

Flutter:使用复选框进行下拉多选 本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法。在第一种方法中,我们将从头开始构建多选。...从头开始使用复选框创建多选 应用预览 image-20220102224407863 我们将要构建的应用程序有一个专业的、功能齐全的多选小部件,可显示选项列表。...当按下升高的按钮时,将显示多选对话框。它让用户在编程中选择他们最喜欢的主题。所选主题将作为筹码显示在屏幕上。...be hard-coded or dynamically fetched from a database/API final List _items = [ 'Flutter...有几个不错的开源包供您使用: flutter_multi_select multiselect_formfield flutter_multiselect multiselect

3.1K20

Flutter&Flame 游戏 - 贰陆】pinball 源码分析 - 游戏主页

当加载完成之后,就会进入到如下的主菜单界面,有个大大的 Play 按钮。 可以看到此时两个吉祥物是在运动的,而且背景中也会显示排行榜的信息。...gameOver 状态: enum GameStatus { waiting, playing, gameOver, } ---- 也就是说,左上角的分数面板通过两个 Bloc 中的状态,...---- 界面显示如下,在游戏结束后,点击左上角按钮,会弹信息框对该项目进行介绍: 提示框对应的组件,可以详见源码在的 MoreInformationDialog ,这和游戏本身关系不大,就不赘述了。...下一篇我们将继续分析 pinall 的源码,看一下如何选择角色、如何弹出 how to play 的信息面板。...那本文就到这里,明天见 ~ @张风捷特烈 2022.06.22 未允转 我的 公众号: 编程之王 我的 掘金主页 : 张风捷特烈 我的 B站主页 : 张风捷特烈 我的 github 主页 : toly1994328

76620

AngularDart Material Design 下拉列表 顶

当与单个选择模型一起使用时下拉选择时关闭。 使用多选模型时,用户必须通过单击其外部来关闭下拉列表。 可以通过传递material-select-item元素手动声明选择选项。...buttonAriaLabelledBy String  在下拉按钮中描述选择的元素的id。 例如,对于带有数字选项的下拉列表,显示“每页结果”的文本元素。...disabled bool 是否禁用该按钮。 enforceSpaceConstraints bool 避免渲染下拉屏幕。 error String  下拉按钮下方显示错误。...showButtonBorder bool  是否显示下拉按钮的下边框。 slide String  弹出缩放的方向。 有效为x,y或null。...visible bool  下拉列表是否可见。 width dynamic  下拉列表的宽度,默认为无,有效为0-5。

5K20

Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

组件是悬浮按钮组件 ; FloatingActionButton 组件常用设置 : 点击事件 : onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码...Scaffold 组件的 floatingActionButton 字段 ; onPressed 字段设置点击事件 , child 设置显示组件 ; Scaffold( // 设置悬浮按钮 floatingActionButton...设置当前选中的底部导航索引 currentIndex: _currentSelectedIndex, // 设置点击底部导航栏的回调事件 , index 参数是点击的索引...: 三目运算符 ), ); } } 运行效果 : 打印结果 : 点击悬浮按钮后打印如下内容 ; I/flutter (23329): 悬浮按钮点击 二、RefreshIndicator.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

2.6K00

Flutter应用程序添加交互性 顶

一旦你有一个连接和启用的设备,或者你已经启动了iOS模拟器(Flutter安装的一部分),你很好! Flutter的Building Layouts展示了如何为下面的截图创建布局。 ?...小部件的状态由可以改变的组成,例如滑块的当前或复选框是否被选中。 小部件的状态存储在状态对象中,从而将小部件的状态与外观分开。...开发人员可能不在乎突出显示如何管理的,并且倾向于轻敲框处理这些细节。 Dart代码:lib/main.dart 其它交互式小部件 Flutter提供各种按钮和类似的交互式小部件。...Radio RaisedButton Slider Switch TextField 资源 将交互添加到您的应用时,以下资源可能会有所帮助。...处理手势,Flutter Widget框架导览中的一部分:如何创建按钮并使其响应输入。 Flutter中的手势:Flutter手势机制的描述。

4.2K20

【FlutterUnit周边】SliverPersistentHeader使用指南

如下效果: 在上滑时Tap栏会逐渐变矮,直到最小下拉到顶时变矮的Tap栏会逐渐变高,直到最大 FlutterUnit本身主页比较复杂,本文就来写一个最简实践,用最少的代码来实现这个效果。...上滑效果 下拉效果 一、项目初始 1....上滑: 顶部会滑出 上滑:顶部会滑出 下拉:直到滑到顶端时,顶部才会展开 下拉: 任意位置下拉时, 空间会展开 ---- 三、使用 SliverPersistentHeader 1....封装PersistentHeaderBuilder 上面使用起来比较麻烦,可以自定义一个PersistentHeaderBuilder来简化构建 使用builder属性,将创建的逻辑移交到使用时,可以回调一些有价值的数据...@张风捷特烈 2020.10.25 未允转 ~ END ~

71220

使用 Android Studio 进行 Flutter 开发

本文将与你一起回顾如何在 Android Studio 里进行 Flutter 工具的配置。 创建项目 你可以通过多种方式来创建新项目。 ?...⚠️ 关于设置公司域名 “在创建新应用时,一些 Flutter IDE 插件需要一个逆序的域名,比如 com.example。...“如果 Run 和 Debug 按钮不可用且未显示目标设备,则意味着 Flutter 未发现任何已连接的 iOS 、Android 设备或模拟器。你需要连接设备或启动模拟器才能继续。...” 找到选择目标下拉按钮,点击它会显示出可用设备列表。 选择你希望启动应用的设备。当连接设备或启动模拟器时, 列表中将会加入新选项。...调试基于默认的启动配置,如果需要自定义,点击选择目标下拉按钮,选择 Edit configuration 进行配置。 快速编辑和查看效果 Flutter 有效加快开发周期。

6.1K30
领券