具體實(shí)現(xiàn)效果：

呵呵.gif

使用的插件：

//獲取漢字拼音
lpinyin: ^2.0.3

主要注意點(diǎn)：
1幼驶、在從接口獲取好友列表后对嚼，需要保存每個(gè)好友名字的拼音首字母

單獨(dú)寫了一個(gè)對(duì)象用來保存每個(gè)好友名字的拼音首字母：

class FriendVo {
  V2TimFriendInfo info;
//名字拼音首字母
  String pin;
  FriendVo({
    this.info,
    this.pin,
  });
}

從接口獲取數(shù)據(jù)源之后的處理

 List<FriendVo> _friendList = [];
//_resultList是接口返回的列表  _friendList為最終的好友列表數(shù)據(jù)源
_resultList.forEach((element) {
        String now = '#';
        String nowPin = PinyinHelper.getFirstWordPinyin(_getShowName(element));
        if (nowPin.length > 0) {
          now = indexList.contains(nowPin.substring(0, 1).toUpperCase())
              ? nowPin.substring(0, 1)
              : '#';
        }
        FriendVo vo = FriendVo(info: element,pin: now.toUpperCase());
        _friendList.add(vo);
      });

//處理好的數(shù)據(jù)源按照首字母進(jìn)行重新排序
_friendList.sort((FriendVo a, FriendVo b) {
        if (a.pin == '#'){
          return 1;
        }
        if (b.pin == '#'){
          return 0;
        }
        return a.pin.compareTo(b.pin);
      });

默認(rèn)創(chuàng)建多個(gè)GlobalKey對(duì)象，用來獲取每個(gè)item距離頂部的距離

_keyList = List.generate(_friendList.length, (index) => GlobalKey());

UI數(shù)據(jù)源處理

List<Widget> itemList = [];
//頂部菜單
if (_menuList.length > 0){
      itemList.addAll(_menuList.map((e){
        int index = _menuList.indexOf(e);
        return MenuItem(
          menuVo: e,
          isHiddenLine: index == _menuList.length - 1,
          onSelect: (int value){
            if (value == 1){
              Navigator.push(context, MaterialPageRoute(builder: (context){
                return GroupListPage();
              }));
            }
          },
        );
      }).toList()
      );
    }
itemList.addAll(_friendList.map((e) {
      int index = _friendList.indexOf(e);
     //此處判斷是都顯示字母分組刑桑，判斷邏輯為棚愤，每個(gè)item只需跟上一個(gè)item的首字母對(duì)比，如果相同就不顯示毛甲，否則顯示
      FriendVo vo = e;
      bool isShow = true;
      if (nextVo != null){
        if (vo.pin == nextVo.pin) {
          isShow = false;
        }
      }
      nextVo = vo;
      return FriendItem(
        key: _keyList[index],
        vo: vo,
        isShowPin: isShow,
        isHiddenLine: index == _friendList.length - 1,
      );
    }).toList());

2、由于需要做到左邊好友列表跟右邊字母列表聯(lián)動(dòng)滾動(dòng)具被，所以需要獲取item的位置玻募。整個(gè)頁面刷新完成即可通過key獲取每個(gè)item距離頂部的距離，然后保存

//保存的當(dāng)前數(shù)據(jù)源包含的字母（不重復(fù)）
List<String> _filterList = [];
//保存每個(gè)顯示字母的item距離頂部的距離
List<double> _locList = [];

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        _subInitState();
      });

 _subInitState() {
    FriendVo _nextVo;
    for (int i = 0; i < _friendList.length; i++) {
      FriendVo vo = _friendList[i];
      bool isShow = true;
      String now = vo.pin;
      if (_nextVo != null){
        String back = _nextVo.pin;
        if (back == now) {
          isShow = false;
        }
      }
      _nextVo = vo;
      if (isShow) {
        var globalKey = _keyList[i];
        var offsetY = getY(globalKey.currentContext)-_top;
        print('now:${now}');
        print('offsetY:${offsetY}');
        if (!_filterList.contains(vo.pin)){
          _filterList.add(vo.pin);
          _locList.add(offsetY);
        }
      }
    }
    _indexKey.currentState.updateIndex(_filterList);
  }

3一姿、選中字母列表某個(gè)item

