第三十回: LisvtView响应事件

我们在上一章回中介绍了如何给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属性来响应滑动事件,当滑动ListViewScrollController对象中的监听器会响应滑动事件,我们在监听器中打印出了滑动偏移的距离,也就是代码中的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响应事件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值