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

Flutter:循环中的Onpressed()函数会删除最后一项,而不管单击了哪一项

Flutter是一种跨平台的移动应用开发框架,它可以帮助开发者快速构建高性能、美观的移动应用程序。在Flutter中,循环中的onPressed()函数会删除最后一项的问题可能是由于闭包的原因导致的。

闭包是指一个函数可以访问其词法范围内的变量,即使在函数定义之后,这些变量的值也可以被访问和修改。在循环中使用闭包时,由于闭包的特性,循环结束时,闭包中的变量会保留最后一次循环的值,因此在循环中使用闭包时需要特别注意。

解决这个问题的方法是使用一个立即执行函数表达式(IIFE)来创建一个新的作用域,以避免闭包导致的问题。具体做法是将循环变量作为参数传递给IIFE,并在IIFE内部创建一个新的变量来保存循环变量的值。这样,每次循环时都会创建一个新的作用域,避免了闭包导致的问题。

以下是一个示例代码:

代码语言:txt
复制
for (int i = 0; i < items.length; i++) {
  final item = items[i];
  () {
    final index = i;
    item.onPressed = () {
      // 在这里使用index而不是i
      items.removeAt(index);
    };
  }();
}

在这个示例中,我们使用了一个IIFE来创建一个新的作用域,并在作用域内部创建了一个新的变量index来保存循环变量i的值。这样,在onPressed()函数中使用index来删除对应的项,而不是直接使用循环变量i。

关于Flutter的更多信息,你可以参考腾讯云的Flutter产品介绍页面:Flutter产品介绍。Flutter在移动应用开发中具有高效、跨平台、丰富的UI组件等优势,适用于开发各种类型的移动应用程序。

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

相关·内容

35分钟教你学dart(第二节)

