实现效果

image.png

1 定义通讯录数据结构类Friends

  1. class Friends {
  2.   final String imageUrl;// 通讯录头像的url
  3.   final String name; //通讯录中显示的名字
  4.   final String indexLetter; //在列表中的索引字母
  6.   Friends({this.imageUrl, this.name, this.indexLetter});
  7. }
  9. List<Friends> datas = [
  10.   Friends(
  11.       imageUrl: 'https://randomuser.me/api/portraits/women/27.jpg',
  12.       name: 'Lina',
  13.       indexLetter: 'L'),
  14.   Friends(
  15.       imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
  16.       name: '菲儿',
  17.       indexLetter: 'F'),
  18.   Friends(
  19.       imageUrl: 'https://randomuser.me/api/portraits/women/16.jpg',
  20.       name: '安莉',
  21.       indexLetter: 'A'),
  22.   Friends(
  23.       imageUrl: 'https://randomuser.me/api/portraits/men/31.jpg',
  24.       name: '阿贵',
  25.       indexLetter: 'A'),
  26.   Friends(
  27.       imageUrl: 'https://randomuser.me/api/portraits/women/22.jpg',
  28.       name: '贝拉',
  29.       indexLetter: 'B'),
  30.   Friends(
  31.       imageUrl: 'https://randomuser.me/api/portraits/women/37.jpg',
  32.       name: 'Lina',
  33.       indexLetter: 'L'),
  34.   Friends(
  35.       imageUrl: 'https://randomuser.me/api/portraits/women/18.jpg',
  36.       name: 'Nancy',
  37.       indexLetter: 'N'),
  38.   Friends(
  39.       imageUrl: 'https://randomuser.me/api/portraits/men/47.jpg',
  40.       name: '扣扣',
  41.       indexLetter: 'K'),
  42.   Friends(
  43.       imageUrl: 'https://randomuser.me/api/portraits/men/3.jpg',
  44.       name: 'Jack',
  45.       indexLetter: 'J'),
  46.   Friends(
  47.       imageUrl: 'https://randomuser.me/api/portraits/women/5.jpg',
  48.       name: 'Emma',
  49.       indexLetter: 'E'),
  50.   Friends(
  51.       imageUrl: 'https://randomuser.me/api/portraits/women/24.jpg',
  52.       name: 'Abby',
  53.       indexLetter: 'A'),
  54.   Friends(
  55.       imageUrl: 'https://randomuser.me/api/portraits/men/15.jpg',
  56.       name: 'Betty',
  57.       indexLetter: 'B'),
  58.   Friends(
  59.       imageUrl: 'https://randomuser.me/api/portraits/men/13.jpg',
  60.       name: 'Tony',
  61.       indexLetter: 'T'),
  62.   Friends(
  63.       imageUrl: 'https://randomuser.me/api/portraits/men/26.jpg',
  64.       name: 'Jerry',
  65.       indexLetter: 'J'),
  66.   Friends(
  67.       imageUrl: 'https://randomuser.me/api/portraits/men/36.jpg',
  68.       name: 'Colin',
  69.       indexLetter: 'C'),
  70.   Friends(
  71.       imageUrl: 'https://randomuser.me/api/portraits/women/12.jpg',
  72.       name: 'Haha',
  73.       indexLetter: 'H'),
  74.   Friends(
  75.       imageUrl: 'https://randomuser.me/api/portraits/women/11.jpg',
  76.       name: 'Ketty',
  77.       indexLetter: 'K'),
  78.   Friends(
  79.       imageUrl: 'https://randomuser.me/api/portraits/women/13.jpg',
  80.       name: 'Lina',
  81.       indexLetter: 'L'),
  82.   Friends(
  83.       imageUrl: 'https://randomuser.me/api/portraits/women/23.jpg',
  84.       name: 'Lina',
  85.       indexLetter: 'L'),
  86. ];

