Flutter ListView获取页面显示的第一个和最后一个item、点击item自动偏移居中ListView

最新推荐文章于 2024-03-18 09:12:00 发布

原创

最新推荐文章于 2024-03-18 09:12:00 发布 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #listview #自动偏移居中 #首尾item

本文介绍了如何在Flutter中实现ListView的两个高级特性：监听显示的第一个和最后一个item，以及点击item自动居中。通过自定义SliverChildBuilderDelegate和ScrollController，实现了列表边界检测和动态滚动效果。同时提供了简洁的代码示例，适用于需要此类功能的开发者。

本文章是两个flutter小组件listview的两个功能，这里做一个分享方便以后其他衍生特殊高级功能的开发，扩宽你的思路：

一、ListView获取页面显示的第一个和最后一个item

1.listview 中利用custom才能监听到第一个条目
new ListView.custom(
  controller: controller,
  cacheExtent: 1.0, // 只有设置了1.0 才能够准确的标记position 位置
  childrenDelegate:  MyChildrenDelegate(
        (BuildContext context, int index) {
//Dismissible这个可以用作列表的横向滑动删除功能效果
      return new Dismissible(
          key: new Key(list[index]),
          onDismissed: (direction) {
            //被移除回掉
            list.removeAt(index);
            var item = list[index];
            Scaffold.of(context).showSnackBar(
                new SnackBar(content: new Text("$item")));
          },
          child: new ListTile(
            title: new Text(list[index]),
          ));
    },
    childCount: list.length,
  ),
)

SliverChildBuilderDelegate

class _SaltedValueKey extends ValueKey{
  const _SaltedValueKey(Key key): assert(key != null), super(key);
}
class MyChildrenDelegate extends SliverChildBuilderDelegate {
  MyChildrenDelegate(
      Widget Function(BuildContext, int) builder, {
        int childCount,
        bool addAutomaticKeepAlive = true,
        bool addRepaintBoundaries = true,
      }) : super(builder,
      childCount: childCount,
      addAutomaticKeepAlives: addAutomaticKeepAlive,
      addRepaintBoundaries: addRepaintBoundaries);
  // Return a Widget for the given Exception
  Widget _createErrorWid

最低0.47元/天解锁文章