alphabet_list_view

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

AlphabetListView 是一個 Flutter 小部件，顯示一個可滾動的清單，帶有黏性區段標題和可點擊的字母側邊欄，靈感來自 iOS 的聯絡人清單。它透過側邊欄讓使用者能快速跳轉至特定區段，從而增強長清單中的導航體驗。該套件支援多種平台，包括 Android、iOS、Web、macOS、Windows 和 Linux，非常適合需要按字母順序排序資料的應用程式，例如聯絡人、字典或目錄。它透過最少的設定提供流暢的捲動與直覺的使用者互動。

適用情境

聯絡人列表導航
詞典或術語表應用
名稱目錄
使用者資料排序
增強的列表篩選
快速跳轉章節

主要特色

黏性章節標題
iOS 風格的字母側邊欄
跨平台支援
平滑滾動
最小設定
可自定樣式

適合對象

已排序資料的應用程式
行動與Web應用程式
使用者介面增強
以可存取性為重點的設計
尋求原生體驗的開發者

使用建議

需要已排序的資料輸入
複雜佈局可能需要自訂樣式
限於字母分組
不適用於非順序資料
處理超大資料集時的效能
小螢幕上的側邊欄可見性

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Alphabet List View

A ListView with sticky headers and an iOS-like clickable sidebar.

Preview example

Features

Easy to create
Customizable header
Customizable sidebar
Customizable overlay
Right to left language support
Configurable sidebar items

Usage

Depend on it:

dependencies:
  alphabet_list_view: ^1.1.1

Import it:

import 'package:alphabet_list_view/alphabet_list_view.dart';

Example:

final List<AlphabetListViewItemGroup> tech = [
  AlphabetListViewItemGroup(
    tag: 'A',
    children: const [
      Text('Apple'),
      Text('Amazon'),
      Text('Alibaba'),
    ],
  ),
  AlphabetListViewItemGroup(
    tag: 'I',
    children: const [
      Text('Intel'),
      Text('IBM'),
    ],
  ),
];

AlphabetListView(
  items: tech,
);

Default symbols

You can easily get the alphabet (A-Z) using the following code:

final String alphabet = DefaultScrollbarSymbols.alphabet;

Customization options

final List<AlphabetListViewItemGroup> tech = [
  AlphabetListViewItemGroup(
    tag: 'A',
    children: const [
      Text('Apple'),
      Text('Amazon'),
      Text('Alibaba'),
    ],
  ),
  AlphabetListViewItemGroup(
    tag: 'I',
    children: const [
      Text('Intel'),
      Text('IBM'),
    ],
  ),
];

final AlphabetListViewOptions options = AlphabetListViewOptions(
  listOptions: ListOptions(
    listHeaderBuilder: (context, symbol) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(100),
        ),
        child: Text(symbol),
      ),
    ),
  ),
  scrollbarOptions: const ScrollbarOptions(
    backgroundColor: Colors.yellow,
  ),
  overlayOptions: const OverlayOptions(
    showOverlay: false,
  ),
);

AlphabetListView(
  items: tech,
  options: options,
);

搜尋套件、儲存庫與 APP 分類

安裝套件