Flutter字母列表滚动视图插件alphabet_list_scroll_view的使用

Flutter字母列表滚动视图插件alphabet_list_scroll_view的使用

Alphabet List Scroll View 是一个可自定义的列表视图，带有A-Z侧边栏滚动条，可以快速跳转到选定字符的项目。通过拖动字母来快速滚动浏览列表。

API

AlphabetScrollListHeader

示例图片

完整示例代码

import 'package:alphabet_list_scroll_view/alphabet_list_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() => runApp(MainApp());

// 随机生成名字
String getRandomName() {
  final List<String> preFix = ['Aa', 'bo', 'Ce', 'Do', 'Ha', 'Tu', 'Zu'];
  final List<String> surFix = ['sad', 'bad', 'lad', 'nad', 'kat', 'pat', 'my'];
  preFix.shuffle();
  surFix.shuffle();
  return '${preFix.first}${surFix.first}';
}

class User {
  final String name;
  final String company;
  final bool favourite;

  User(this.name, this.company, this.favourite);
}

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

class _MainAppState extends State<MainApp> {
  List<User> userList = [];
  List<String> strList = [];
  List<Widget> favouriteList = [];
  List<Widget> normalList = [];
  TextEditingController searchController = TextEditingController();

  [@override](/user/override)
  void initState() {
    // 初始化用户列表
    for (var i = 0; i < 26; i++) {
      userList.add(User(getRandomName(), getRandomName(), false));
    }
    for (var i = 0; i < 4; i++) {
      userList.add(User(getRandomName(), getRandomName(), true));
    }
    // 按名字排序
    userList.sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
    filterList();
    searchController.addListener(() {
      filterList();
    });
    super.initState();
  }

  // 过滤列表
  filterList() {
    List<User> users = [];
    users.addAll(userList);
    favouriteList = [];
    normalList = [];
    strList = [];
    if (searchController.text.isNotEmpty) {
      users.retainWhere((user) => user.name.toLowerCase().contains(searchController.text.toLowerCase()));
    }
    users.forEach((user) {
      if (user.favourite) {
        favouriteList.add(
          Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            secondaryActions: <Widget>[
              IconSlideAction(
                iconWidget: Icon(Icons.star),
                onTap: () {},
              ),
              IconSlideAction(
                iconWidget: Icon(Icons.more_horiz),
                onTap: () {},
              ),
            ],
            child: ListTile(
              leading: Stack(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage("https://placeimg.com/200/200/people"),
                  ),
                  Container(
                      height: 40,
                      width: 40,
                      child: Center(
                        child: Icon(
                          Icons.star,
                          color: Colors.yellow[100],
                        ),
                      ))
                ],
              ),
              title: Text(user.name),
              subtitle: Text(user.company),
            ),
          ),
        );
      } else {
        normalList.add(
          Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            secondaryActions: <Widget>[
              IconSlideAction(
                iconWidget: Icon(Icons.star),
                onTap: () {},
              ),
              IconSlideAction(
                iconWidget: Icon(Icons.more_horiz),
                onTap: () {},
              ),
            ],
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage("https://placeimg.com/200/200/people"),
              ),
              title: Text(user.name),
              subtitle: Text(user.company),
            ),
          ),
        );
        strList.add(user.name);
      }
    });

    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: AlphabetListScrollView(
        strList: strList, // 字符串列表
        highlightTextStyle: TextStyle( // 高亮文本样式
          color: Colors.yellow,
        ),
        showPreview: true, // 显示预览
        itemBuilder: (context, index) {
          return normalList[index]; // 构建每个列表项
        },
        indexedHeight: (i) {
          return 80; // 每个列表项的高度
        },
        keyboardUsage: true, // 是否启用键盘操作
        headerWidgetList: <AlphabetScrollListHeader>[
          AlphabetScrollListHeader(widgetList: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextFormField(
                controller: searchController, // 搜索控制器
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  suffix: Icon(
                    Icons.search,
                    color: Colors.grey,
                  ),
                  labelText: "Search",
                ),
              ),
            )
          ], icon: Icon(Icons.search), indexedHeaderHeight: (index) => 80),
          AlphabetScrollListHeader(
              widgetList: favouriteList, // 收藏列表
              icon: Icon(Icons.star),
              indexedHeaderHeight: (index) {
                return 80; // 收藏列表项的高度
              }),
        ],
      ),
    ));
  }
}