chat_index_bar 1.0.2

A chat_index_bar is a package of search controls floating on the chat interface, which can expand the index list to facilitate quick search of chat records.

chat_index_bar

A chat_index_bar is a package of search controls floating on the chat interface, which can expand the index list to facilitate quick search of chat records.

Import the library into the project

dependencies:
  chat_index_bar: ^1.0.0

And the following shows how to export that object

import 'package:chat_index_bar/chat_index.bar.dart';


class FriendsPage extends StatefulWidget {
  const FriendsPage({Key? key}) : super(key: key);

  @override
  _FriendsPageState createState() => _FriendsPageState();
}

class _FriendsPageState extends State<FriendsPage> {
  // 字典里存放item和高度的对应数据
  final Map _groupOffsetMap = {
    indexWords[0]: 0.0,
    indexWords[0]: 0.0,
  };

  final ScrollController _scrollController = ScrollController();

  final List<Friends> _listDatas = [];

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

    // 方法一
    // _listDatas.addAll(datas);
    // _listDatas.addAll(datas);

    // 方法二 step1 链式 添加【增量数据】
    _listDatas
      ..addAll(datas);

    // step2 排序
    _listDatas.sort((Friends a, Friends b) {
      return a.indexLetter.compareTo(b.indexLetter);
    });

    var _groupOffset = 54.5 * 4;
    // 经过循环计算，将每一个头的位置算出来，放入字典。
    for (int i = 0; i < _listDatas.length; i++) {
      if (i < 1) {
        // 第一个Cell
        _groupOffsetMap.addAll({_listDatas[i].indexLetter: _groupOffset});
        // 保存完了再加_groupOffset偏移
        _groupOffset += 84.5;
      } else if (_listDatas[i].indexLetter == _listDatas[i - 1].indexLetter) {
        // 没有头部，只需要加偏移量
        _groupOffset += 54.5;
      } else {
        // 这部分是有头部的Cell
        _groupOffsetMap.addAll({_listDatas[i].indexLetter: _groupOffset});
        _groupOffset += 84.5;
      }
    }
  }

  final List _headerData = [
    Friends(imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png', name: '新的朋友'),
    Friends(imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png', name: '群聊'),
    Friends(imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png', name: '标签'),
    Friends(imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png', name: '公众号'),
  ];

  Widget _itemForRow(BuildContext context, int index) {
    // 显示头部 系统图标的cell
    if (index < _headerData.length) {
      // print(index);
      return _FriendCell(
        imageUrl: _headerData[index].imageUrl,
        name: _headerData[index].name,
      );
    }

    // 显示剩下的cell
    // 如果当前和上一个cell的IndexLetter一样， 就不显示
    bool _hideIndexLetter = (index - 4 > 0 &&
        (_listDatas[index - 4].indexLetter ==
            _listDatas[index - 5].indexLetter));
    return _FriendCell(
      imageUrl: _listDatas[index - 4].imageUrl,
      name: _listDatas[index - 4].name,
      groupTitle: _hideIndexLetter ? "" : _listDatas[index - 4].indexLetter,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: WeChatThemeColor,
        title: const Text('通讯录'),
        actions: <Widget>[
          GestureDetector(
            child: Container(
              margin: const EdgeInsets.only(right: 10),
              child: const Image(
                image: AssetImage('images/icon_friends_add.png'),
                width: 25,
              ),
            ),
            onTap: () {},
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          ListView.builder(
            controller: _scrollController,
            itemCount: _listDatas.length + _headerData.length,
            itemBuilder: _itemForRow,
          ), // 列表
          IndexBar(
            indexBarCallBack: (String str) {
              if (kDebugMode) {
                print('我收到了$str');
              }

              if (_groupOffsetMap[str] != null) {
                _scrollController.animateTo(_groupOffsetMap[str],
                    duration: const Duration(microseconds: 1),
                    curve: Curves.easeIn);
              }
            },
            bubbleImage: const Image(
              ///< 后期转进来，本地使用
              image: AssetImage('images/气泡.png', package: 'chat_index_bar'),
              width: 60,
            ),
          ), // 悬浮检索控件
        ],
      ),
    );
  }
}