2 定义索引条组件IndexBar(索引列表+选择索引项的气泡）

  1. import 'package:flutter/material.dart';
  3. final Color WeChatThemeColor = Color.fromRGBO(220, 220, 220, 1);
  5. //屏幕宽/高
  6. double ScreenWidth(BuildContext context) => MediaQuery.of(context).size.width;
  7. double ScreenHeight(BuildContext context) => MediaQuery.of(context).size.height;
  9. class IndexBar extends StatefulWidget {
  10.   final void Function(String str) indexBarCallBack;
  12.   IndexBar({this.indexBarCallBack});
  14.   @override
  15.   _IndexBarState createState() => _IndexBarState();
  16. }
  18. int getIndex(BuildContext context, Offset globalPosition) {
  19.   //拿到box
  20.   RenderBox box = context.findRenderObject();
  21.   //拿到y值
  22.   double y = box.globalToLocal(globalPosition).dy;
  23.   //算出字符高度
  24.   var itemHeight = ScreenHeight(context) / 2 / INDEX_WORDS.length;
  25.   //算出第几个item,并且给一个取值范围
  26.   int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length - 1);
  28. //  print('现在选中的是${INDEX_WORDS[index]}');
  29.   return index;
  30. }
  32. class _IndexBarState extends State<IndexBar> {
  33.   Color _bkColor = Color.fromRGBO(1, 1, 1, 0.0); //索引条的背景色
  34.   Color _textColor = Colors.black; //索引条中文字的颜色
  35.   double _indicatorY = 0.0; //选择索引的气泡显示位置
  36.   String _indicatorText = 'A'; //选择索引的文字
  37.   bool _indocatorHidden = true; //气泡是否显示
  39.   @override
  40.   Widget build(BuildContext context) {
  42.     //索引条列表项
  43.     List<Widget> words = [];
  44.     for (int i = 0; i < INDEX_WORDS.length; i++) {
  45.       words.add(Expanded(
  46.         child: Text(
  47.           INDEX_WORDS[i],
  48.           style: TextStyle(fontSize: 10, color: _textColor),
  49.         ),
  50.       ));
  51.     }
  52.     return Positioned(
  53.         right: 0.0,
  54.         height: ScreenHeight(context) / 2,
  55.         top: ScreenHeight(context) / 8,
  56.         width: 120,
  57.         child: Row(
  58.           children: <Widget>[
  59.             Container(
  60.               alignment: Alignment(0, _indicatorY),
  61.               width: 100,
  62.               child: _indocatorHidden
  63.                   ? null
  64.                   : Stack(
  65.                 alignment: Alignment(-0.2, 0),
  66.                 children: <Widget>[
  67.                   Image(
  68.                     image: AssetImage('images/气泡.png'),
  69.                     width: 60,
  70.                   ),
  71.                   Text(
  72.                     _indicatorText,
  73.                     style: TextStyle(
  74.                       fontSize: 25,
  75.                       color: Colors.white,
  76.                     ),
  77.                   ),
  78.                 ],
  79.               ), //气泡
  80.             ),
  81.             GestureDetector(
  82.               child: Container(
  83.                 width: 20,
  84.                 color: _bkColor,
  85.                 child: Column(
  86.                   children: words,
  87.                 ),
  88.               ),
  89.               onVerticalDragUpdate: (DragUpdateDetails details) {
  90.                 print("onVerticalDragUpdate");
  91.                 int index = getIndex(context, details.globalPosition);
  93.                 setState(() {
  94.                   _indicatorText = INDEX_WORDS[index];
  95.                   //根据我们索引条的Alignment的Y值进行运算的.从-1.1 到 1.1
  96.                   //整个的Y包含的值是2.2
  97.                   _indicatorY = 2.2 / 28 * index - 1.1;
  98.                   _indocatorHidden = false;
  99.                 });
  100.                 widget.indexBarCallBack(INDEX_WORDS[index]);
  101.               },
  102.               onVerticalDragDown: (DragDownDetails details) {
  104.                 int index = getIndex(context, details.globalPosition);
  105.                 print("onVerticalDragDown:${INDEX_WORDS[index]}");
  106.                 _indicatorText = INDEX_WORDS[index];
  107.                 _indicatorY = 2.2 / 28 * index - 1.1;
  108.                 _indocatorHidden = false;
  109.                 widget.indexBarCallBack(INDEX_WORDS[index]);
  110. //          print('现在点击的位置是${details.globalPosition}');
  111.                 setState(() {
  112.                   _bkColor = Color.fromRGBO(1, 1, 1, 0.5);
  113.                   _textColor = Colors.white;
  114.                 });
  115.               },
  116.               onVerticalDragEnd: (DragEndDetails details) {
  117.                 setState(() {
  118.                   _indocatorHidden = true;
  119.                   _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
  120.                   _textColor = Colors.black;
  121.                 });
  122.               },
  123.             ), //这个是索引条!
  124.           ],
  125.         ));
  126.   }
  127. }
  129. const INDEX_WORDS = [
  130.   '🔍',
  131.   '☆',
  132.   'A',
  133.   'B',
  134.   'C',
  135.   'D',
  136.   'E',
  137.   'F',
  138.   'G',
  139.   'H',
  140.   'I',
  141.   'J',
  142.   'K',
  143.   'L',
  144.   'M',
  145.   'N',
  146.   'O',
  147.   'P',
  148.   'Q',
  149.   'R',
  150.   'S',
  151.   'T',
  152.   'U',
  153.   'V',
  154.   'W',
  155.   'X',
  156.   'Y',
  157.   'Z'
  158. ];

