我们在上一章回中介绍了如何给ListView添加分隔线,本章回中将介绍ListView响应事件相关的知识.闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在这里说的ListView响应事件主要分两种类型:
- 一种是滑动ListView时ListView做出响应,我们称其为滑动事件;
- 另外一种是点击ListView中的某个项目时ListVie做出响应,我们称其为点击事件。
本章回中将详细介绍这两种事件相关的知识。
响应方法
滑动事件
响应滑动事件通过controller
属性实现,只需要给该属性赋值就能响应滑动事件。赋值时需要创建ScrollController
类型的对象,并且添加监听器,下面是示例代码:
//创建对象并且添加监听器
ScrollController _scrollController = ScrollController();
_scrollController.addListener(() {
//offset并不是ListView中的索引值
print("offset---: ${_scrollController.offset}");
//Position的信息多,包含了offset
print("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) {
//把索引值传递给ListTitle
return 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响应事件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!