文章目录
- 概念介绍
- 响应方法
- 滑动事件
- 点击事件
- 经验总结
我们在上一章回中介绍了如何给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响应事件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!