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

如何在flutter中验证和更新上一页的数据?

在Flutter中,可以通过以下步骤来验证和更新上一页的数据:

  1. 创建一个数据模型类:首先,创建一个数据模型类来表示要传递和更新的数据。该类应该包含需要验证和更新的属性。
  2. 在上一页中接收数据:在上一页中,使用Navigator.push方法打开下一页,并传递要验证和更新的数据作为参数。
  3. 在下一页中接收数据:在下一页中,使用构造函数接收传递的数据,并将其存储在本地变量中。
  4. 验证数据:在下一页中,使用Flutter的表单验证机制来验证接收到的数据。可以使用Flutter提供的FormField和TextFormField等小部件来实现验证逻辑。
  5. 更新数据:在下一页中,如果数据验证通过,可以通过回调函数的方式将更新后的数据传递回上一页。可以在下一页中定义一个回调函数,并在数据验证通过后调用该函数,将更新后的数据作为参数传递回上一页。
  6. 在上一页中更新数据:在上一页中,实现回调函数,并在接收到更新后的数据时更新上一页的数据。可以使用setState方法来更新上一页的数据,并触发UI的重新构建。

以下是一个示例代码,演示了如何在Flutter中验证和更新上一页的数据:

代码语言:txt
复制
// 上一页
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 创建要传递的数据
            DataModel data = DataModel();

            // 打开下一页,并传递数据
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(data: data),
              ),
            ).then((updatedData) {
              // 接收更新后的数据,并更新上一页的数据
              if (updatedData != null) {
                setState(() {
                  data = updatedData;
                });
              }
            });
          },
        ),
      ),
    );
  }
}

// 数据模型类
class DataModel {
  String name;
  int age;

  DataModel({this.name, this.age});
}

// 下一页
class SecondPage extends StatefulWidget {
  final DataModel data;