onVerticalDragUpdate: (DragUpdateDetails details) {
        print('onVerticalDragUpdate');
        print('globalPosition:${details.globalPosition}');
        _selectIndex = getIdex(context, details.globalPosition);
        double _bubbleY = details.globalPosition.dy;
        bool _bubbleHidden = false;
        if (widget.onSelect != null) {
          widget.onSelect(
              _itemList[_selectIndex < 0
                  ? 0
                  : (_selectIndex > (_itemList.length - 1)
                      ? _itemList.length - 1
                      : _selectIndex)],
              _bubbleY,
              _bubbleHidden);
        }
        setState(() {});
      },
      //按住屏幕移動(dòng)手指實(shí)時(shí)更新觸摸的位置坐標(biāo)
      onVerticalDragDown: (DragDownDetails details) {
        print('onVerticalDragDown');
        _selectIndex = getIdex(context, details.globalPosition);
        double _bubbleY = details.globalPosition.dy;
        bool _bubbleHidden = false;
        if (widget.onSelect != null) {
          widget.onSelect(
              _itemList[_selectIndex < 0
                  ? 0
                  : (_selectIndex > (_itemList.length - 1)
                      ? _itemList.length - 1
                      : _selectIndex)],
              _bubbleY,
              _bubbleHidden);
        }
        print('現(xiàn)在點(diǎn)擊的位置是${details.globalPosition}');
        setState(() {});
      },
      //觸摸開始
      onVerticalDragEnd: (DragEndDetails details) {
        print('onVerticalDragEnd');
        double _bubbleY = 0;
        bool _bubbleHidden = true;
        if (widget.onSelect != null) {
          widget.onSelect(
              _itemList[_selectIndex < 0
                  ? 0
                  : (_selectIndex > (_itemList.length - 1)
                      ? _itemList.length - 1
                      : _selectIndex)],
              _bubbleY,
              _bubbleHidden);
        } //觸摸結(jié)束
        setState(() {});
      },
      onTapDown: (TapDownDetails details) {
        print('onTapDown');
      },
      onTapUp: (TapUpDetails details) {
        print('onTapUp');
        double _bubbleY = 0;
        bool _bubbleHidden = true;
        if (widget.onSelect != null) {
          widget.onSelect(
              _itemList[_selectIndex < 0
                  ? 0
                  : (_selectIndex > (_itemList.length - 1)
                      ? _itemList.length - 1
                      : _selectIndex)],
              _bubbleY,
              _bubbleHidden);
        } //觸摸結(jié)束
        setState(() {});
      },

4七咧、選中字母列表某個(gè)item的回調(diào)：

int index = _filterList.indexWhere((element) => element == value);
                  if (index > -1){
                    double max =  _scrollController.position.maxScrollExtent;
                    double offset = _locList[index];
                    if (offset > max){
                      _scrollController.jumpTo(max);
                    }else{
                      _scrollController.jumpTo(offset);
                    }
                  }

5尘喝、整體頁面結(jié)構(gòu)

@override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Stack(
      children: [
        Positioned(
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            child: SingleChildScrollView(
              controller: _scrollController,
              child: Column(
                children: _getItemList(),
              ),
            )
        ),
        Positioned(
            top: height/8,
            height: height/2,
            right: 0,
            child: IndexItem(
              key: _indexKey,
              onSelect: (String value,double offset,bool type) {
              
                if (type == false){
                  int index = _filterList.indexWhere((element) => element == value);
                  if (index > -1){
                    double max =  _scrollController.position.maxScrollExtent;
                    double offset = _locList[index];
                    if (offset > max){
                      _scrollController.jumpTo(max);
                    }else{
                      _scrollController.jumpTo(offset);
                    }
                  }
                }
              //懸浮氣泡
                _bubbleKey.currentState.updateLoc(value,offset,type);
              },
            )),
        Bubble(
          key: _bubbleKey,
        )
      ],
    );
  }

注意：此處一定要用SingleChildScrollView剂娄，因?yàn)長istView會(huì)重新創(chuàng)建、布局惶洲、繪制可見區(qū)域內(nèi)的item,一般會(huì)多繪制可見區(qū)域以外2-4個(gè)item衬横，所以不在屏幕的item通過key獲取的位置是0裹粤。