第三十回： LisvtView响应事件

我们在上一章回中介绍了如何给ListView添加分隔线,本章回中将介绍ListView响应事件相关的知识.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的ListView响应事件主要分两种类型：

• 一种是滑动ListView时ListView做出响应，我们称其为滑动事件；
• 另外一种是点击ListView中的某个项目时ListVie做出响应，我们称其为点击事件。

本章回中将详细介绍这两种事件相关的知识。

响应方法

滑动事件

响应滑动事件通过controller属性实现，只需要给该属性赋值就能响应滑动事件。赋值时需要创建ScrollController类型的对象，并且添加监听器，下面是示例代码：

//创建对象并且添加监听器
ScrollController _scrollController = ScrollController();_scrollController.addListener(() {//offset并不是ListView中的索引值print("offset---: ${_scrollController.offset}");//Position的信息多，包含了offsetprint("position---: ${_scrollController.position}");});//给controller属性赋值Widget listEx = ListView(controller: _scrollController,//其它内容省略不写}

在上面的代码中我们通过controller属性来响应滑动事件，当滑动ListView时ScrollController对象中的监听器会响应滑动事件，我们在监听器中打印出了滑动偏移的距离，也就是代码中的offset。

点击事件

点击事件通过ListTitle中的onTap属性实现，在创建ListView时会有index参数，它表示ListView中某个项目的索引，把它通过参数传递给ListTitle对象，然后在ListTitle对象的onTap属性中就可以使用该索引值，下面的示例代码中打印出了索引值，通过日志就能知道哪个项目被点击了，进而可以对点击事件做出响应，下面是示例代码：

//在参数是会入索引，然后通过onTap来响应索引
ListTile listItem(IconData icon, String content,int index) {return ListTile(leading: Icon(icon,color: Colors.blue,),title: Text(content,style: const TextStyle(color: Colors.black,fontSize: 22,),),onTap:(){print(" Item $index onClicked");} ,);
}Widget listEx01 = ListView.builder(controller: _scrollController,itemCount: 8,itemExtent: 60,itemBuilder: (BuildContext context, int index) {//把索引值传递给ListTitlereturn listItem(Icons.ice_skating, "$index",index);},
);

在上面的代码中利用itemBuilder属性中的index参数可以得知ListView中哪个项目被点击了，然后把该index传递给ListTitle,也就是ListView中的某个项目，在该项目的onTap属性中把传递来的index打印出来，从打印出的日志中可以得知哪个项目被用户点击了。打印日志只是一个简单的响应动作，大家可以依据项目的需求做响应动作，不必拘泥于示例代码中打印日志这种响应动作。

经验总结

• 滑动事件主要明白controller属性以及监听器中的offset，通过offset可以在屏幕上快速跳转。注意offset是从屏幕顶部开始计算的，其单位是像素，它表示从顶部到滑动位置的偏移值，有些看官可能会认为它是ListView中的索引值，这种观点是错误的，只能说明这位看官把它与点击事件中的index混淆了。
• 点击事件主要明白indext和onTap属性就可以。index是索引值，它是创建ListView中某个项目时传递来的，通过它可以得知ListView中哪个项目被点击了，onTap属性是项目的属性，通过该属性可以让项目响应点击事件。
• 在实际项目中使用ListVeiw时需要响应滑动事件和点击事件，不过点击事件使用频率相对高一些。因此，大家可以重点掌握点击事件的内容。

看官们，关于"ListView响应事件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!