  SecondPage({this.data});

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController _nameController;
  TextEditingController _ageController;

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController(text: widget.data.name);
    _ageController = TextEditingController(text: widget.data.age.toString());
  }

  @override
  void dispose() {
    _nameController.dispose();
    _ageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              controller: _nameController,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter a name';
                }
                return null;
              },
              decoration: InputDecoration(
                labelText: 'Name',
              ),
            ),
            TextFormField(
              controller: _ageController,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter an age';
                }
                return null;
              },
              decoration: InputDecoration(
                labelText: 'Age',
              ),
            ),
            RaisedButton(
              child: Text('Update Data'),
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  // 数据验证通过,更新数据并返回上一页
                  DataModel updatedData = DataModel(
                    name: _nameController.text,
                    age: int.parse(_ageController.text),
                  );
                  Navigator.pop(context, updatedData);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

在上述示例中,首先在上一页中创建了一个DataModel对象,并将其作为参数传递给下一页。在下一页中,使用表单验证机制验证数据,并在验证通过后通过回调函数将更新后的数据传递回上一页。在上一页中接收到更新后的数据后,使用setState方法更新上一页的数据,并触发UI的重新构建。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

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

相关·内容

何在Mac软件更新隐藏MacOS Catalina更新提示

有好多小伙伴不愿意升级到MacOS Catalina,但是电脑上有系统更新红点,那么怎么去除呢,下面教大家如何在Mac软件更新隐藏MacOS Catalina,Mac取消系统更新红点。...1.退出系统偏好设置 2.在Mac启动终端应用程序,该应用程序位于/ Applications / Utilities /文件夹 3.在“终端”命令行输入以下命令: sudo softwareupdate...现在,MacOS Catalina更新将在Mac“软件更新”中保持隐藏状态,直到更改此设置为止,我们将在下面进一步讨论。...如何在软件更新再次使MacOS Catalina升级可用 取消隐藏MacOS Catalina并使MacOS 10.15更新再次可用,您可以执行以下两项操作之一。...要使MacOS Catalina升级再次出现在“软件更新,请返回命令行并使用以下命令行语法清除并重置被忽略软件更新列表: sudo softwareupdate --reset-ignored 再次使用管理员密码进行身份验证

5.1K20

何在MySQL实现数据时间戳版本控制?

在MySQL实现数据时间戳版本控制,可以通过以下两种方法来实现:使用触发器使用存储过程。...MySQL支持触发器功能,可以在数据创建触发器,以便在特定数据事件(插入、更新或删除)发生时自动执行相应操作。因此,我们可以使用触发器来实现数据时间戳版本控制。...我们创建了两个触发器:一个是在插入数据之前自动设置createdAt、updatedAtversion字段;另一个是在更新数据之前自动设置updatedAtversion字段。...,存储过程相对于触发器来说,具有更高灵活性可控性,但也需要更多代码编写维护工作。...在MySQL实现数据时间戳版本控制,可以通过使用触发器存储过程两种方法来实现。无论采用哪种方法,都需要在设计数据模型业务逻辑时充分考虑时间戳版本控制需求,并进行合理设计实现。

9910

何在WebStorm获得对数据库工具SQL支持

你可能已经知道,其他 JetBrains IDE(例如 PhpStorm IntelliJ IDEA Ultimate)具有对数据库工具 SQL 内置支持,这些支持是通过与这些 IDE 捆绑在一起数据库插件提供...从 v2020.2 开始,你可以订阅我们数据库插件,并在 WebStorm 以合理价格使用它。 如何试用该插件 要安装插件,请转至“首选项/设置” |“设置”。...你从数据库插件得到什么 安装了数据库插件后,你就可以使用 DataGrip 所有功能,DataGrip 是我们独立数据库 IDE。 ?...DataGrip 一些关键功能包括: 支持 MongoDB、MySQL、PostgreSQL 其他数据库。 功能强大数据编辑器,可让你修改数据行并快速浏览数据(MongoDB 尚不支持)。...为你在 WebStorm 项目提供类似的编码协助。 多种导入导出数据选项。 如果你想了解更多有关可用功能信息,请访问此网页,你也可以查看DataGrip 博客,以了解最新改进新闻。

3.7K30

两分钟带你快速搭建Flutter开发环境(Windows)

在这篇文章,将带着大家一起在Windows平台上快速搭建Flutter开发环境,同时会将搭建Flutter开发环境一些技巧经验分享给大家。...开发环境设置 安装Flutter插件 系统要求 在Windows要安装并运行Flutter要满足以下最低要求: 操作系统: Windows 7 SP1或更新版本 磁盘空间: 400 MB (Android...,然后安装Dart插件 完成之后选择重启Android Studio 如何在Android模拟器运行Flutter?...要准备在Android设备运行并测试您Flutter应用,您需要安装Android 4.1(API level 16)或更高版本Android设备 在你设备启用 开发人员选项 USB调试...详细说明可在Android文档中找到; 使用USB将手机插入电脑,如果有授权提示需要同意授权; 在终端,运行 flutter devices 命令以验证Flutter是否识别你连接Android设备

8K10

两分钟带你快速搭建Flutter开发环境(Mac)

在这篇文章,将带着大家一起在Mac平台上快速搭建Flutter开发环境,同时会将搭建Flutter开发环境一些技巧经验分享给大家。...如果Xcode自动签名失败,请验证项目的 General > Identity > Bundle Identifier 值是否唯一。...,然后安装Dart插件 完成之后选择重启Android Studio 如何在Android模拟器运行Flutter?...要准备在Android设备运行并测试您Flutter应用,您需要安装Android 4.1(API level 16)或更高版本Android设备 在你设备启用 开发人员选项 USB调试...详细说明可在Android文档中找到; 使用USB将手机插入电脑,如果有授权提示需要同意授权; 在终端,运行 flutter devices 命令以验证Flutter是否识别你连接Android设备

5.6K10

6详解AppBar小部件

由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...以下是我们将介绍内容: Flutter AppBar 是什么? 应用栏布局 自定义 AppBar Flutter AppBar 是什么?...示例包括返回一页导航箭头或打开抽屉菜单图标。 当上一条路线可用时,导航箭头会自动出现。...工具栏高度不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮,其他任何公司前景,除了小部件,ContainerImage。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何在 Flutter 中使用 AppBar 布局 ( leading, title, actions) 如何自定义 AppBar

16.3K10

Keras 在fit-generator获取验证数据y_truey_preds

然而我遇到了需要提取验证集y_pred需求,在网上没有找到现有的功能实现方法,于是自己对源码进行了微调,实现了可配置提取验证集模型预测结果功能,记录如下。...原理简介 通过查看源代码,发现Keras调用了model.evaluate_generator验证数据,该函数最终调用是TensorFlow(我用后端是tf)TF_SessionRunCallable...过程不保存、不返回预测结果,这部分没有办法修改,但可以在评价数据同时对数据进行预测,得到结果并记录下来,传入到epoch_logs,随后在回调函数on_epoch_end尽情使用。...注释后模块,可以看到Kerasfit_generator就是用model.evaluate_generator对验证集评估: # Epoch finished. if steps_done >...测试 随便写个带on_epoch_end回调函数,将get_predict设置为True,测试logs是否有我们想要数据: model.fit_generator( generator

1.3K20

Flutter 密码锁定屏幕

Flutter 让我对高效构建令人愉悦UI很感兴趣,而且它允许您同时为两个平台创建。直到最近一年,我一直使用touchIDFaceID作为身份验证工具。...在任何情况下,最新Andriod先决条件所指出那样,您需要在生物识别认证被破坏或受损偶然机会上提供选择性认证策略。 在在本文中,我们将探讨「Flutter「密码锁定屏幕」。...它将显示在flutter应用程序中使用密码屏幕时如何解锁屏幕。 该演示视频演示了如何在Flutter创建密码锁定屏幕。...它显示了如何在flutter应用程序中使用「passcode_screen」软件包来运行密码锁定屏幕。它显示密码输入屏幕以解锁屏幕。它会显示在您设备。...我们将在按钮内添加填充,颜色,文本onPressed方法,并在此方法添加**_showLockScreen()**小部件。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

4.9K30

Flutter 专题】图解 ListView 下拉刷新与拉加载 (一)

和尚上次学 ListView 时,只学习了一下异步请求数据加载新闻 Loading 等待小知识点,但对于新闻列表数据更新和加载更多是必不可少,而实现【下拉刷新】与【上划加载更多】方式有很多种...,今天和尚整理一下使用三方库 flutter_refresh 来实现列表数据更新。... onFooterRefresh 底部刷新 两个方法数据处理。...问题小结 和尚在测试过程遇到了很多小问题,现在逐一整理一下。 问题一:初始化进入页面后,加载完第一页之后刷新数据不加载,第二次刷新数据才加载,且加载一次刷新数据?...onHeaderRefresh() 处理数据 Widget,而和尚自己方法是单纯数据处理。

1.6K31

带你快速掌握Flutter视图(Widgets)

在这篇文章,将向大家分享Flutter开发一些视图(Widgets)相关一些知识经验,主要包含: 谁是FlutterView? 如何更新Widgets? 如何布局?...在Flutter,您可以使用Widgets库核心布局小部件 Container, Column, Row, Center,关于Widget更多内容可参考:Layout Widgets目录...如何更新Widgets? 在Android/iOS更新视图,我们可以直接通过对应方法来操作更改。 在Flutter,Widget是不可变,不会直接更新。...如果要根据HTTP网络请求或用户交互后收到数据动态更改UI,则必须使用StatefulWidget并告诉Flutter框架Widget状态已更新,以便更新该Widget。...要了解如何在Flutter实现签名Painter,可参阅Collin在StackOverflow答案。 ?

10.9K10

Flutter TDD 心路历程

不过有句话说得好:“实践是检验真理唯一标准,任何没有经过实践就轻易下结论都是耍流氓”(后半句话是我说,没错) 本文记录了我在 Flutter 实践 TDD 一些所思所考,全文根据真实经历,没有改编...从无到有 案例:实现一个通用支持滑加载下拉刷新 Flutter 列表 用例梳理: 加载过程显示 loading 动画 加载结果为空列表显示 empty 页面 加载结果失败显示 error 页面 ....同时因为我们需要验证页面是否展示对应 item,还需要一个列表 item 构建回调函数 单测代码如下 testWidgets("加载成功且数据不为空,列表展示对应数据 item", (tester...,因此我们需要在原始数据基础 + 1;如果没有下一页,也就不需要假数据 loading widget,因此 count 计算规则如下 var count = 0; if (feedModel.listData.isEmpty...第一次重构 到这里,发现当前 FeedList 越来越挫了,使用时候要传入第一页数据,然后还要提供加载更多 Future,第一页数据明明也是一个 Future,但是交给外部处理,第二页之后数据却又自己处理

1.2K20

何在 Pandas 创建一个空数据帧并向其附加行列?

Pandas是一个用于数据操作和分析Python库。它建立在 numpy 库之上,提供数据有效实现。数据帧是一种二维数据结构。在数据数据以表格形式在行对齐。...它类似于电子表格或SQL表或Rdata.frame。最常用熊猫对象是数据帧。大多数情况下,数据是从其他数据源(csv,excel,SQL等)导入到pandas数据。...在本教程,我们将学习如何创建一个空数据帧,以及如何在 Pandas 向其追加行列。...例 1 在此示例,我们创建了一个空数据帧。然后,通过将列名 ['Name', 'Age'] 传递给 DataFrame 构造函数 columns 参数,我们在数据创建 2 列。... Pandas 库创建一个空数据帧以及如何向其追加行列。

20930

Flutter学习

与Android view区别 AndroidView是可变,当用户交互或数据更新时,可直接调用Viewinvalidate方法重绘,达到更新UI目的。...Flutterwidget是不可改变因此不能直接更新,而必须使用Widget状态。Flutterwidget分为有状态无状态两种。...在Flutter,一个自定义widget通常是通过组合其它widget来实现,而不是继承 某些widget属性需要单个widget(child),而其它一些属性,action,需要一组widgets...Navigator可以通过pushpop route以实现页面切换。 在Flutter,导航器管理应用程序路由栈。将路由推入(push)到导航器,将会显示更新为该路由页面。...如何使用原生控件或组件 Flutter代码通常涉及构建相当深树状数据结构,例如在一个build方法

2.6K20

数据科学职业生涯路径:如何在数据分析工作找准自己角色定位?

、SAS、R等 业务分析能力:熟知业务,能够根据问题业务指标提取公司数据相关数据,进行整理、清洗、处理,通过相应数据分析方法,结合软件平台应用完成对数据分析报告。...你能拿到薪水 建模分析师作为数据工程师,在数据科学角色占据着十分重要地位,月薪一般为15k-25k 你需要掌握知识: 理论基础:统计学、概率论和数理统计、多元统计分析、时间序列、数据挖掘(DM)...,可以熟练进行维度分析,能够从海量数据搜集并提取信息;通过相关数据分析方法,结合一个或多个数据分析软件完成对海量数据处理分析。...结果展现能力:报告体现数据挖掘整体流程,层层阐述信息收集、模型构建、结果验证和解读,对行业进行评估,优化决策。...他们专注于构建管理数据模型技术,仔细检查数据,并提供报告可视化来解释数据隐藏见解,模型优化改进等。

1.5K80

Flutter实现页面切换后保持原页面状态3种方法

前言: 在Flutter应用,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState打印日志,会发现每次进入时都会输出,显然这样增加了额外开销,...它拥有一个固定底部导航以及首页顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前页面状态都是始终维持,下面就具体介绍下如何在flutter实现类似喜马拉雅导航效果...第一步:实现固定底部导航 在通过flutter create生成项目模板,我们先简化一下代码,将MyHomePage提取到一个单独home.dart文件,并在Scaffold脚手架添加bottomNavigationBar...更新 前面在底部导航介绍了使用IndexedStackOffstage两种方式实现保持页面状态,但它们缺点在于第一次加载时便实例化了所有的子页面State。...更新home.dart文件如下: /// home.dart import 'package:flutter/material.dart'; import '.

2.5K30

【老孟FlutterFlutter 2 新增功能

对于其他特定于桌面的功能,此版本还启用了Flutter应用程序命令行参数处理功能,以便可以使用诸如Windows File Explorer数据文件双击之类简单操作来打开应用程序文件。...所谓“好”,是指它在小屏幕,屏幕大屏幕看起来都不错,它利用了触摸,键盘鼠标输入优势,并且对于平台惯用语言也很好用(例如,通过使用网络链接桌面上菜单)。...可用修复程序列表,带小灯泡快速修复程序,可帮助您单击鼠标来更改代码。...即使我们尚未捕获所有已弃用API作为数据来提供Flutter Fix,我们仍将继续从先前已弃用API添加更多信息,并将在未来重大更改中继续这样做。...生态系统更新 Flutter开发经验不仅包含框架工具,还包括其他内容。它还包括适用于Flutter应用程序各种软件包插件。自一次Flutter稳定版本发布以来,该领域也发生了很多事情。

7.8K20
领券