首页
学习
活动
专区
工具
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.8K31

你知道吗,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: '语文', ... ) 设置初始值后,打开菜单后,设置的值将会高亮,效果如下: ?

2.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.6K00

    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

    5.7K30

    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程

    和 DropdownButtonFormField 是两个常用的组件,用于创建下拉菜单和表单中的下拉选择项。...区别与使用场景DropdownButton:适用于独立使用的下拉菜单,不需要表单验证。DropdownButtonFormField:适用于表单中的下拉菜单,需要表单验证和处理。...final:在运行时初始化,只能被赋值一次,用于定义在运行时确定但不可改变的值。普通变量:可以在任何时候修改,适用于需要频繁更改的数据。...扩展知识Flutter中常见的Flutter按钮组件:1. **ElevatedButton**特点:具有阴影效果,看起来像是浮起的。适用场景:适用于大多数需要突出显示的按钮。2....适用场景:适用于文字为主且不需要额外视觉强调的按钮。4. **IconButton**特点:专门用于显示图标,可以设置图标大小和颜色。适用场景:适合在界面中需要快速执行操作的图标按钮。5.

    8110

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

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

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

    4K11

    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&Flame 游戏 - 贰贰】菜单、字体和浮层

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

    1.5K30

    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。

    5.1K20

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

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

    78920

    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.4K21

    【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.8K00

    为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 ~

    1.1K20
    领券