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

将TextFormField中的数据从另一个小部件检索到main

在Flutter中,可以通过使用回调函数将TextFormField中的数据从另一个小部件检索到main。

首先,在main.dart文件中创建一个StatefulWidget类,例如MyApp。在MyApp类的构造函数中,创建一个空的字符串变量,用于存储从另一个小部件检索到的数据。

代码语言:txt
复制
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String retrievedData = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Retrieve Data Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Retrieved Data: $retrievedData'),
              AnotherWidget(callback: (data) {
                setState(() {
                  retrievedData = data;
                });
              }),
            ],
          ),
        ),
      ),
    );
  }
}

在上述代码中,MyApp类继承自StatefulWidget,并创建了一个名为retrievedData的字符串变量,用于存储从另一个小部件检索到的数据。在MyApp的build方法中,使用Column小部件将显示retrievedData的文本和AnotherWidget小部件放在一起。

接下来,创建一个名为AnotherWidget的StatelessWidget类,用于显示一个包含TextFormField的小部件。在AnotherWidget类的构造函数中,接收一个回调函数作为参数,该回调函数用于将TextFormField中的数据传递回MyApp。

代码语言:txt
复制
class AnotherWidget extends StatelessWidget {
  final Function(String) callback;

  AnotherWidget({required this.callback});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: TextFormField(
        onChanged: (value) {
          callback(value);
        },
        decoration: InputDecoration(
          labelText: 'Enter data',
        ),
      ),
    );
  }
}

在上述代码中,AnotherWidget类继承自StatelessWidget,并接收一个名为callback的回调函数作为参数。在TextFormField的onChanged回调中,将输入的数据通过回调函数传递回MyApp。

最后,在main函数中,将MyApp作为根小部件运行。

代码语言:txt
复制
void main() {
  runApp(MyApp());
}

这样,当在TextFormField中输入数据时,该数据将通过回调函数传递给MyApp,并更新retrievedData的值。然后,retrievedData的值将在MyApp的build方法中显示出来。

这是一个简单的示例,演示了如何从另一个小部件检索到TextFormField中的数据并在主小部件中使用。根据具体的需求,你可以根据需要进行修改和扩展。

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

相关·内容

数据ETL」数据民工数据白领蜕变之旅(六)-Python能力嫁接到SSIS

此处使用SSIS【文件系统任务】来完成文件先删除操作。 接下来,我们回到常规任务,新生成res.csv文件进行数据抽取并加载到数据。...在python群体,的确熟练使用后,数据再作一步,直接上传到数据,也并非难事。...在下一篇,我们重新回到微软系,使用SSIS和PowerQuery联合,轻量化ETL工具一些好用易用能力同样嫁接到SSIS,同时又可以避开此短板部分。敬请关注。...* 系列文章 数据民工数据白领蜕变之旅(一)-工具总览 https://www.jianshu.com/p/2bd3f90206ec 数据民工数据白领蜕变之旅(二)-重温Excel催化剂经典 https.../p/d154b09c881d 「数据ETL」数据民工数据白领蜕变之旅(四)-有了PowerQuery还需要SSIS吗?

3.1K20

数据ETL」数据民工数据白领蜕变之旅(七)-Excel(PowerQuery+VBA)能力嫁接到SSIS

所以,若可以在标准SSIS流程引入PowerQuery轻量化数据处理功能,原有复杂数据结构,先进行清洗整合后,变为一个干净数据源供SSIS调用上传至数据,这时整个方案可行性和性价比都非常可观...核心代码,使用脚本任务,当前循环下文件全路径进行转换,得到归档路径,模板文件路径等。...* 系列文章 数据民工数据白领蜕变之旅(一)-工具总览 https://www.jianshu.com/p/2bd3f90206ec 数据民工数据白领蜕变之旅(二)-重温Excel催化剂经典 https.../p/d154b09c881d 「数据ETL」数据民工数据白领蜕变之旅(四)-有了PowerQuery还需要SSIS吗?.../p/8de014b1f957 「数据ETL」数据民工数据白领蜕变之旅(六)-Python能力嫁接到SSIS https://www.jianshu.com/p/033342b02dae

