Flutter高级列表视图插件 azlistview_plus 的使用

简介

azlistview_plus 是一个用于创建带有粘性头部和索引栏的列表视图的Flutter插件。它基于 scrollable_positioned_list，支持多种功能如分组列表、自定义头部、索引联动等。

特性

• 轻松创建城市列表或联系人列表界面。
• 列表项可以按A-Z分组。
• 支持浮动选项的粘性头部。
• 支持自定义头部。
• 支持索引联动。
• 索引栏支持自定义样式。
• 索引栏支持本地图片。
• 允许滚动到列表中的特定项。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  azlistview: ^3.0.0

然后运行 flutter pub get 来安装依赖。

示例代码

下面是一个完整的示例demo，展示如何使用 azlistview_plus 创建一个简单的联系人列表：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ContactListPage(),
    );
  }
}

class ContactListPage extends StatefulWidget {
  [@override](/user/override)
  _ContactListPageState createState() => _ContactListPageState();
}

class _ContactListPageState extends State<ContactListPage> {
  List<CityModel> cityList = [];
  final String defaultCity = "定位";
  final String hotCity = "热门";

  [@override](/user/override)
  void initState() {
    super.initState();
    loadData();
  }

  void loadData() {
    cityList.add(CityModel(name: defaultCity, tagIndex: '#'));
    cityList.add(CityModel(name: hotCity, tagIndex: '#'));
    // 添加一些城市数据
    cityList.addAll([
      CityModel(name: "北京", tagIndex: "B"),
      CityModel(name: "上海", tagIndex: "S"),
      CityModel(name: "广州", tagIndex: "G"),
      CityModel(name: "深圳", tagIndex: "S"),
      CityModel(name: "成都", tagIndex: "C"),
    ]);
    _handleList(cityList);
  }

  void _handleList(List<CityModel> list) {
    if (list.isEmpty) return;
    for (int i = 0, length = list.length; i < length; i++) {
      String pinyin = PinyinHelper.getPinyinE(list[i].name);
      String tag = pinyin.substring(0, 1).toUpperCase();
      list[i].namePinyin = pinyin;
      if (RegExp("[A-Z]").hasMatch(tag)) {
        list[i].tagIndex = tag;
      } else {
        list[i].tagIndex = "#";
      }
    }
    SuspensionUtil.sortListBySuspensionTag(list);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('联系人列表'),
      ),
      body: AzListView(
        data: cityList,
        itemCount: cityList.length,
        itemBuilder: (BuildContext context, int index) {
          CityModel model = cityList[index];
          return ListTile(
            title: Text(model.name),
          );
        },
        susItemBuilder: (BuildContext context, int index) {
          CityModel model = cityList[index];
          return Container(
            height: 40,
            padding: EdgeInsets.only(left: 16.0),
            color: Color(0xFFF3F4F5),
            alignment: Alignment.centerLeft,
            child: Text(
              model.getSuspensionTag(),
              softWrap: false,
              style: TextStyle(fontSize: 14.0, color: Color(0xFF999999)),
            ),
          );
        },
        indexBarData: SuspensionUtil.getTagIndexList(cityList),
        indexBarOptions: IndexBarOptions(
          needRebuild: true,
          color: Color(0xFFEEEEEE),
          downColor: Color(0xFFCCCCCC),
        ),
      ),
    );
  }
}

class CityModel extends ISuspensionBean {
  String name;
  String tagIndex;
  String namePinyin;

  CityModel({this.name, this.tagIndex});

  [@override](/user/override)
  String getSuspensionTag() => tagIndex;

  [@override](/user/override)
  String toString() => "$name";
}