Flutter字母滚动列表插件alphabetical_scroll的使用

Flutter字母滚动列表插件alphabetical_scroll的使用

简介

alphabetical_scroll 是一个基于 flutter_sticky_header 的 Flutter 插件，用于实现字母滚动功能。它可以帮助你轻松创建类似联系人或国家列表的界面，并提供以下特性：

1. 字母堆叠滚动条：在右侧显示一个字母堆叠的滚动条。
2. 列表头字母与滚动条字母同步：当滚动列表时，列表头的字母会与滚动条上的字母保持一致。
3. 点击事件：可以为列表项添加点击事件。
4. 支持自定义头部：可以根据需要自定义列表头部。
5. 样式化滚动条：可以对字母滚动条进行样式设置。
6. 自定义列表项：可以为列表项使用自定义的小部件。

开始使用

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 alphabetical_scroll 依赖：

dependencies:
  alphabetical_scroll:

2. 导入库

在 Dart 文件中导入 alphabetical_scroll 库：

import 'package:alphabetical_scroll/alphabetical_scroll.dart';

使用示例

1. 创建数据列表

你可以创建一个包含联系人或国家名称的列表。例如：

List<String> contacts = ["Jessica Jones", "Rob Stark", "Tom Holland"];

2. 使用 AlphabetListScreen 构建界面

接下来，使用 AlphabetListScreen 小部件来构建带有字母滚动功能的列表。以下是完整的示例代码：

import 'dart:developer';

import 'package:alphabetical_scroll/alphabetical_scroll.dart';
import 'package:flutter/material.dart';

// 假设 ContactInfo 和 ContactTile 是自定义的类和小部件
class ContactInfo {
  final int id;
  final String name;
  final Color bgColor;

  ContactInfo({required this.id, required this.name, required this.bgColor});
}

class ContactTile extends StatelessWidget {
  final String name;

  ContactTile({required this.name});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.blue,
        child: Text(
          name.isNotEmpty ? name[0] : '', // 显示名字的第一个字母
          style: const TextStyle(color: Colors.white),
        ),
      ),
      title: Text(name),
    );
  }
}

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<ContactInfo> contacts = [];
  ScrollController scrollController = ScrollController();

  [@override](/user/override)
  void initState() {
    super.initState();
    var faker = Faker();

    for (int i = 0; i < 100; i++) {
      if (i < 60) {
        contacts.add(ContactInfo(
          id: i,
          name: faker.person.name(),
          bgColor: Colors.blue,
        ));
      } else {
        contacts.add(ContactInfo(
          id: i,
          name: faker.phoneNumber.us(),
          bgColor: Colors.blue,
        ));
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          iconTheme: const IconThemeData(color: Colors.black),
          backgroundColor: const Color(0xFFEDEDED),
          title: const Text(
            'Contacts',
            style: TextStyle(color: Color(0xFF171717)),
          ),
        ),
        body: AlphabetListScreen<ContactInfo>(
          itemBuilder: (context, contactInfo) {
            return ContactTile(
              name: contactInfo.name,
            );
          },
          listScrollController: scrollController,
          sources: contacts,
          sourceFilterItemList: contacts.map((e) => e.name).toList(),
          onTap: (item) {
            log("pressed ${item.id} do something");
          },
        ),
      ),
    );
  }
}