Flutter分类列表展示插件list_with_categories的使用

Flutter分类列表展示插件list_with_categories的使用

简介

ListViewWithCategories 是一个灵活的 Flutter 包，提供了可自定义的带分类的列表视图。开发人员可以轻松地在他们的 Flutter 应用程序中实现带有分类的列表视图。该包支持水平和垂直布局，适用于各种不同的应用场景。

特性

• 可定制的尺寸：设置宽度、高度和分类之间的间距以适应您的用户界面设计。
• 方向支持：可以选择列或行布局来组织您的分类和列表视图。
• 滚动控制器：集成了 ScrollablePositionedList 用于精确控制滚动位置，并通过 ItemPositionsListener 处理滚动事件。
• 动态项目构建：使用自定义的构建器函数来构建列表项和分类，为内容渲染提供灵活性。

开始使用

要使用此包，在您的 pubspec.yaml 文件中添加 ListViewWithCategories 作为依赖项。

dependencies:
  list_with_categories: latest_version

使用方法

ListViewWithCategories 小部件允许创建具有可定制尺寸、方向和项目构建器的分类列表视图。以下是使用它的步骤：

基本设置

首先，确保在 Dart 文件中导入该包：

import 'package:list_with_categories/list_with_categories.dart';

接下来，使用 ListViewWithCategories 小部件创建一个分类列表视图：

ListViewWithCategories(
  controller: controller,
  scrollListener: listScrollListener,
  itemsLength: cats.length,
  itemBuilder: (_, index) {
    final sectionLetter = cats[index];
    final animal = groupedBrands[sectionLetter] ?? [];
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Text(
            sectionLetter,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        ...animal.map(
          (e) => ListTile(
            title: Text(e),
          ),
        )
      ],
    );
  },
  categoryBuilder: (_, index) {
    return InkWell(
        onTap: () {
          controller.scrollTo(
              index: index,
              duration: const Duration(milliseconds: 200));
        },
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(cats[index]),
        ));
  },
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 项目中使用 ListViewWithCategories：

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

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(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late ListScrollController controller;
  late ListScrollListener listScrollListener;

  final List<String> animals = [
    'Aardvark',
    'Baboon',
    'Cheetah',
    'Dolphin',
    'Elephant',
    'Flamingo',
    'Giraffe',
    'Hippopotamus',
    'Iguana',
    'Jaguar',
    'Koala',
    'Lion',
    'Meerkat',
    'Narwhal',
    'Ocelot',
    'Panda',
    'Quokka',
    'Raccoon',
    'Sloth',
    'Tiger',
    'Umbrellabird',
    'Vulture',
    'Wallaby',
    'Xerus',
    'Yak',
    'Zebra',
    'Antelope',
    'Buffalo',
    'Cougar',
    'Duck',
    'Eagle',
    'Falcon',
    'Gorilla',
    'Hyena',
    'Impala',
    'Jackal',
    'Kangaroo',
    'Lemur',
    'Mongoose',
    'Numbat',
  ];

  [@override](/user/override)
  void initState() {
    controller = ListScrollController();
    listScrollListener = ListScrollListener();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    animals.sort((a, b) => a.compareTo(b));
    final cats = animals.map((e) => e[0].toUpperCase()).toSet().toList();
    final Map<String, List<String>> groupedBrands = {};
    for (final letter in cats) {
      groupedBrands[letter] =
          animals.where((e) => e.toUpperCase().startsWith(letter)).toList();
    }
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("List with Cats Example"),
      ),
      body: ListViewWithCategories(
        controller: controller,
        scrollListener: listScrollListener,
        itemsLength: cats.length,
        itemBuilder: (_, index) {
          final sectionLetter = cats[index];
          final animal = groupedBrands[sectionLetter] ?? [];
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Text(
                  sectionLetter,
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              ...animal.map(
                (e) => ListTile(
                  title: Text(e),
                ),
              )
            ],
          );
        },
        categoryBuilder: (_, index) {
          return InkWell(
              onTap: () {
                controller.scrollTo(
                    index: index,
                    duration: const Duration(milliseconds: 200));
              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(cats[index]),
              ));
        },
      ),
    );
  }
}