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

如何在颤动中将下拉选择项设置为TextFormField

在Flutter中,可以使用TextFormField和DropdownButtonFormField来实现在颤动中将下拉选择项设置为TextFormField。

首先,需要引入flutter/material.dart库,然后在Flutter应用程序的主函数中创建一个StatefulWidget。在该StatefulWidget的build方法中,可以使用Column和Form来创建一个表单,其中包含一个TextFormField和一个DropdownButtonFormField。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown TextFormField'),
        ),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  String _selectedItem;

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'TextFormField',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          DropdownButtonFormField<String>(
            value: _selectedItem,
            onChanged: (String newValue) {
              setState(() {
                _selectedItem = newValue;
              });
            },
            items: <String>['Option 1', 'Option 2', 'Option 3']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            decoration: InputDecoration(
              labelText: 'DropdownFormField',
            ),
          ),
          RaisedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                // 执行提交操作
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

在上述代码中,我们创建了一个StatefulWidget,其中包含一个TextFormField和一个DropdownButtonFormField。TextFormField用于输入文本,DropdownButtonFormField用于选择下拉选项。通过设置value属性和onChanged回调函数,可以实现在颤动中将下拉选择项设置为TextFormField。

在表单中,我们还添加了一个RaisedButton,用于提交表单数据。在onPressed回调函数中,可以执行提交操作。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。如果你想了解更多关于Flutter的信息,可以访问腾讯云的Flutter产品介绍页面:腾讯云Flutter产品介绍

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

相关·内容

Excel实战技巧108:动态重置关联的下拉列表

本文主要讲解如何使用少量的VBA代码重置Excel中相关联的下拉列表。...下面将介绍如何在第一个下拉列表中的值发生变化时自动重置与其关联列表的值,这里使用ExcelVBA执行此操作,使用了工作表对象的Change事件过程。...如下图1所示,我们创建了一个级联列表,当单元格C2中选择不同的分类时,在单元格C6中会出现不同的下拉列表项。例如,在单元格C2中选择“水果”,单元格C6中将显示相关的水果名称,可以从中选择水果名。...打开VBE,在左侧“工程资源管理器”中,双击数据验证所在的工作表名,在右侧代码窗口顶部,左侧下拉列表选择“Worksheet”,右侧下拉列表选择“Change”,如下图3所示。...End If End Sub 至此,当更改单元格C2中的选择项时,单元格C6中的内容将更新“请选择…”,如下图4所示。 图4

