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 分类

安装插件