搜索插件、代码仓与 APP 分类

插件详情v4.0.0

indexed_list_view

可编程地立即跳转到任意项(通过索引)的无限 ListView。适用于任意大小列表,性能出色。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1510
喜欢数
233
Pub 分数
150

安装插件

flutter pub add indexed_list_view

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个高性能的无限列表视图,可通过索引实现即时程序化滚动到任意项目。非常适合需要快速导航的大数据集。该控件仅高效渲染可见项目,在所有平台上保持流畅性能。它可无缝集成到现有的 Flutter 应用中,并针对动态内容进行了优化。专为寻求响应式列表交互但不牺牲速度或内存使用效率的开发者设计。

适合场景

  • 大型数据列表,支持即时索引导航
  • 实时动态内容更新
  • 高性能滚动在移动和Web应用中
  • 高效渲染无限列表
  • 数据密集型界面中的流畅用户体验

主要特点

  • 通过索引快速跳转到列表中的任意项
  • 大型数据集的优化渲染
  • 支持无限滚动,内存开销极小
  • 跨平台兼容性
  • 内置性能优化
  • 与现有 Flutter 项目的轻松集成

适合对象

  • 开发数据密集型应用的开发者
  • 需要快速列表导航的应用程序
  • 面向多个平台的团队
  • 包含大型或动态更新列表的项目
  • 需要响应式 UI 交互的用户

使用建议

  • 需要仔细管理项目索引
  • 可能需要额外的逻辑来处理复杂的项目布局
  • 不适合静态的小列表
  • 性能取决于物品的复杂程度
  • 最适合频繁索引跳转的场景

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

pub package

indexed_list_view

Similar to a ListView, but:

  • Lets you programmatically jump to any item, by index.
  • The jump happens instantly, no matter if you have millions of items.
  • It can also animate the scroll, instead of jumping.

Limitations

The list is always infinite both to positive and negative indexes. In other words, it can be scrolled indefinitely both to the top and to the bottom.

In special, this is useful for implementing calendars, where you want to be able to jump to specific dates, as calendars can be scrolled indefinitely, both to the past and future dates.

You can define index bounds by giving it a minItemCount and maxItemCount, but this will not prevent the list from scrolling indefinitely. When showing items out of the index bounds, or when your itemBuilder returns null, it will ask the emptyItemBuilder to create an "empty" item to be displayed instead. As default, this will return empty containers.

Usage

First, create an indexed scroll controller:

var controller = IndexedScrollController();

Optionally, you may setup an initial index and/or initial scroll offset:

var controller = IndexedScrollController(
    initialIndex: 75,
    initialScrollOffset : 30.0);    

Then, create the indexed list view, and pass it the controller:

IndexedListView.builder(
    controller: controller, 
    itemBuilder: itemBuilder);

There is also the separated constructor, same as ListView.separated:

IndexedListView.separated(
    controller: controller, 
    itemBuilder: itemBuilder,
    separatorBuilder: separatorBuilder);

To jump, use the controller methods like jumpToIndex :

controller.jumpToIndex(10000);

Details

The IndexedScrollController has not only an offset in pixels, but also an origin-index that indicates which item is considered to be at the offset position 0.0.

So there are two ways for you to move the list programmatically: You can change only the offset, or else change the originIndex and the offset at the same time.

To change the originIndex you make an "index jump". This jump is cheap, since it doesn't need to build all widgets between the old and new positions. It will just change the origin.

If you want to move the list programmatically you must create a scroll controller of type IndexedScrollController and pass it in the list constructor. However, if all you need is an infinite list without jumps, then there is no need to even create a controller.

You move the list programmatically by calling the controller methods.

Controller Methods

  1. jumpToIndex(index)

    This is the most common method for you to use. It jumps the origin-index to the given index, and the scroll-position to 0.0.

  2. jumpToIndexAndOffset(index, offset)

    Jumps the origin-index to the given index, and the scroll-position to offset, without animation.

  3. animateToIndex(index)

    If the current origin-index is already the same as the given index, animates the position from its current value to the offset position relative to the origin-index.

    However, if the current origin-index is different from the given index, this will jump to the new index, without any animation. In general, there are never animations when the index changes.

  4. animateToIndexAndOffset(index, offset)

    Same as animateToIndex() but also lets you specify the new offset.

  5. jumpTo(offset)

    Goes to origin-index "0", and then jumps the scroll position from its current value to the given offset, without animation.

  6. animateTo(offset)

    If the current origin-index is already "0", animates the position from its current value to the offset position.

    However, if the current origin-index is different from "0", this will jump to index "0" and the given offset, without any animation. In general, there are never animations when the index changes.

  7. jumpToWithSameOriginIndex(offset)

    Jumps the offset, relative to the current origin-index.

  8. animateToWithSameOriginIndex(offset)

    Animates the offset, relative to the current origin-index.

  9. jumpToRelative(offset)

    Jumps the offset, adding or subtracting from the current offset. It keeps the same origin-index.

  10. animateToRelative(offset)

    Animates the offset, adding or subtracting from the current offset. It keeps the same origin-index.

Don't forget to check the example tab. It shows an infinite list of items of different heights, and you may tap buttons to run some of the methods explained above.


This package got some ideas from Collin Jackson's code in StackOverflow, and uses lots of code from Simon Lightfoot's infinite_listview.

By Marcelo Glasberg

glasberg.dev
github.com/marcglasberg
linkedin.com/in/marcglasberg/
twitter.com/glasbergmarcelo
stackoverflow.com/users/3411681/marcg
medium.com/@marcglasberg

My article in the official Flutter documentation:

The Flutter packages I've authored:

My Medium Articles:

所属分类

源码仓库

使用此插件的项目

暂无相关数据。