chenxi_chat_index_bar 0.0.3

A new Flutter project.

example/main.dart

import 'package:flutter/material.dart';
import 'package:chenxi_chat_index_bar/chenxi_chat_index_bar.dart' as chenxi;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const FriendsPage(),
    );
  }
}

class _FriendCell extends StatelessWidget {
  _FriendCell({this.imageUrl = '', this.name = '', this.groupTitle = '', this.imageAssets = ''});
  final String imageUrl;
  final String name;
  final String groupTitle;
  final String imageAssets;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        groupTitle.length > 0 ? Container(
          height: 30,
          color: chenxi.CahtThemColor,
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.only(left: 15),
          child: groupTitle.length > 0 ? Text(groupTitle, style: TextStyle(color: Colors.grey),) : null,
        ) : Container(), //组头
        Container(
          color: Colors.white,
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.all(10),
                width: 34,
                height: 34,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6.0),
                    image: imageUrl.length > 0
                        ? DecorationImage(
                        image: NetworkImage(imageUrl)
                    )
                        : DecorationImage(
                      image: AssetImage(imageAssets, package: 'chenxi_chat_index_bar'),
                    )
                ),
              ),//图片
              Container(
                // color: Colors.red,
                width: chenxi.screenWidth(context) - 54,
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      height: 54,
                      child: Text(
                        name,
                        style: TextStyle(fontSize: 18),
                      ),
                    ),
                    Container(
                      height: 0.5,
                      color: chenxi.CahtThemColor,
                    ), //下划线
                  ],
                ),
              ),//昵称
            ],
          ),
        ), //cell的内容
      ],
    );
  }
}

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

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

class _FriendsPageState extends State<FriendsPage> {
  final double _cellHeight = 54.5;
  final double _groupHeight = 30.0;
  final Map _groupOffsetMap = {

  };

  final List<Friends> _headerData = [
    Friends(name: '新的朋友', imageAssets: 'images/新的朋友.png'),
    Friends(name: '群聊', imageAssets: 'images/群聊.png'),
    Friends(name: '标签', imageAssets: 'images/标签.png'),
    Friends(name: '公众号', imageAssets: 'images/公众号.png'),
  ];

  final List<Friends> _listDatas = [];
  ScrollController? _scrollController;
  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    //创建数据
    _listDatas..addAll(datas)..addAll(datas);
    //按首字母顺序排序
    _listDatas.sort((Friends a, Friends b){
      return a.indexLetter.compareTo(b.indexLetter);
    });
    var _groupOffset = _cellHeight * _headerData.length;
    //循环计算，将每个组头的位置放入到 _groupOffsetMap 字典中
    for (int i = 0; i < _listDatas.length; i++) {
      if (i < 1) {
        //第一个 cell，一定有头
        _groupOffsetMap.addAll({_listDatas[i].indexLetter : _groupOffset});
        //保存完了再加_groupOffset
        _groupOffset += _cellHeight + _groupHeight;
      } else if (_listDatas[i].indexLetter == _listDatas[i - 1]) {
        _groupOffset += _cellHeight;
      } else {
        _groupOffsetMap.addAll({_listDatas[i].indexLetter : _groupOffset});
        //保存完了再加_groupOffset
        _groupOffset += _cellHeight + _groupHeight;
      }

      print(_groupOffsetMap);
    }
  }

  Widget _itemForRow(BuildContext context, int index) {
    if (index < _headerData.length) {
      return _FriendCell(imageAssets: _headerData[index].imageAssets, name: _headerData[index].name);
    }
    index = index - _headerData.length;
    // 判断是否显示组名称
    return _FriendCell(
        imageUrl: _listDatas[index].imageUrl,
        name: _listDatas[index].name,
        groupTitle: (index > 0 && _listDatas[index].indexLetter == _listDatas[index -1].indexLetter) ? '' : _listDatas[index].indexLetter);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('通讯录页面'),
          backgroundColor: chenxi.CahtThemColor,
        ),
        body: Stack(
          children: [
            Container(
                color: chenxi.CahtThemColor,
                child: ListView.builder(itemBuilder: _itemForRow, controller: _scrollController, itemCount: _headerData.length + _listDatas.length,)
            ),
            chenxi.IndexBar(
                image: const AssetImage('images/bubble.png', package: 'chenxi_chat_index_bar'),
                indexBarCallBack: (String str) {
                  if(_groupOffsetMap[str] != null) {
                    print(str);
                    _scrollController!.animateTo(_groupOffsetMap[str], duration: Duration(microseconds: 100), curve: Curves.elasticIn);
                  }
                }
            ),//悬浮的索引条
          ],
        )
    );
  }
}

class Friends {
  final String imageUrl;
  final String name;
  final String indexLetter;
  final String imageAssets;
  Friends({this.imageUrl = '', this.name = '', this.indexLetter = '', this.imageAssets = ''});
}

List <Friends>datas = [
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/11.jpg',
      name: 'Lina',
      indexLetter: 'L'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
      name: '菲儿',
      indexLetter: 'F'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/16.jpg',
      name: '安莉',
      indexLetter: 'A'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/31.jpg',
      name: '阿贵',
      indexLetter: 'A'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/22.jpg',
      name: '贝拉',
      indexLetter: 'B'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/37.jpg',
      name: 'Lina',
      indexLetter: 'L'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/18.jpg',
      name: 'Nancy',
      indexLetter: 'N'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/47.jpg',
      name: '扣扣',
      indexLetter: 'K'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/3.jpg',
      name: 'Jack',
      indexLetter: 'J'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/5.jpg',
      name: 'Emma',
      indexLetter: 'E'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/24.jpg',
      name: 'Abby',
      indexLetter: 'A'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/15.jpg',
      name: 'Betty',
      indexLetter: 'B'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/13.jpg',
      name: 'Tony',
      indexLetter: 'T'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/26.jpg',
      name: 'Jerry',
      indexLetter: 'J'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/36.jpg',
      name: 'Colin',
      indexLetter: 'C'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/12.jpg',
      name: 'Haha',
      indexLetter: 'H'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/11.jpg',
      name: 'Ketty',
      indexLetter: 'K'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/13.jpg',
      name: 'Lina',
      indexLetter: 'L'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/23.jpg',
      name: 'Lina',
      indexLetter: 'L'
  ),
];