首页
学习
活动
专区
工具
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应用程序。 用GitHubmain.dart替换lib/main.dart文件。...用gitHubpubspec.yaml替换pubspec.yaml文件。 项目中创建一个图像目录,并添加lake.jpg。...一旦你有一个连接和启用设备,或者你已经启动了iOS模拟器(Flutter安装一部分),你很好! FlutterBuilding 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:点击按钮监听 注意收起键盘操作

94420

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:点击按钮监听 注意收起键盘操作

93930

开始使用-编写你第一个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.3K10

干货 | 携程火车票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.1K30

Flutter 侧滑栏及城市选择UI实现方法

Flutter简介 Flutter是谷歌移动UI框架,可以快速iOS和Android上构建高质量原生用户界面。 Flutter可以与现有的代码一起工作。...全世界,Flutter正在被越来越多开发者和组织使用,并且Flutter是完全免费、开源。 它也是构建未来Google Fuchsia 应用主要方式。...Flutter 跨端上凭借着性能优势关注量,使用度也持续上升.今天给大家分享去年就写一个Flutter版本侧滑栏. 实现 先上一张实现效果图 ?...SliderBar 实现 侧边是一个支持手势滑动SliderBar,一个自定义StatefulWidget.可以观察到,当手势侧边滑动时,中央显示选中标签....getTranslation(); 城市选择主界面实现 主布局 采用了Flutter Stack布局(非常类似Android FrameLayout),下层是城市选择页面数据,上层盖了一层SliderBar

2K31

开源项目——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.7K00

Flutter响应式编程:Streams和BLoC

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

4.1K90

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

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

18011

谈谈flutterCheckbox复选框全选与删除【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环境安装 && 运行

,如果是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响应式布局

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.7K10

从零开始Flutter之旅: StatelessWidget

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

1.1K40

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.8K60

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

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

4.8K21

Flutter技术与实战(4)

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

10.7K20

使用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创建可点击按钮。

29710
领券