4.6K20
  • FL STUDIO2023最新V21版本更细功能介绍

    其次提供了音效编辑器,音效编辑器可以编辑出各类声音针对在不同音乐中所要求的音效,例如各类声音在特定音乐环境中所要展现出的高,低,长,短,延续,间断,颤动,爆发等特殊声效。...大家好,关于FL Studio包 V21最新版,FL Studio最新免费版功能简介这个很多人还不知道,coco玛吉多来大家解答!The Mixer以最高的专业标准混合和掌握音乐。...设置窗口 该窗口已重新设计,允许长时间的本地化文本和稍后的搜索,但尚未!还允许调整设置窗口的高度,使其适合垂直分辨率较低的屏幕。 备用撤消 在新计算机上安装时默认启用。...新工具VFX 音序器: 一种模式琶音器和步进音序器,设计用于在 Patcher 中将音符序列发送到连接的乐器插件。 新的和更新的插件: 马克西姆斯 - 网格线和标签更明显。...多项选择项目(包括 Shift+单击和 Alt+Ctrl+单击) “键入以过滤”菜单选项,用于决定键入字母是过滤还是选择项目。 提高搜索速度并降低内存使用量。

    3.3K20

    AngularDart Material Design 选择 顶

    对于可访问性,应该包含在具有role =“listbox”和aria-multiselectable的元素中,除非将role设置“option”以外的其他内容。...popupClass - 要添加到下拉列表弹出窗口的样式类,以便可以以封装方式设置弹出窗口的样式。 有关文档,请参阅MaterialPopup。...constrainToViewport bool  是否限制下拉位置,使其永远不会脱离屏幕。 deselectLabel String  选择项目的文本标签,取消选择当前选择。...当弹出窗口中的另一个元素专注于打开时,应设置false,例如一个搜索框。 options SelectionOptions  用于此选择模型的选项。...trackLayoutChanges bool  设置建议列表是否随输入框滚动。 这是一个传递属性,PopupInterface中所定义。

    6K20

    【愚公系列】2023年11月 Winform控件专题 ComboBox控件详解

    步骤2:在ComboBox的属性窗口中,将DropDownStyle属性设置DropDownList或DropDown。步骤3:将DropDownWidth属性设置所需的宽度。....DropDownWidth = 200;在上述代码中,首先将DropDownStyle属性设置DropDownList,以便用户只能从下拉列表中选择选项。...然后,将DropDownWidth属性设置200像素,以便下拉列表的宽度200像素。...;设置该值时必须将IntegralHeight的属性设置false,而且DropDownHeight 一定要是默认值106,如果下拉列表中的数据项数量超过了5,则将会出现滚动条以便查看所有数据项。...在这里,我们将ComboBox控件中的奇数行设置红色,偶数行设置黑色。在实际开发中,可以根据需求自行修改绘制代码,实现自定义的下拉列表项效果。

    1.9K12

    【愚公系列】2023年09月 WPF控件专题 ComboBox控件详解

    选择项更改事件:可以使用SelectionChanged事件处理ComboBox控件中选择项的更改。可以使用SelectedItem属性获取当前选择的项。...IsEditable:设置ComboBox是否可编辑。如果设置True,用户可以手动输入文本,否则只能从下拉列表中选择。...IsDropDownOpen:获取或设置ComboBox下拉框是否处于展开状态。 Text:当IsEditableTrue时,获取或设置ComboBox中文本框的文本内容。...SelectedIndex:获取或设置ComboBox中选中项的索引。如果没有选中项,该属性值-1。 MaxDropDownHeight:设置ComboBox展开后下拉框的最大高度。...IsReadOnly:设置ComboBox是否只读。如果设置True,用户无法手动输入或选择下拉框中的项。

    1K20

    如何将多个Eclipse项目导入IntelliJ IDEA

    (我们以idea2016.3例) 一、项目导入 1、使用idea创建一个新的项目 (1)、点击Create New Project ? (2)、点击Empty进入工程创建页面 ?...(2)、进入之后选中将要导入的项目(这里我提前已经将项目克隆/检出到本地),图中红色框中的项目是将要导入的项目,按照步骤依次导入即可 ?...(3)、点击OK后选择项目类型,因为将要导入的项目是Maven项目所以勾选下图中红色框住的Maven便可 ?...二、Maven配置 1、找到File--> Settings,进入设置界面,如下图所示 ?...(1)、点击加号,出现如图所示的下拉框,点击Artifact,进入如下图所示页面 ? (2)、选择带exploded的选项然后点击ok,页面就变成了下图所示的样子 ?

    1.2K40

    UML工具:EA(Enterprise Architect)

    创建工程 首先打开E-A,点击文件—新建项目-命名项目并选择项目保存目的地。...完成上述操作后会弹出一个对话框“选择项目模型” 图中几个模型的意思分别是: Business Process 业务流程模型 Requirements 需求分析模型 Use Case 用例模型...设置默认代码环境 在EA中选择工具—选项-代码工程,在窗口的右边的代码工程的默认语言的下拉菜单中选择自己所需要的语言。...设置默认数据库 在EA中选择工具—选项-代码工程-代码编辑器,在右侧窗口中的默认数据库的下拉列表中选择自己所需要的数据库类型 创建类设计模型及如何在EA中设计类模型 右击项目浏览器中的...可见性类的可见性分别可设为public、private、protected。阶段和版本号根据自己的需要设置。备注给该类添加的备注说明。选择编译的语言以方便生成源代码。

    2.8K10

    idea中导入maven项目

    maven项目 首先需要准备一个使用maven构建的项目,我这里用cloud-component项目作为演示 将项目导入到idea中 启动idea 选择 Import Project 选项 选择项目目录下的...cloud-pom文件夹,因为cloud-pom文件夹下有个pom.xml文件,pom.xml文件中记录了项目的配置信息,选好后单击OK按钮 选择项目的构建方式Maven,选好后单击Next按钮...设置 Application context的值/clod-admin,设置完成后单击OK按钮 在Tomcat配置界面依次做如下设置设置Name的值clod-admin(这里当idea中配置了多个...Tomcat时为了区分Tomcat)、设置Tomcat的版本、选择On ‘Update’ action 的值 Update classes and resources 设置 On frame deactivation...的值 Update classes and resources,设置完成后单击OK按钮,此时就配置完成Tomcat 此时单击下图圈出的绿色箭头可以启动Tomcat,并且服务器的连接http:/

    1.4K10

    自动化测试中对Alert, 多窗口,下拉框的处理

    1 python与selenium的API交互 1.1 alert selenium的API提供了对alert弹出框的处理方式,可以对alert弹出框来进行处理的,弹出框,我们获取弹出框的Text...,设置成功后,点击"搜索设置",弹出alert框,alert框文本显示:“已经记录下您的使用偏好”,见效果图: ?....get_attribute('value') in '50' driver.quit() dismiss() dismiss表示取消javascript的警告框,即拒绝,我们任然已百度搜索设置案例...all_selected_options all_selected_options是得到列表的所有选择项,具体案例代码见如下: #!...我们搜索结果显示条数下拉框“每页显示50条”实现的代码: #coding:utf-8 fromselenium import webdriver fromselenium.webdriver.common.by

    3.1K40

    android studio 的下拉菜单Spinner使用详解

    :dropDownSelector:列表框被选中时的背景 android:dropDownWidth:设置下拉列表框的宽度 android:gravity:设置里面组件的对其方式 android:popupBackground...,有两个可选值: dialog:对话框风格的窗口 dropdown:下拉菜单风格的窗口(默认) 可选属性:android:entries:使用数组资源设置下拉列表框的列表项目 如果开发者使用Spinner...接下来Spinner提供Adapter。新建SpinnerActivity.java文件,加载上面新建的布局文件,具体代码如下: ? ?...如果程序需要监控到Gallery选择项的改变,通过为Gallery添加OnltemSelectedListener监听器即可实现。...Android已经不再推荐使用Gallery组件,而是推荐使用其他水平滚动组件,HorizontalScrollView和ViewPager来代替Gallery组件,所以此处不做过多讲解 以上就是本文的全部内容

    6.4K21

    西门子PCS7模拟量单位设置

    之前文章中介绍了西门子PCS7的模拟量编程,如何设置模拟量报警值,如何在操作员画面上设置报警限值。这一篇主要介绍一下模拟量单位如何设置。 APL的单位设定不是随便定滴,而是根据PA行规定义的。...如上图所示,不同的数值对应不同的单位,“1001”对应“℃”,“1010”对应“m”. 这种方式的最大优势就是:可以随时在线修改单位值,而不再需要编译OS以更新单位值的设定了。...此外,还能避免因项目语言设置问题导致的乱码。 当然,以前的单位设定方式仍然可用。 如上图上将“Value”的值设置“0”,然后在“Unit”处下拉菜单选择对应的单位。...一般情况下我们是通过设置“Value”的值来设置模拟量单位的,设置内容根据第一幅图中的对照表设置。...如上图中将PV_InUnit设置1001,对应的是℃,然后将AnIn的输出参数PV_OutUnit连接到MonAnL的输入参数PV_Unit中,即可完成单位的传递,并在操作员画面显示。

    2.3K20

    一站式工业边缘数据采集处理与设备反控实践

    本文将以最新的 2.2 版本例,详细介绍如何在 Neuron 中利用 eKuiper 将采集的设备端生产数据进行计算后发送到云端,以及 eKuiper 接收云端指令后通过 Neuron 反控设备的流程...对应到实际场景中,tag1可以是对应着一个传感器(温度传感器),tag2可以是对应着一个驱动器(开关)。...图片订阅南向设备的数据组:点击右上角添加订阅;点击下拉框,选择南向设备,本例中选择上一步构建的modbus-tcp-1;点击下拉框,选择要订阅的 Group,本例中选择上一步构建的 group-1;点击提交按键完成订阅...在添加动作的弹窗里设置 sink 的详细信息, 如下图所示。图片下拉选择 Sink;填写节点名称;填写分组名称;填写标签字段;选择 提交 完成 sink 动作的添加启动规则启动规则,如下图所示。...图片在模拟器中将tag1的值写43, Neuron 读取到更新的点位值后,data-stream-processing节点将其上报给 eKuiper,而这就会触发之前设置的规则,继而使 eKuiper

    1.2K20

    【愚公系列】2023年11月 Winform控件专题 CheckedListBox控件详解

    否则,当用户右键单击该控件时,选择项会自动切换其选中状态。1.2 ColumnWidthCheckedListBox控件的ColumnWidth属性用于设置该控件中每个项的列宽度。...该属性的值是以像素单位的整数值。如果设置零或负数,则将使用默认列宽度。...如果需要显示多列,可以将该属性设置大于零的值,并将CheckedListBox控件的MultiColumn属性设置true。...例如,如果要将CheckedListBox控件设置显示两列,可以将ColumnWidth属性设置控件宽度的一半,如下所示:checkedListBox1.ColumnWidth = checkedListBox1...您可以从工具箱中将其拖动到窗体上,或者从设计器中添加它。该控件的默认名称为checkedListBox1。

    1.1K11

    喏,你们要的 PyCharm 快速上手指南

    专业版额外增加了一些功能,项目模板、远程开发、数据库支持等。个人学习 Python 使用免费的社区版已足够。...左侧导航栏选择 Pure Python ,右侧的 Location 选择项目的路径, Interpreter 通过下拉栏选择 Python版本 ,这里直接使用 Python 的安装路径即可。...快捷键设置: 在 windows 下一些最常用的默认快捷键: ? Pycharm 也不同平台的用户提供了定制的快捷键方案,习惯了用emacs、vim、vs的同学,可以直接选择对应的方案。 ?...4、调试 强大的 Pycharm 我们提供了方便易用的断点调试功能,步骤如下图所示: ? 简单介绍一下调试栏的几个重要的按钮作用: ?...如果程序在某一步出现错误,程序会自动跳转到错误页面,方便我们查看错误信息 更详细的关于调试的知识参考之前的一篇文章: 如何在 Python 中使用断点调试 5、Python 控制台 为了方便用户,Pycharm

    1.8K40

    大型项目技术栈第七讲 Chosen的使用

    Chosen的使用 Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。...初始化方法chosen配置 选项 默认值 描述 allow_single_deselect false 设置 true 时非必选的单选框会显示清除选中项图标 disable_search false...设置 true 隐藏单选框的搜索框 disable_search_threshold 0 少于 n 项时隐藏搜索框 enable_split_word_search true 是否开启分词搜索,默认开启...false 是否继承 select 元素的 class,如果设为 true,Chosen 将把 select 的 class 添加到容器上 max_selected_options Infinity 最多选择项数...3、select组件属性 组件关键属性就4个如下: data-placeholder:空白点位符,显示默认值 multiple:多选择框属性, <select data-placeholder

    4.2K40
    领券