Flutter高效列表滚动插件 azlistview 的使用

azlistview 是一个用于创建带有索引栏和悬浮头部的高效列表滚动插件。它基于 scrollable_positioned_list，提供了丰富的功能来帮助开发者轻松实现城市列表或联系人列表等界面。

主要特性

• 简单创建城市列表或联系人列表界面。
• 列表项可以按字母顺序分组（A-Z）。
• 支持悬浮头部，并且可以选择是否浮动。
• 支持自定义头部。
• 支持索引联动。
• 索引栏支持自定义样式。
• 索引栏支持本地图片。
• 允许滚动到列表中的特定项。

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  azlistview: ^2.0.0

示例代码

下面是一个完整的示例代码，展示了如何使用 azlistview 创建一个包含多个页面的应用程序。每个页面展示了不同的列表类型，如 GitHub 语言、联系人、城市列表等。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:azlistview/azlistview.dart'; // 导入 azlistview 包

// 假设这里有一些页面文件：ui/index.dart, ui/github_language_page.dart, ui/contacts_page.dart, etc.
import 'ui/index.dart'; // 这里假设包含了所有页面的导入

void main() {
  runApp(MyApp());
  if (Platform.isAndroid) {
    SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AzListView Demo',
      theme: ThemeData(
        primaryColor: Colors.white,
        accentColor: Colors.grey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AzListView'),
        ),
        body: ListPage([
          PageInfo("GitHub Languages", (ctx) => GitHubLanguagePage(), false),
          PageInfo("Contacts", (ctx) => ContactsPage(), false),
          PageInfo("Contacts List", (ctx) => ContactListPage()),
          PageInfo("City List", (ctx) => CityListPage(), false),
          PageInfo("City List(Custom header)", (ctx) => CityListCustomHeaderPage()),
          PageInfo("Car models", (ctx) => CarModelsPage(), false),
          PageInfo("10000 data", (ctx) => LargeDataPage(), false),
        ]),
      ),
    );
  }
}

详细页面示例：联系人页面

以下是一个具体的例子，展示了如何使用 azlistview 创建一个联系人列表页面。

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

class ContactsPage extends StatefulWidget {
  @override
  _ContactsPageState createState() => _ContactsPageState();
}

class _ContactsPageState extends State<ContactsPage> {
  List<ContactInfo> contacts = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  void loadData() {
    // 模拟加载数据
    contacts.add(ContactInfo(name: "Alice", tagIndex: "A"));
    contacts.add(ContactInfo(name: "Bob", tagIndex: "B"));
    contacts.add(ContactInfo(name: "Charlie", tagIndex: "C"));
    // ... 更多数据
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return AzListView(
      data: contacts,
      itemCount: contacts.length,
      itemBuilder: (context, index) {
        final item = contacts[index];
        return ListTile(
          title: Text(item.name),
        );
      },
      suspensionWidget: Container(
        height: 40,
        color: Colors.grey[300],
        child: Center(child: Text(contacts[0].tagIndex)),
      ),
      indexBarData: SuspensionUtil.getTagIndexList(contacts),
    );
  }
}

class ContactInfo extends ISuspensionBean {
  String name;
  String tagIndex;

  ContactInfo({required this.name, required this.tagIndex});

  @override
  String getSuspensionTag() => tagIndex;
}

在这个示例中，我们定义了一个 ContactInfo 类来存储联系人的信息，并实现了 ISuspensionBean 接口以便于生成悬浮头部。然后在 AzListView 中使用这些数据来构建联系人列表。

通过这个插件，你可以轻松地为你的应用添加高效的列表滚动功能，并且可以根据需要进行高度定制化。