Flutter字母索引列表视图插件alphabet_index_listview的使用

Flutter字母索引列表视图插件alphabet_index_listview的使用

alphabet_index_listview 是一个Flutter插件，用于创建带有字母索引的列表视图。它可以帮助用户快速定位到特定的字母分组，适用于联系人列表、词典等场景。下面是一个完整的示例demo，展示了如何使用该插件。

1. 引入依赖

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

dependencies:
  flutter:
    sdk: flutter
  alphabet_index_listview: ^最新版本号

2. 示例代码

import 'package:alphabet_index_listview/alphabet_index_listview.dart';
import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '字母索引列表'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义数据列表
  List<String> dataList = List.from({
    "Alpha",
    "AlphaGo",
    "Beta",
    "Black",
    "Crease",
    "Claim",
    "Hello",
    "Hallo",
    "Hero",
    "Words",
    "Work",
    "Woman",
    "Foot",
    "Head",
    "Face",
    "Hair",
    "Nose",
    "Mouth",
    "Eye",
    "Arm",
    "Hand",
    "Finger",
    "Leg",
  });

  // 生成的字母索引分组列表
  List<AlphabetIndexGroup<String>>? generatedList;

  // 生成随机字符串列表
  List<String> generateRandomString() {
    var words = 'abcdefghijklmnopqrstuvwxyz'.split('');
    var rng = Random();
    return List<String>.generate(1000, (index) {
      int length = rng.nextInt(10) + 1; // 随机生成单词长度
      return List<String>.generate(
          length, (index) => words[rng.nextInt(words.length)]).join();
    });
  }

  [@override](/user/override)
  void initState() {
    // 初始化时分析数据并生成字母索引分组
    generatedList = AlphabetIndexTool.analyzeData(dataList, (data) => data);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            // 点击标题时生成新的随机数据并更新列表
            List<String> newDataList = generateRandomString();
            generatedList = AlphabetIndexTool.analyzeData(newDataList, (data) => data);
            setState(() {});
          },
          child: Text(widget.title),
        ),
      ),
      body: Center(
        child: AlphabetIndexSliverView(
          // 固定头部
          stickHeader: true,
          // 数据源
          dataList: generatedList!,
          // 分组选择回调
          onGroupSelected: (int index) {
            if (kDebugMode) {
              print("Group$index");
            }
          },
          // 侧边栏对齐方式
          sideBarAlign: AlphabetIndexSideAlign.right,
          // 侧边栏样式
          sideBarBuilder: (tag, flag) {
            return Padding(
              padding: const EdgeInsets.fromLTRB(15, 2, 15, 2),
              child: Text(
                tag,
                style: const TextStyle(
                  fontSize: 13,
                  fontWeight: FontWeight.w500,
                  color: Colors.black87,
                ),
              ),
            );
          },
          // 提示框样式
          tipsBuilder: (int index, String tag) {
            return Container(
              decoration: BoxDecoration(
                color: Colors.yellow.withAlpha(50),
                borderRadius: BorderRadius.circular(16),
              ),
              width: 65,
              height: 65,
              alignment: Alignment.center,
              child: Text(
                tag,
                style: const TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.w500,
                  color: Colors.black54,
                ),
              ),
            );
          },
          // 分组头样式
          groupBuilder: (int groupIndex, String tag) {
            return Container(
              color: Colors.grey,
              height: 30,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
              child: Text(tag),
            );
          },
          // 列表项样式
          childBuilder: (int groupIndex, int childIndex, String data) {
            return Container(
              decoration: const BoxDecoration(
                color: Colors.white70,
                border: Border(
                  bottom: BorderSide(color: Colors.black54, width: 0.5),
                ),
              ),
              height: 80,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
              child: Text(data),
            );
          },
          // 内边距
          padding: const EdgeInsets.fromLTRB(0, 100, 0, 100),
        ),
      ),
    );
  }
}