3 通讯录列表+索引检索显示

  1. import 'package:flutter/material.dart';
  2. import '../../const.dart';
  3. import '../discover/discover_child_page.dart';
  5. import 'friends_data.dart';
  6. import 'index_bar.dart';
  8. class FriendsPage extends StatefulWidget {
  9.   @override
  10.   _FriendsPageState createState() => _FriendsPageState();
  11. }
  13. class _FriendsPageState extends State<FriendsPage> {
  14.   //字典里面放item和高度的对应数据
  15.   final Map _groupOffsetMap = {
  16.     INDEX_WORDS[0]: 0.0,
  17.     INDEX_WORDS[1]: 0.0,
  18.   };
  20.   ScrollController _scrollController;
  22.   final List<Friends> _listDatas = [];
  24.   @override
  25.   void initState() {
  26.     super.initState();
  27. //    _listDatas.addAll(datas);
  28. //    _listDatas.addAll(datas);
  29.     //多弄一点数据!
  30.     _listDatas..addAll(datas)..addAll(datas);
  31.     //排序!
  32.     _listDatas.sort((Friends a, Friends b) {
  33.       return a.indexLetter.compareTo(b.indexLetter);
  34.     });
  36.     //计算并记录 分组头在列表的偏移量 供索引条点击时滚动通讯列表用
  37.     var _groupOffset = 54.5 * 4;
  38.     //经过循环计算,将每一个头的位置算出来.放入字典!
  39.     for (int i = 0; i < _listDatas.length; i++) {
  40.       if (i < 1) {
  41.         //第一个Cell
  42.         _groupOffsetMap.addAll({_listDatas[i].indexLetter: _groupOffset});
  43.         //保存完了再加_groupOffset偏移
  44.         _groupOffset += 84.5;
  45.       } else if (_listDatas[i].indexLetter == _listDatas[i - 1].indexLetter) {
  46.         //此时没有头部,只需要加偏移量就好了!
  47.         _groupOffset += 54.5;
  48.       } else {
  49.         //这部分就是有头部的Cell了!
  50.         _groupOffsetMap.addAll({_listDatas[i].indexLetter: _groupOffset});
  51.         _groupOffset += 84.5;
  52.       }
  53.     }
  55.     _scrollController = ScrollController();
  56.   }
  58.   final List<Friends> _headerData = [
  59.     Friends(imageUrl: 'images/新的朋友.png', name: '新的朋友'),
  60.     Friends(imageUrl: 'images/群聊.png', name: '群聊'),
  61.     Friends(imageUrl: 'images/标签.png', name: '标签'),
  62.     Friends(imageUrl: 'images/公众号.png', name: '公众号'),
  63.   ];
  65.   //每个通讯录行
  66.   Widget _itemForRow(BuildContext context, int index) {
  67.     //系统图标的Cell
  68.     if (index < _headerData.length) {
  69.       return _FriendCell(
  70.         imageAssets: _headerData[index].imageUrl,
  71.         name: _headerData[index].name,
  72.       );
  73.     }
  74.     //显示剩下的Cell
  75.     //如果当前和上一个Cell的IndexLetter一样,就不显示!
  76.     bool _hideIndexLetter = (index - 4 > 0 &&
  77.         _listDatas[index - 4].indexLetter == _listDatas[index - 5].indexLetter);
  78.     return _FriendCell(
  79.       imageUrl: _listDatas[index - 4].imageUrl,
  80.       name: _listDatas[index - 4].name,
  81.       groupTitle: _hideIndexLetter ? null : _listDatas[index - 4].indexLetter,
  82.     );
  84.   }
  86.   @override
  87.   Widget build(BuildContext context) {
  88.     return Scaffold(
  89.       appBar: AppBar(
  90.         backgroundColor: WeChatThemeColor,
  91.         title: Text('通讯录'),
  92.         actions: <Widget>[
  93.           GestureDetector(
  94.             child: Container(
  95.               margin: EdgeInsets.only(right: 10),
  96.               child: Image(
  97.                 image: AssetImage('images/icon_friends_add.png'),
  98.                 width: 25,
  99.               ),
  100.             ),
  101.             onTap: () {
  102.               // Navigator.of(context).push(MaterialPageRoute(
  103.               //     builder: (BuildContext context) => DiscoverChildPage(
  104.               //       title: '添加朋友',
  105.               //     )));
  106.             },
  107.           )
  108.         ],
  109.       ),
  110.       body: Stack(
  111.         children: <Widget>[
  112.           Container(
  113.               color: WeChatThemeColor,
  114.               child: ListView.builder(
  115.                 controller: _scrollController,
  116.                 itemCount: _listDatas.length + _headerData.length,
  117.                 itemBuilder: _itemForRow,
  118.               )), //列表
  119.           IndexBar(
  120.             indexBarCallBack: (String str) {
  121.               print("map:$_groupOffsetMap\n");
  122.               print("scroll: ${_groupOffsetMap[str]}");
  123.               if (_groupOffsetMap[str] != null) {
  124.                 _scrollController.animateTo(_groupOffsetMap[str],
  125.                     duration: Duration(milliseconds: 1), curve: Curves.easeIn);
  126.               }
  127.             },
  128.           ), //悬浮检索控件
  129.         ],
  130.       ),
  131.     );
  132.   }
  133. }
  135. class _FriendCell extends StatelessWidget {
  136.   final String imageUrl;
  137.   final String name;
  138.   final String groupTitle;
  139.   final String imageAssets;
  141.   const _FriendCell(
  142.       {this.imageUrl, this.name, this.groupTitle, this.imageAssets});
  144.   @override
  145.   Widget build(BuildContext context) {
  146.     return Column(
  147.       children: <Widget>[
  148.         Container(
  149.           alignment: Alignment.centerLeft,
  150.           padding: EdgeInsets.only(left: 10),
  151.           height: groupTitle != null ? 30 : 0,
  152.           color: Color.fromRGBO(1, 1, 1, 0.0),
  153.           child: groupTitle != null
  154.               ? Text(
  155.             groupTitle,
  156.             style: TextStyle(color: Colors.grey),
  157.           )
  158.               : null,
  159.         ), //cell的头
  160.         Container(
  161.           color: Colors.white,
  162.           child: Row(
  163.             children: <Widget>[
  164.               Container(
  165.                 margin: EdgeInsets.all(10),
  166.                 width: 34,
  167.                 height: 34,
  168.                 decoration: BoxDecoration(
  169.                     borderRadius: BorderRadius.circular(6.0),
  170.                     image: DecorationImage(
  171.                       image: imageUrl != null
  172.                           ? NetworkImage(imageUrl)
  173.                           : AssetImage(imageAssets),
  174.                     )),
  175.               ), //图片
  176.               Container(
  177.                 child: Text(
  178.                   name,
  179.                   style: TextStyle(fontSize: 17),
  180.                 ),
  181.               ), //昵称
  182.             ],
  183.           ),
  184.         ), //Cell内容
  185.         Container(
  186.           height: 0.5,
  187.           color: WeChatThemeColor,
  188.           child: Row(
  189.             children: <Widget>[
  190.               Container(
  191.                 width: 50,
  192.                 color: Colors.white,
  193.               )
  194.             ],
  195.           ),
  196.         ) //分割线
  197.       ],
  198.     );
  199.   }
  200. }