chat_index_bar

Description:

chat index bar

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
copied to clipboard
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 Icon(Icons.add, size: 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: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTxO8mUQcWnFsN2aEnvdSKNyJ9Bx61N-KxrA&usqp=CAU'),
),
), // 悬浮检索控件
],
),
);
}
}
copied to clipboard