chat_index_bar 1.0.2 copy "chat_index_bar: ^1.0.2" to clipboard
chat_index_bar: ^1.0.2 copied to clipboard

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.

pub package Language

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,
            ),
          ), // 悬浮检索控件
        ],
      ),
    );
  }
}
1
likes
0
pub points
0%
popularity

Publisher

unverified uploader

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.

Homepage

License

unknown (license)

Dependencies

flutter

More

Packages that depend on chat_index_bar