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

在Flutter中点击另一个项目ListView后,如何取消选择已经选中的项目?

在Flutter中,取消选择已经选中的项目可以通过以下步骤实现:

  1. 首先,为ListView中的每个项目定义一个状态变量,用于记录项目是否被选中。可以使用一个List<bool>来保存每个项目的选中状态,初始时所有项目的选中状态都为false。
  2. 在ListView的itemBuilder中,根据项目的选中状态来渲染不同的样式。可以使用GestureDetector来监听项目的点击事件,并在点击时更新对应项目的选中状态。
  3. 当点击一个项目时,更新该项目的选中状态为true,并调用setState()方法来通知Flutter框架重新构建UI。
  4. 如果希望只能选择一个项目,可以在更新选中状态时,同时将其他项目的选中状态设置为false。

以下是一个示例代码:

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

class _MyListViewState extends State<MyListView> {
  List<bool> _selectedItems = List.generate(10, (index) => false);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            setState(() {
              _selectedItems[index] = !_selectedItems[index];
              // 如果只能选择一个项目,取消其他项目的选中状态
              for (int i = 0; i < _selectedItems.length; i++) {
                if (i != index) {
                  _selectedItems[i] = false;
                }
              }
            });
          },
          child: Container(
            color: _selectedItems[index] ? Colors.blue : Colors.white,
            child: ListTile(
              title: Text('Item $index'),
            ),
          ),
        );
      },
    );
  }
}

在上述示例中,我们使用了一个List<bool>来保存每个项目的选中状态。当点击一个项目时,更新对应项目的选中状态,并通过setState()方法通知Flutter框架重新构建UI。如果只能选择一个项目,我们还会将其他项目的选中状态设置为false,以取消它们的选中状态。

这样,当点击另一个项目时,之前选中的项目会自动取消选择,而当前点击的项目会被选中。

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

相关·内容

为Flutter应用程序添加交互性 顶

管理状态 小部件管理自己的状态 父母管理小部件的状态 混搭方法 其他交互式小部件 标准小部件 材料组件 资源 准备好 如果您已经在Flutter布局中构建布局,请跳到下一节。...确保你已经建立了你的环境。 确保你已经建立了你的环境。 创建一个基本的Flutter应用程序。 用GitHub中的main.dart替换lib/main.dart文件。...用gitHub中的pubspec.yaml替换pubspec.yaml文件。 在您的项目中创建一个图像目录,并添加lake.jpg。...一旦你有一个连接和启用的设备,或者你已经启动了iOS模拟器(Flutter安装的一部分),你很好! Flutter的Building Layouts展示了如何为下面的截图创建布局。 ?...处理手势,Flutter Widget框架导览中的一部分:如何创建按钮并使其响应输入。 Flutter中的手势:Flutter手势机制的描述。

