搜尋套件、儲存庫與 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:

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。