flutter 按字母 排序 通讯录并点击滑动

使用插件：scrollable_positioned_list: ^0.2.3   #列表滚动

import 'package:flutter/material.dart';

import "package:collection/collection.dart"; //要引进这个  才可以使用 groups

import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

class GroudByCustomer extends StatefulWidget {

  const GroudByCustomer({Key? key}) : super(key: key);

  @override

  State<GroudByCustomer> createState() => _GroudByCustomerState();

}

class _GroudByCustomerState extends State<GroudByCustomer> {

  //模拟数据

  List list = [

    {

      "title": "小明",

      "sort": "x",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "花花",

      "sort": "h",

    },

    {

      "title": "上阳",

      "sort": "s",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "小红",

      "sort": "x",

    },

    {

      "title": "丽丽",

      "sort": "l",

    },

    {

      "title": "a明康",

      "sort": "a",

    },

    {

      "title": "小明",

      "sort": "x",

    },

    {

      "title": "丽丽",

      "sort": "l",

    },

    {

      "title": "丽丽",

      "sort": "l",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "a小花",

      "sort": "a",

    },

    {

      "title": "上阳",

      "sort": "s",

    },

    {

      "title": "上阳",

      "sort": "s",

    },

    {

      "title": "上阳",

      "sort": "s",

    },

    {

      "title": "小明",

      "sort": "x",

    },

    {

      "title": "小明",

      "sort": "x",

    },

  ];

  //组装好的数据

  List arr = [];

  //当前被点击都项

  int activeIndex = 0;

  ItemScrollController itemScrollController = ItemScrollController();

  ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();

  //滚动控制

  ScrollController scrollController = ScrollController();

  @override

  void initState() {

    super.initState();

    //对数据进行按字母分组

    customerDate();

    // 滚动监听

    itemPositionsListener.itemPositions.addListener(() {});

  }

  customerDate() {

    // 1.先对数组进行排序

    // 2.对数组进行分组

    // dart 对 List快速排序   (这是按照升序)

    list.sort((left, right) {

      return left['sort'].compareTo(right['sort']);

    });

    //转map类型   （这里需要类型转换 不然使用 groudBy 会报错）

    List<Map> groupList = list.map<Map>((e) => e).toList();

    // // 进行分组

    Map groups = groupBy<Map, String>(groupList, (e) => e["sort"]);

    //组成新的数组

    groups.forEach((key, value) {

      var item = {};

      item["title"] = key;

      item["children"] = value;

      arr.add(item);

    });

  }

  @override

  Widget build(BuildContext context) {

    var size = MediaQuery.of(context).size.width;

    return Scaffold(

        backgroundColor: Colors.grey,

        appBar: AppBar(

          title: const Text("按照字母进行排序----通讯录的格式"),

        ),

        body: Stack(

          children: [

            // //滚动列表

            ScrollablePositionedList.builder(

              shrinkWrap: true,

              itemCount: arr.length,

              itemBuilder: (context, index) => Container(

                  margin: const EdgeInsets.only(bottom: 20),

                  child: Column(

                    children: [

                      Container(

                        height: 20,

                        width: size,

                        color: Colors.white,

                        child: Text(arr[index]["title"]),

                      ),

                      Column(

                        children: arr[index]["children"]

                            .asMap()

                            .entries

                            .map<Widget>((e) {

                          // print()

                          return Container(

                            height: 50,

                            width: size,

                            color: Colors.white,

                            child: Text("${e.value["title"]}"),

                          );

                        }).toList(),

                      ),

                    ],

                  )),

              itemScrollController: itemScrollController,

              itemPositionsListener: itemPositionsListener,

            ),

            Positioned(

              right: 0,

              bottom: 0,

              top: 0,

              child: Column(

                mainAxisAlignment: MainAxisAlignment.center,

                children: arr.asMap().entries.map<Widget>((e) {

                  return InkWell(

                    onTap: () {

                      setState(() {

                        activeIndex = e.key;

                      });

                      //跳到哪个index  并以什么动画执行

                      itemScrollController.scrollTo(

                          index: e.key,

                          duration: const Duration(seconds: 1),

                          curve: Curves.easeIn);

                    },

                    child: Container(

                      width: 20,

                      margin: const EdgeInsets.only(bottom: 10),

                      child: Text(

                        "${e.value["title"]}",

                        style: TextStyle(

                            color: activeIndex == e.key

                                ? Colors.green

                                : Colors.black),

                      ),

                    ),

                  );

                }).toList(),

              ),

            )

          ],

        ));

  }

}