4.5K20
  • Flutter 入门指北之输入处理(登录界面实战)

    前面提到基础部件时候,忘了提输入内容处理部件,这里补上,然后顺带撸个实际界面吧 TextField const TextField({ Key key, this.controller...,但是还有个更加方便方法,可以直接使用部件 TextFormField 来实现,不过需要我们在外层加一个 Form 部件,接下来,就要准备通过 TextFormField 来撸一个登录界面,但是这之前...,前面有个坑需要先解决下 导入自定义图标 在这之前,涉及 Icon 部件,都是使用系统自带图标,那么如何导入第三方自定义图标呢,马上为你揭晓答案,首先我们需要打开「阿里妈妈」也就是 iconfont...好在有很多现成插件已经开源,可以通过 FlutterPackage 搜索,例如等会我们会需要用到 FlutterToast 这个插件,用来做提醒用,在 FlutterPackage 搜索插件后,...,和 TextFormField validator条件不符合,则会显示错误文字提示 ?

    1.9K50

    Rxjs 响应式编程-第六章 使用Cycle.js响应式Web应用程序

    Cycle.js Cycle.js是RxJS之上一个框架,用于创建响应式用户界面。 它提供了现代框架(如React)功能,例如虚拟DOM和单向数据流。...在我们程序,我们应该以任何方式修改状态。驱动程序采用我们应用程序发出数据Observable,它们返回另一个导致副作用Observable。...最终值附加到WikipediaAPI URL。 太棒了! 到目前为止,我们有生成UI功能和该UI检索用户输入功能。我们现在需要添加将从维基百科获取信息功能。...在几乎任何其他情况下,尤其是在生产代码,使用HTTP来检索远程数据。 无论如何,使用JSONP并不影响本章要点。...wpSearchBox小部件,我们可以在另一个需要查询URL API搜索框应用程序轻松地重用该小部件

    3.2K30

    Flutter 构建完整应用手册-联网 顶

    互联网上获取数据 大多数应用程序获取互联网上数据是必要。 幸运是,Dart和Flutter为这类工作提供了工具!...路线 使用http包发出网络请求 响应转换为自定义Dart对象 用Flutter获取并显示数据 1.使用http包发出网络请求 http包提供了互联网获取数据最简单方法。...现在我们有一个功能,我们可以调用互联网上获取Post! 3.用Flutter获取并显示数据 为了获取数据并将其显示在屏幕上,我们可以使用FutureBuilder小部件!...Flutter附带FutureBuilder部件,可以轻松处理异步数据源。 我们必须提供两个参数: 使用Future。 在我们例子,我们调用我们fetchPost()函数。...3.数据发送到服务器 为了数据发送到服务器,我们消息add由WebSocketChannel提供sink接收器。 channel.sink.add('Hello!')

    2.6K20

    『Flutter』常用组件 表单

    1.前言 在上一篇文章,介绍完毕了常用组件 TextField 组件,本篇文章继续介绍常用组件表单组件。...2.表单 2.1.介绍 在Flutter,表单(Form)是一个用于数据收集和验证容器组件。它通常与 TextField 和 FormField 等输入组件结合使用,以创建一个完整用户输入表单。...表单组件主要作用是对输入数据进行验证和管理。 2.2.常用属性 key:GlobalKey 类型,用于控制和访问表单状态,如验证表单和保存表单数据。...保存表单数据(Saving Form Data):通过 _formKey.currentState.save() 可以调用表单每个 FormField onSaved 方法。...重置表单(Resetting the Form):使用 _formKey.currentState.reset() 可以重置表单初始状态,清除所有 FormField 内容。

    64010

    用Python做一个“以图搜番“应用程序,再也不用愁动漫图片出处了!

    视频部件插入技巧 在UI界面中加一个视频显示部分我花了不少时间去研究,主要因为Qt Designer没有视频播放器部件,于是我就有点懵了,虽然可以直接编辑Python代码来弄,但为了统一流程,还是希望能在...经过一番研究,总结以下方法: 第一步:拖拽一个ContainersWidget编辑界面; 第二步:选择Widget部件,右键选择“提升为…(Promote to …)”; 第三步:设置...+基于内容图像检索(Content-based image retrieval ,CBIR),“基于内容”意味着搜索分析图像内容,而不是与图像相关数据,如关键字、标签或描述。...-y.png)] 然后运行output\app_main.distapp_main.exe,逐个找到缺轮子文件,并加入output\app_main.dist目录下,如下图,表明缺少requests...,然后刚刚找到库文件复制app_main.dist文件夹下。

    2.2K10

    【老孟Flutter】Flutter 2 新增功能

    在此初始稳定版本,Flutter在Web平台支持下代码可重用性提高另一个层次。因此,现在当您稳定地创建Flutter应用程序时,Web只是该应用程序另一个设备目标。...此外,内置上下文菜单已添加到Material和Cupertino设计语言TextField和TextFormField部件。最后,添加了抓手 ReorderableListView小部件。...即使用户已导航具有其他Scaffold页面,也执行异步操作。...具有Add-to-App多个Flutter实例 与许多Flutter开发人员交谈我们了解,您许多人没有启动全新应用程序奢侈心意,但您可以通过Flutter添加到现有的iOS和Android...此功能称为Add-to-App,是在两个移动平台上重用Flutter代码同时仍保留现有本机代码库绝佳方法。但是,对于您那些人,我们有时会听到,不清楚如何第一个屏幕集成Flutter

    7.8K20

    在 Node.js 上运行 Flutter Web 应用和 API

    手机上Flutter Weather App weather app 允许用户查看预定义城市的当前天气。天气数据运行在 Node.js 上后端服务器检索。...最好将两个项目的存储库克隆同一个父文件夹创建 weather_app_flutter 存储库内容并将其复制 weather-app-nodejs-server 存储库内文件夹。...探索 Flutter 天气应用 在编辑器打开 weather_app_flutter 。让我们仔细看看 main.dart 文件。它包含构成程序用户界面的脚手架和小部件。...Home 窗口小部件类具有 fetchWeatherData 函数,该函数调用后端天气 API 来检索数据并更新窗口小部件状态: 1fetchWeatherData({String location...这次你应用程序将会显示天气 API 检索天气数据,而不会出现跨域资源共享错误。 ?

    4K10

    MVC架构在Asp.net应用和实现

    Keywords: MVC 、View 、Controller、Model、Asp.net 0 引言 许多Web应用都是数据存储检索数据并将其显示给用户。...在用户更改数据之后,系统再将更新内容存储数据存储。因为关键信息流发生在数据存储和用户界面之间,所以很多应用数据和用户界面这两部分绑在一起,以减少编码量并提高应用程序性能。...对显示更改,尽可能地不要影响数据和业务逻辑。 目前大部分Web应用都是数据代码和表示混在一起。...例如,把数据MySQL移植Oracle,或者把基于RDBMS数据源改变到LDAP,只需改变模型即可。一旦正确实现了模型,不管数据来自哪里,视图都会正确显示它们。...每个Asp.net页面都有一种机制,页面部件所要调用方法在一个与其分离实现。

    3.7K20

    Ubuntu运行GitHub获取Django项目准备工作GitHub克隆项目安装数据库(要设置密码)搭建python环境修改项目配置文件测试数据库导入本地新建数据运行项目

    经常在github看到一些优秀Django项目,但Django运行需要大量依赖,这里分享一下,github获取Django项目,并在本地运行项目的小经验......准备工作 安装虚拟机: ubuntu16.04 实验仓库地址: https://github.com/zhaoolee/NewAvatar GitHub克隆项目 git clone git://github.com...安装虚拟环境软件,并将virtualenvwrapper.sh配置shell环境 sudo apt install python-pip sudo pip install virtualenv sudo...更改登录数据密码 测试数据库导入本地新建数据 mysql -uroot -pzhaoolee fangyuanxiaozhan < fangyuanxiaozhan.sql...数据库fangyuanxiaozhan内数据表 运行项目 python manage.py runserver ?

    3.4K30

    「最强2D」升维「最强3D」!智源联合清北重磅发布10亿参数Uni3D视觉大模型

    以下在ShapeNetPart数据one-shot零部件分割对比图中可以看出,Uni3D可以在one-shot训练中产生更精确分割结果。...ShapeNetPart数据集分成两个子集:「可见类别」和「不可见类别」。使用「可见类别」下形状部件文本描述训练Uni3D,并在「不可见类别」上使用形状部件文本描述进行零样本测试。...06 文本驱动/图像驱动三维形状检索:体现在构建多模态检索库上潜在能力 Uni3D通过学习统一三维多模态表征,具有感知多个2D/语言信号能力,可以通过图像或文本输入大型3D数据集中检索三维形状...如给定文本「一个高质量宫殿」,「钢铁侠」,Uni3D就可以大规模3D数据检索最接近该文本多个3D模型。...借鉴ViT扩展策略,逐渐TransformerTiny(6M)、Small(23M)、Base(88M)、Large(307M)扩展Giant(1B),后Uni3DTransformer替换为不同规模

    42320

    Flutter Widget框架之旅 顶

    同样,AppBar小部件允许我们传递小部件以获取title小部件leading和actiions。这种模式在整个框架重复出现,并且在设计自己部件时可能会考虑这一点。...无状态小部件他们部件接收参数,它们存储在final成员变量。 当一个小部件被要求build时,它会使用这些存储值来为它创建部件派生新参数。...在更复杂应用程序,小部件层次结构不同部分可能对不同问题负责; 例如,一个小部件可能呈现一个复杂用户界面,其目标是收集特定信息(如日期或位置),而另一个部件可能会使用该信息来更改整体呈现。...当ShoppingList小部件首次插入时,框架调用createState函数来创建_ShoppingListState新实例,以便与该树该位置关联。...全局键在整个窗口部件层次结构必须是全局唯一,这与局部键不同,后者只需要在同级唯一。 由于它们是全局唯一,因此可以使用全局键来检索与窗口部件关联状态。

    6.7K20

    高性能KeyValue存储引擎SessionDB

    4.有效利用内存,Heap内存占用量,采用三级存储机制,只有近期插入新鲜数据驻留在Heap内存,大量次新鲜数据驻留在内存映射文件(Memory Mapped File),巨量老数据驻留在磁盘文件...扩展LSM树一般有多(K)个部件(Figure 2)组成,除C0驻留内存,其它则以新鲜度分层(Level)方式驻留磁盘,每一层都有大小限制,归并时CiCi+1向下归并。...)IndexedDatafile,这点类似于持久化WAL(Write Ahead Log),而后Key和数据项在数据文件索引Index被PutInMem-Hashmap;Get操作时先检索InMem-Hashmap...碰撞概率很低,基本一次就可以定位数据文件Key/Value对,所以总体性能就是一次索引文件两分查找+一次数据文件读取。...,数据读取时也以同样方式先定位对应单元,再在单元内检索数据

    2.2K100

    AI应用开发基础教程_借助LangChain来调用ChatGPT_API

    __': main() 让我们学习如何使用各种选项 在侧边栏显示各种内容 st.sidebar开始编写来元素放置在侧边栏 # 导入相关类库 import streamlit as st...如何在不使用文档加载器情况下内容加载到LangChain 如何将在LangChain中加载内容转换为嵌入式内容 一种向PDF提问机制 通过 PDF 数据存储在数据,并从中提取与问题相关内容...基于第4步获得嵌入,向量数据搜索相似的文档(块)(这与语义地搜索相关上下文相似)。 向量数据库返回相似的文档。 第6步获得内容被替换为提示以创建一个提示。...功能描述 详细内容 RetrievalQA核心角色 利用附加上下文信息进行问答 检索上下文信息 1. 数据检索与用户问题相关文本。 2. 语义搜索用于数据检索上下文信息。...嵌入用户问题(图中3/4步骤)。 2. 搜索并检索与该嵌入接近文本(图中5/6步骤)。 3. 检索上下文信息嵌入提示以生成提示(图中7步骤)。

    1.2K20

    jbpm5.1介绍(12)

    •通过HTTP检索JSON数据 发出HTTP请求服务器检索JSON数据。同样技术也可用于检索XML数据。...库存数据表 GWT提供了一个特殊部件称为FlexTable。 FlexTable部件根据需求创建细胞。这正是你需要含有股票数据表,因为你不知道用户增加多少股票。...在本节,你会: 实例化每个部件和面板。 创建持有的股票数据。 铺陈部件使用添加股票面板和主面板。 副根面板主要面板。 光标移动到输入框焦点。...第5步:编码客户端功能 此时,你已经建立了GWT小部件和面板用户界面,并在事件处理程序有线。 StockWatcher接受输入,但它尚未添加股票股票表或更新任何库存数据。...记住refreshWatchList方法被称为当用户增加了股票库存表,然后每隔5秒时,计时器触发。 随机生成数据 代替检索实时股票价格在线数据源,您将创建伪随机价格变化值。

    6.9K40

    Flutter 构建完整应用手册-列表 顶

    例如,您数据源可能是消息列表,搜索结果或商店产品。 大多数情况下,这些数据将来自互联网或数据库。 在这个例子,我们将使用List.generate构造函数生成一个10000个字符串列表。...final items = new List.generate(10000, (i) => "Item $i"); 2.数据源转换成部件 为了显示我们字符串列表,我们需要将每个字符串呈现为一个部件...这是ListView.builder发挥作用地方。 在我们例子,我们将在它自己行上显示每个字符串。...路线 使用不同类型条目创建数据数据源转换为部件列表 1.使用不同类型条目创建数据源 项目类型 为了在列表中表示不同类型项目,我们需要为每种类型项目定义一个类别。...开始使用网格最简单方法是使用GridView.count构造函数,因为它允许我们指定我们想要行数或列数。 在这个例子,我们生成一个100个部件列表,在列表显示它们索引。

    2.5K20
    领券