如果您愿意,可以在您机器上本地安装 Dart SDK。一种方法是安装 Flutter SDK。安装 Flutter安装 Dart SDK。...您可以在 Dart 信息面板中通过单击 来验证pi。 双数据类型推断 或者,您可以声明类型,不是使用类型推断。...这就是为什么最后一条语句得到42.0不是 42原因print。 注意:DartPad 在控制台中将“84 / 2”结果显示为 42,因为它将输出到控制台格式设置为仅显示有效数字。...列表是从零开始,因此列表中一项位于索引 0 处: 甜点清单 以下是不同甜点清单: List desserts = ['cookies', 'cupcakes', 'donuts', 'pie'...您现在应该对学习如何构建 Flutter 应用程序时看到 Dart 代码有更好理解!

13.1K30
  • Flutter 使用 GetX 对话框

    它结合高性能状态管理,智能.. pub.dev/packages/ge… Introduction: 简介: 当我们需要显示任何类似表单内容时,我们可以创建这个对话框,它涉及 Flutter ...> barrierDismissible: 如果我们想通过单击对话框外部来关闭对话框,那么这个属性值应该为 true else false。默认情况下,它值为 true。...> backgroundColor: 在这个属性中用作对话框背景颜色。 Implementation: 第一步: 添加依赖 将依赖添加到 pubspec ー yaml 文件。...我们将添加一些东西,首先,我们将添加一个图像,其次,我们将添加一个带有子属性和样式属性立面按钮。在 onPressed 函数中,我们将添加 Get.defaultDialog ()。...使用 GetX 插件制作一个工作对话框演示程序。在本博客中,我们已经研究 flutter 应用程序使用 GetX 对话框。我希望这个博客能帮助你更好地理解这个对话框。所以请尝试一下。----

    19110

    Flutter 假异步实现示例

    就像 android 有 handle 一样,消息队列这东西好像还真是系统必备,Flutter 也有自己消息队列,只不过队列直接封装在 Dart 线程类型 Isolate 里面,不过 Flutter...(10064): Futrue print("Futrue")) 任务等到最后才执行Flutter 提供往 消息队列 添加数据 API: Future 往 MicroTask 队列添加任务...Future 对象是 Flutter 专门提供,基于消息队列实现异步类,Future 对象会把自身当做一个任务添加到消息队列中去排队执行 Future 对象接受是一个函数,就是要执行任务,用...,提供下面的选择给大家 .then – 在 Future 执行完后执行,相当于一个 callback,不是重新创建了一个 Future Future.delayed(Duration(seconds...(); 记住: Future就是event,很多Flutter内置组件比如前几篇用到Http(http请求控件)get函数、RefreshIndicator(下拉手势刷新控件)onRefresh

    1.4K31

    Flutter 数据持久化存储之Hive库

    先设想一个应用场景,不是写到哪里就是哪里,乱枪打鸟不可取。我们就写这样一个场景,对于人员信息操作,可以增加、查询、修改、删除删除所有。...modify()函数中通过下标和person对象就可以完成,删除删除所有就是可以直接处理,就没有什么好说。...如下图所示:   在列表Item中我们除了显示用户名称和年龄之外还有两个功能按钮,分别用于修改和删除,如下图所示:   针对于删除很简单之后调用控制器里面写好函数就可以删除之后列表自动刷新...修改的话屏幕上没有空间,因此我就写一个弹窗去显示需要修改内容,代码如下所示: void showModifyDialog(int index, Person personData) =>...最后我们再修改一下保存按钮和删除所有按钮组件代码,如下所示: var saveBtn = TextButton( onPressed: () { controller.save

    31500

    Flutter 2.5正式版发布,带来重大更新

    并且,对于 iOS 用户而言,此版本带来了一项重大更新,即在 Apple Silicon M1 Mac 上构建 Flutter 应用程序也可以在 ARM iOS 模拟器 (#85642 ) 上运行。...更容易界面分析和定位:Flutter 框架中常用 Widget 都会在左侧 Widget 树视图中显示图标,它们根据类别进一步进行颜色编码,例如布局 Widget 显示为蓝色,内容Widget...Visual Studio Code 测试运行器还添加了新装订线图标,显示测试最后状态,可以单击以运行测试(或右键单击以获取上下文菜单)。...目前,Flutter 团队一些插件中已经使用了 Pigeon,在此版本中它提供更多有用错误消息,增加了对泛型、原始数据类型作为参数和返回类型以及多个参数支持,预计开发者将来更频繁地使用它。...其他 除此之外,Flutter 2.5重大更改和弃用还有如下一些: 默认拖动滚动设备 在 v2.2 之后删除了弃用 API 引入包:flutter_lints ThemeData accent

    4.4K50

    Flutter--Dart基础语法(四)异步

    我们用一个生活中例子来模拟: 你中午饿,需要点一份外卖,点外卖动作就是我们调用,拿到最后外卖就是我们要等待结果。...; } }); }, ) 这些代码是如何放在事件循环中执行呢? 1、当用户发生点击时候,onPressed回调函数被放入事件循环中执行,执行过程中发送了一个网络请求。...3、网络请求成功后,执行then中传入回调函数,这也是一个事件,该事件被放入到事件循环中执行,执行完毕后,事件循环将其丢弃。...,该Future直接调用then回调函数 疑惑:为什么立即执行,但是哈哈哈是在最后打印呢?...并且,通常一个async函数返回一个Future(别着急,马上就看到代码)。

    1.4K20

    简单了解Flutter

    距离Flutter正式版出来已经有很长时间,目前大家对于Flutter呼声也是很高,就算是平时不了解移动开发朋友们也开始好奇Flutter究竟是个什么东西。...自带渲染引擎听起来侵入性比较强,没有使用对应平台渲染机制,不过从RN现状看来,通过bridge形式依附于对应平台渲染机制在性能上体验不佳,Flutter直接编译成native code,从理论上来说...Flutter也给我们提供丰富控件,我们日常开发就是不断组合Widget来构建我们app,就连我们app本身也是一个巨大widget,不会有什么特殊类去组合Widget来构建我们app。...函数不会这么简单,我们会做一些全局配置,不过现在我们暂且不管,现在这么多就足够啦,这个MyApp就是对应到我们安卓里Application,我们来分析一下。...而且Flutter是一个响应式框架,我们通过setState方法去更新一些状态,每当setState方法被调用时候,状态会被标记为dirty,然后Flutter重新绘制。

    86330

    你知道吗,Flutter内置10多种show

    下面的2个按钮根据应用程序支持语言显示相应语言,比如显示中文方法如下: 在pubspec.yaml中配置支持国际化: dependencies: flutter: sdk: flutter...showBottomSheet 在最近Scaffold父组件上展示一个material风格bottom sheet,位置同Scaffold组件bottomSheet,如果Scaffold设置bottomSheet...通常情况下,我们希望直接从底部弹出,showModalBottomSheet提供直接从底部弹出功能。...buildSuggestions是用户正在输入时显示控件,输入框放生变化时回调此方法,通常返回一个ListView,点击其中一项时,将当前项内容填充到输入框,用法如下: @override Widget...欢迎加入Flutter微信交流群(laomengit),一起学习,一起进步,生活不止眼前苟且,还有诗和《远方》。 今天文章对大家是否有帮助?

    1.8K10

    Flutter 2.5正式版发布,带来多项重大更新

    [在这里插入图片描述] 并且,对于 iOS 用户而言,此版本带来了一项重大更新,即在 Apple Silicon M1 Mac 上构建 Flutter 应用程序也可以在 ARM iOS 模拟器 (#85642...更容易界面分析和定位:Flutter 框架中常用 Widget 都会在左侧 Widget 树视图中显示图标,它们根据类别进一步进行颜色编码,例如布局 Widget 显示为蓝色,内容Widget...Visual Studio Code 测试运行器还添加了新装订线图标,显示测试最后状态,可以单击以运行测试(或右键单击以获取上下文菜单)。...[在这里插入图片描述] 目前,Flutter 团队一些插件中已经使用了 Pigeon,在此版本中它提供更多有用错误消息,增加了对泛型、原始数据类型作为参数和返回类型以及多个参数支持,预计开发者将来更频繁地使用它...其他 除此之外,Flutter 2.5重大更改和弃用还有如下一些: 默认拖动滚动设备 在 v2.2 之后删除了弃用 API 引入包:flutter_lints ThemeData accent

    3.6K00

    Flutter Widget框架之旅 顶

    当小部件状态发生变化时,小部件重新构建它描述,该描述与前面的描述不同,以确定底层渲染树从一个状态转换到下一个状态所需最小更改。...你好,世界 最小Flutter应用程序只需使用一个小部件调用runApp函数: import 'package:flutter/material.dart'; void main() { runApp...以下是一些简单小部件,它们结合这些和其他小部件: import 'package:flutter/material.dart'; class MyAppBar extends StatelessWidget...使用材料组件 主要文章:小工具概述 - 材料组件 Flutter提供许多小工具,可帮助您构建遵循Material Design应用程序。...在Flutter中,更改通知通过回调方式“向上”流,当前状态则“向下”流向呈现无状态小部件。重定向这一流程共同父母是State。

    6.7K20

    Flutter学习指南:编写第一个应用

    为了体验从头开发一个应用过程,这里我们先把 lib/main.dart 里内容都删除。 首先,创建一个 main 函数。...跟其他语言一样,main 函数是应用入口: void main() { } 下面我们编写一个 Widget 作为我们 app。在 Flutter 里,所有的东西都是 Widget。...void _onPressed() { debugPrint('_onPressed'); } 保存后(自动 Hot Reload),我们再次点击按钮,在我设备上,打印出了下面这样信息: I/...这里第一行,就是我们打的。现在我们有足够自信说,点击按钮后,执行 _onPressed 方法。 编写代码(2) 软件开发通常是一个螺旋式上升过程,不可能通过一次编码、调试就完成。...还是在根目录下,执行 flutter install 就可以安装这个 apk 。 对于 iOS,读者可以看flutter.io/ios-release…,这里就不再演示

    1K00

    开始使用-编写你第一个Flutter应用程序 顶

    VS代码:右键单击并选择Format Document。 终端:运行flutter格式。 1.替换lib/main.dart。 删除lib/main.dart中所有代码。...Material是一种视觉设计语言,在移动设备和网络上是标准Flutter提供一套丰富Material小部件。 main方法指定胖箭头(=>)表示法,它是用于单行函数或方法简写。...这个类将保存随着用户滚动而无限增长生成单词对,以及最喜欢单词对,因为用户通过切换心脏图标来将它们从列表中添加或删除。 你一点一点地建立这个类。...变量divided保存最后行,通过便利函数toList()转换为列表。...材质库中Colors类提供许多可以使用颜色常量,热重载使得用户界面的实验变得快速简单。 ? 问题? 如果您应用程序运行不正常,则可以使用以下链接中代码重新进入正轨。

    9.5K20

    Flutter 系列 如何在Flutter中嵌入H5页面

    由于网页内容可以随时在服务器端进行更新,不需要更新整个应用,所以对于那些需要及时推送新信息应用场景非常适用。 比如金融类应用展示实时股票行情信息,或者社交应用中展示动态广告内容。...无限制 JavaScript 模式就如同这把万能钥匙。在这种模式下,你可以尽情地发挥 JavaScript 强大威力,就像一位技艺高超魔法师,能够施展各种复杂神奇魔法。...就像随意进入未知房间可能遇到危险一样,无限制模式可能让恶意代码有机可乘,给你系统带来安全隐患。如果不小心使用,可能引发意想不到后果,就像魔法失控可能带来灾难一样。...你不能随意使用某些可能存在风险语法结构或功能,就像在城堡中不能随意进入某些禁地一样。这种限制虽然会在一定程度上降低你灵活性,但它也为你系统提供更高安全性。...(当 WebView 启动导航时(例如,当用户单击链接时),将调用此委托并决定如何继续导航。)

    2600

    TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:6~11

    最后,我们通过使用trim()删除所有尾随空格来修剪输入值,然后将输入值存储在_usermail字符串变量中。...这是 Google 所支持一项测试,可帮助我们保护数据免受垃圾邮件和滥用行为自动 bot 攻击。 该测试很简单,很容易被人类解决,但是却阻碍漫游器和恶意用户使用。...级联函数池来自几个较小分类器。 Haar 级联文件通常以可扩展标记语言(XML)格式找到,并且通常执行一项特定功能,例如面部检测,身体姿势检测, 对象检测等。...onPressed: () => pickImage(), ) ); } 前面的补充内容确保单击按钮时,启动图库,以便可以选择图像。...在 2019 年 6 月上旬,谷歌地图发布一项新功能,使用户可以监控印度 10 个主要城市巴士旅行时间,以及从印度铁路局获得实时更新。

    23.1K10
    领券