4.2K20
  • setState

    效果如下,单从界面上来看,我还是比较满意的。 ? ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事项,下面的ListView动态更新 2....条目的复选框选中,条目的文字自动添加下划线 3. 条目的复选框非选中,条目的文字自动取消下划线 4....状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值todo中 3.todo用来渲染Todo列表...,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo的状态,来显示对勾以及文字下划线 5.根据showType的不同,选择过滤的方式。...6.在适宜的状态值改变时,调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作

    96020

    setState

    ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事项,下面的ListView动态更新 2. 条目的复选框选中,条目的文字自动添加下划线 3....条目的复选框非选中,条目的文字自动取消下划线 4. 三个按钮会根据是否完成而过滤数据,显示相应条目 ---- 1.静态界面的实现 万里长征第一步,当然是先把静态界面搞出了。...:鸟瞰全局 这里状态有点乱,我画了幅图说明一下: 状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo的状态,来显示对勾以及文字下划线 5.根据showType的不同,选择过滤的方式...6.在适宜的状态值改变时,调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作

    95130

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

    你会建立什么 您将实施一个简单的移动应用程序,为一家创业公司生成建议名称。 用户可以选择和取消选择名称,保存最好的名称。 该代码一次生成十个名称。 当用户滚动时,会生成新批次的名称。...每次单击热重新加载或保存项目时,都会在正在运行的应用程序中随机选择不同的单词对。...lib/main.dart 第6步:导航到新的屏幕 在这一步中,您将添加一个显示收藏夹的新屏幕(在Flutter中称为路由)。 您将学习如何在主路由和新路由之间导航。...最喜欢的一些选择,并点击应用栏中的列表图标。 新路线显示包含收藏夹。 请注意,导航器会在应用栏中添加一个“返回”按钮。 你不必显式实现Navigator.pop。 点击后退按钮返回到主页路由。 ?...您已经编写了一个在iOS和Android上运行的交互式Flutter应用程序。 在这个codelab中,你有: 从头开始创建一个Flutter应用程序。 书写Dart代码。 利用外部的第三方库。

    9.5K20

    setState

    0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事项,下面的ListView动态更新 2. 条目的复选框选中,条目的文字自动添加下划线 3....条目的复选框非选中,条目的文字自动取消下划线 4. 三个按钮会根据是否完成而过滤数据,显示相应条目 1.静态界面的实现 万里长征第一步,当然是先把静态界面搞出了。...这里状态有点乱,我画了幅图说明一下: 状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo的状态,来显示对勾以及文字下划线 5.根据showType的不同,选择过滤的方式...6.在适宜的状态值改变时,调用老夫的setState来更新 2.2:输入框监听 onChanged: (str) { text = str; }, 2.3:点击按钮监听 注意收起键盘的操作FocusScope.of

    1.4K10

    干货 | 携程火车票Flutter最佳实践

    一、 为什么选择Flutter 携程在已经引入了 React Native 的情况下,为什么还会选择 Flutter?更多是对性能的考虑。开发效率与性能体验就像天平两端,需要找到一个平衡点。...赋予 Flutter 一些 Native 的能力,同时也能很好地让我们在现有 Native 项目混合Flutter开发。...配置Native项目 打包好flutter产物之后,需要导入到native项目并打包。修改Native项目根目录的gradle.properties文件。...选中 View > Tool Windows > Flutter Performance。 ? 点击上面图中的箭头所指的按钮,就会在手机或模拟器中打开(如下图所示)。...2)Dart DevTool 另一个工具是Dart DevTool ,在Android studio右侧,还可以从Flutter inspector里面的more action,以及Flutter Performance

    2.2K30

    开源项目——FLutter开发录音APP

    歌曲列表画面调用两个接口,一个接口获取当前账户录过多少首歌曲,一个接口获取歌曲列表,滑动列表为ListView,请求错误时弹出POP框。点击歌曲进入到录音页面。...录音页面展示的数据均为列表画面通过构造方法传入,调用flutter_sound包录音,录音结束后将acc转换为MP3,点击上传调用接口,通过FormData上传本地的MP3文件,请求错误弹出POP。...比较大的收获是熟悉了一下FLutter项目android和IOS的打包。...,加上--split-per-abi会把不同架构的包分开打,"armeabi-v7a", "arm64-v8a"是比较主流的,安卓也可以单独打开项目中的android文件夹,使用原生的方式进行打包,在app...IOS打包,IOS打包比较复杂,推荐一篇文章,文章有些内容有点过时,不过大部分流程都覆盖到了,简单描述一下就是在Xcode中配置好,然后flutter build ipa,生成一个Runner.xcarchive

    1.8K00

    Flutter响应式编程:Streams和BLoC

    单订阅Stream这种类型的Stream只允许在该Stream的整个生命周期内使用单个监听器。即使在第一个订阅被取消后,也无法在此类流上收听两次。...发送通知, 如果“某人”收听该Stream,它将被通知并将采取适当的行动,无论其在应用程序中的位置如何。...例外情况是: 在ListOnePage中,当用户点击MovieCard时,刷新MovieDetailsWidget。 这也可能是由一个stream驱动的.........理由是,在这个例子中,我们正在操纵假定的无限数量的项目(这不是完全正确但是又有谁关心这个例子)。 这将强制GridView.builder请求显示“最多30个”项目。...此外,GridView.builder和ListView.builder只在认为必须在视口中呈现某个项目(索引)时才调用itemBuilder。

    4.2K90

    构建实用的Flutter文件列表:从简到繁的完美演进

    搭建基础结构 首先,我们需要一个Flutter项目。如果你已经有了一个Flutter项目,那就太好了!...渲染文件列表数据 现在我们已经有了一个空的文件列表页面,接下来让我们来渲染一些假数据,以便我们能够看到文件列表的样子。 我们可以使用Flutter中的ListView组件来展示文件列表。...在每个文件的Card中,我们放置了一个文件图标和文件名,并通过InkWell来处理文件的点击事件。 通过以上步骤,我们已经成功实现了网格布局的文件列表。...现在,我们的文件列表已经可以动起来了!(GIF动不了啊)(又可以动了) 总结 在本文中,我们详细探讨了如何在Flutter应用中构建文件列表,并逐步改进和优化这个文件列表,以提升用户体验和功能性。...首先,我们创建了一个简易的文件列表,展示了如何使用ListView组件展示文件列表数据。接着,我们实现了网格布局的文件列表,让用户可以根据自己的喜好选择不同的布局方式。

    26612

    谈谈flutter中Checkbox复选框的全选与删除【flutter20个实例之三】

    二、讲解(后附源码) 1.这里主要用到AppBar、Stack、Offstage、Listview等组件 逻辑是这样的:点击右上角编辑,调出每条内容左侧的复选框,和底部的操作样式。...然后可以全选,取消,单选,删除,再次点击编辑后隐藏复选框样式 主要功能分为以下四个模块,顶部导航栏也就是appbar组件、叠加stack组件、显示隐藏offstage组件、列表listview组件 ?...2.我们先初始化一下数据,设置顶部信息栏的显示效果 appbar的右侧设置一个编辑按钮,增加点击事件,重置选中的ID和复选框样式 appbar的相关功能可以参考初识顶部导航栏【flutter20个实例之一...,所以用offstage组件包裹,初始化属性为: offstage: _isOff 默认是隐藏的,点击右上角编辑icon后,_isOff设置为true 同时全选框增加点击事件: 如果为true,遍历_list...,左侧放我们的复选框,右侧是列表数据 注意的是:内容里面的复选框padding,要和底部操作条的padding设置一致,看起来是对齐的 内容列表中的复选框点击的时候: 如果状态为true,判断deleteIds

    3.6K30

    flutter中的响应式布局

    Flutter是一个跨平台的UI框架, 我们能够一次编程就可以手机、PC、web上多端使用。 那么,我们如何做到一次编码就可以适配不同的屏幕呢?...在flutter中,我们可以根据UI设计的效果,通过使用不同的技术、widgets和第三方包,轻松的实现响应式 In this article, we'll focus on one very specific...,并介绍如何在大屏幕和手机上使用如下的布局方式: 大屏幕 手机屏幕使用drawer 就像我们看到的,在不同屏幕尺寸,我们需要不同的布局方式...在web开发中我们可以使用css很容易实现这种效果。下面我们就来看看在flutter中是如何实现的吧! 我们将实现如下的简单功能: 点击左上角icon打开(点击返回按钮关闭)....项目实现 我们通过AS或VS Code来创建一个flutter项目吧。

    2.8K10

    flutter - 单选ListView Flutter

    本文整理自https://stackoverflow.com/questions/62499593/ 我试图在我的应用程序中实现listView单一选择,以便一旦点击列表中的某个项目,从而使按下的项目颜色状态与其他项目不同...我已经尽力了,但是效果不好。问题在于,即使我的实现在按下时更新了每个项目状态,也不会将其他状态重置为初始状态。...将当前选择保存在类级别变量中BoxSelection _selectedBox 简化代码,使其直接作用于迭代整个列表的当前选择 onTap: () => setState(() { if...projectType[index].isSelected; _selectedBox = projectType[index]; }); 关于flutter - 单选ListView...Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62499593/

    2.9K60

    从零开始的Flutter之旅: StatelessWidget

    下面我们来看flutter_github中的一个实例。(项目链接在文章底部) ? 圈选中的 item 只有两个信息,头像与名称。...这个性质正好符合我们将要抽离的部件。抽离的部件需要做头像与名称的展示,没有任何形式上的交互变化。唯一的一个交互也是点击,但它并没有涉及数据的改变。所以在代码中将这些数据定义成 final 类型。...ListView 中引用 FollowItemView,并传入不变的数据即可。...正如开头所说的将小部件作为 Flutter 应用构建的基础,在 Flutter 中我们将小部件的构建称作为 Widget Tree,即小部件树。...项目正在持续更新中,感兴趣的可以关注一下。 当然如果你想了解 Android 原生,相信flutter_github的纯 Android 版本AwesomeGithub是一个不错的选择。

    1.1K40

    Flutter技术与实战(4)

    在 Flutter 中,布局和绘制工作实际上是在 Widget 的另一个子类 RenderObjectWidget 内完成的。...在 ListView 中,有两种方式支持分割线: 一种是,在 itemBuilder 中,根据 index 的值动态创建分割线,也就是将分割线视为列表项的一部分; 另一种是,使用 ListView 的另一个构造方法...如何快速回到列表顶部?列表滚动是否已经开始,或者是否已经停下来了?...问题 在ListView中,如何提前缓存子元素?...不过 Flutter 无法像浏览器冒泡那样取消或者停止事件进一步分发,我们只能通过 hitTestBehavior 去调整组件在命中测试期内应该如何表现,比如把触摸事件交给子组件,或者交给其视图层级之下的组件去响应

    10.9K20

    Flutter环境安装 && 运行

    ,如果是zsh,输入open .zshrc;(如果是bash,则输入open .baseprofile)在文件末尾添加如下代码,其中pwd为刚刚解压的flutter/bin文件地址,export PATH...创建项目 使用VSCode创建Flutter项目,打开VSCode(记得安装Flutter插件),同时按CMD+Shift+P,唤起快捷命令,输入Flutter,选择Flutter: New Applicaiton...Project,如下图 [wecom20210716-172146@2x.png] 然后选择项目存放地址,项目名字,即可 运行模拟器 列举支持的模拟器 flutter emulator 结果如下: [...Studio,点击Config->SDK Manager,选中SDK Tools,取消勾选底部`Hide Obsolete Packages`,然后能看到`Android SDK Tools(Obsolete...: 修改:打开Android Studio,点击Config->SDK Manager,选中SDK Tools,取消勾选底部`Hide Obsolete Packages`,能看到`Android SDK

    1.3K20

    Flutter项目之iOS应用的打包发布流程

    iOS开发的朋友,可能很难顺利的完成,接下来介绍下Flutter如何打包iOS应用,并上传到苹果开发后台。...进入到下图的配置界面 先配置证书,选择申请证书,右边点击+号,新建证书,然后直接选中发布证书 选择第一步导出的文件,然后进行下一步。点击下载证书,下载到电脑上,双击就安装证书。...点击下一步选择刚刚创建的App ID,然后下一步选择证书,创建好将文件下载,双击运行。现在证书配置文件已经申请配置好了。可以真机调试或者发布。...对于Xcode 8.3和更高版本,这一步不是必需的 在Xcode中,配置应用程序版本并构建: 在Xcode项目导航器中选择 Runner , 然后在设置视图边栏中选择选择 Runner target ....在Xcode Organizer窗口的边栏中,选择您的iOS应用程序,然后选择您刚刚生成的build档案 点击Validate… 按钮. 如果报错,请解决它们并生成另一个build。

    6.1K21

    使用Flutter和Dart开发跨平台移动应用的详细教程

    步骤1:安装Flutter和Dart首先,确保你的系统中已经安装了Flutter和Dart。...步骤2:创建新的Flutter项目使用以下命令在命令行中创建一个新的Flutter项目:flutter create my_flutter_appcd my_flutter_app这将在当前目录下创建一个名为...步骤3:打开项目并编辑代码使用你喜欢的编辑器(例如VSCode、Android Studio等)打开项目。在lib文件夹下找到main.dart文件,这是应用程序的入口点。...步骤4:运行应用程序在命令行中运行以下命令,启动你的应用程序:flutter run这将启动应用程序并在模拟器或连接的设备上运行。步骤5:定制你的应用程序开始修改代码,根据你的需求自定义应用程序。...例如,你可以使用ListView创建滚动列表,TextField添加文本输入框,以及FlatButton创建可点击的按钮。

    41110

    Flutter完整开发实战详解(二、 快速开发实战篇)

    作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速开发一个完整的...Flutter 中 为我们提供了 RefreshIndicator 作为内置下拉刷新控件;同时我们通过给 ListView 添加 ScrollController 做滑动监听,在最后增加一个 Item,...上拉加载更多在代码中是通过 _getListCount() 方法,在原本的数据基础上,增加实际需要渲染的 item 数量给 ListView 实现的,最后通过 ScrollController 监听到底部...返回的一个对象 } 2、Json序列化   在 Flutter 中,json 序列化是有些特殊的。...Android启动页,在 android/app/src/main/res/drawable/launch_background.xml 中已经有写好的启动页, 部分被屏蔽,

    5K30
    领券