flutter 通讯录

flutter 通讯录

工程仓库

国内的话需要梯子打开

https://www.dropbox.com/sh/u9s38957amql3yc/AABc3ncZd8L2gMtMAy83FKL0a?dl=0

如果不能下载的话请私信我

样式长这样

需求分析：

1、滑动会影响到右边的导航栏。

2、右边的导航栏具有点击和拖动的手势，位置点到的位置会影响到左边的list。

3、当list的导航栏的索引没有对应的list会选择最近的list。

4、当最后的list不占满的话，选倒数第二个list，若倒数第二个也不占满，以此类推上一个list。

需求没有说做停留索引，所以我没做了。

整体做法

页面

页面的话整体是个stack。

占整个的是一个singleChildScrollview,分两部分，一部分是头Container，下面那部分是ListView嵌套ListView：目的是为了数据好处理。

嵌套一个导航栏：整体是Row左边是指示器，位置是根据右边的选择来做判定，右边是一个嵌套了GestureDetector的ListView。GestureDetector具有点击、滑动、取消点击的回调。

数据

创建一个长度为27的数组来存储高度（# + A~Z)。数据可能 B没有，那该位置就是上一个A的位置。当滑动的时候，根据offset来判断当前的位置indexLocation为右边的导航栏显示更新。

核心代码

整体的scrollview + 模拟数据

  // 存储导航列表的高度位置瞄点
  List<double> scrollHeightList = [];
  // item高度
  double itemHeight = 60;
  // 导航item高度
  double sessionHeight = 38.5;
  // 当前选择item的位置
  int indexLocation = -1;
  // 最后占满屏幕的高度
  double lastHeight = 0;
  // 最后占满屏幕的位置
  int lastIndex = 0;
  // 标签页高度
  double firstItemHeight = 0;
  List<TeacherChooseList> teacherList = [];
  // 数据选择的字典
  Map chooseIndex = {'first': -1, 'second': -1};

在数据的创建时就要把高度给存在scrollHeightList

 void createData() {
    List abcList = ['#','A','B','C','D','E','F'];
    abcList.forEach((element) {
      List<TeacherChooseModel> teacherItem = [];
      for(int i = 0; i < 5; i++) {
        TeacherChooseModel model = TeacherChooseModel('$element $i 中文 yingwen', false, '');
        teacherItem.add(model);
      }
      final TeacherChooseModel model = TeacherChooseModel('$element ddd', false, '一年级1班101');
      teacherItem.add(model);
      final TeacherChooseList chooseList = TeacherChooseList(element, teacherItem);
      teacherList.add(chooseList);
    });
    List<TeacherChooseList> dataList = teacherList;
    double textWidth = '文本文本文本文本文本文本文本文本文本文本'.paintWidthWithTextStyle(
        const TextStyle(
          fontSize: 12
        ));
    double topItemHeight = 0;
    if(textWidth > (MediaQuery.of(widget.context).size.width - 30)) {
      topItemHeight = 33.5;
    }else {
      topItemHeight = 17;
    }
    firstItemHeight = topItemHeight + 52.5;
    double totalHeight = firstItemHeight;
    scrollHeightList.add(totalHeight);
    int wordIndex = 0;
    lastHeight += sessionHeight +
        itemHeight * dataList[dataList.length - 1].teacherItem.length;
    for(int i = 0; i < indexWord.length; i++) {

      for(int j = 1; j < dataList.length; j++) {

        if(dataList[j - 1].index == indexWord[i]) {
          if (j + 1 == (dataList.length)) {
            int dataIndex = j;
            print(MediaQuery.of(widget.context).size.height
                - firstItemHeight
                - MediaQuery.of(widget.context).padding.top
                - 64);
            while (lastHeight < (MediaQuery.of(widget.context).size.height
                - firstItemHeight
                - MediaQuery.of(widget.context).padding.top
                - 64)) {
              if(dataIndex >= 0) {
                lastHeight += sessionHeight +
                    itemHeight * dataList[dataIndex].teacherItem.length;
              }
              dataIndex -= 1;
              if(lastIndex == 0) {
                lastIndex = wordIndex;
              }
            }

          }

            totalHeight += sessionHeight + itemHeight*dataList[j - 1].teacherItem.length;
            break;
          // }
        }

      }
      scrollHeightList.add(totalHeight);
      wordIndex += 1;
    }
  }

scrollview的滑动监听

  void _scrollListener() {
    final double offsetY = _scrollController.offset;

    setState(() {
      for(int i = 0; i < scrollHeightList.length; i ++) {
        if(offsetY < scrollHeightList[i]) {
          indexLocation = i - 1;
          break;
        }else {
          for (int i = 0; i < indexWord.length; i++) {
            if(indexWord[i] == teacherList.last.index) {
              indexLocation = i;
              break;
            }
          }
        }
      }
    });
  }

导航栏

需要传递的数据

List indexWord = ['#','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
class TeacherChooseIndex extends StatefulWidget {
  final void Function(int index) indexBarCallBack;
  double totalHeight;
  int chooseIndex = -1;
  double firstItemHeight;
  TeacherChooseIndex({this.indexBarCallBack, this.totalHeight, this.chooseIndex, this.firstItemHeight});
  @override
  TeacherChooseIndexState createState() => TeacherChooseIndexState();
}

内部的数据

class TeacherChooseIndexState extends State<TeacherChooseIndex> {
  double _totalHeight = 0;
  double _indicatorY = 0.0;
  bool _indicatorHidden = true;
  String _indicatorText = 'A';
  double dragHeight = 0;
  double _firstItemHeight = 0;
  @override
  void initState() {
    super.initState();
    _totalHeight = widget.totalHeight;
    dragHeight = 25*_totalHeight/27;
    _firstItemHeight = widget.firstItemHeight;
  }

滑动手势获取当前的index位置

  int getIndexItem(BuildContext context,Offset globalPosition){
    //拿到当前盒子
    final RenderBox box = context.findRenderObject() as RenderBox;
    //拿到y值，当前位置到部件原点(部件左上角)的距离(x,y)
    var y = box.globalToLocal(globalPosition).dy;
    //算出字符高度
    final itemHeight = dragHeight/27;
    int index = y ~/itemHeight.clamp(0, indexWord.length-1) - 1;//~取整,设置取整范围clamp
    if(index > 26) {
      index = 26;
    }
    if (index < 0) {
      index = 0;
    }
    print('${indexWord[index]}');
    return index;
  }

手势的操作

GestureDetector(
              onVerticalDragDown: (DragDownDetails details){
                final int index = getIndexItem(context, details.globalPosition);
                widget.indexBarCallBack(index);
                setState(() {
                  widget.chooseIndex = index;
                  _indicatorY =  index * dragHeight/27;
                  _indicatorText = indexWord[index];
                  _indicatorHidden = false;//是否隐藏指示器
                });
              },
              onVerticalDragCancel: () {
                setState(() {
                  _indicatorHidden = true; //是否隐藏指示器
                });
              },
              onVerticalDragEnd:(DragEndDetails details){
                setState(() {
                  _indicatorHidden = true;//是否隐藏指示器
                });
              },
              onVerticalDragUpdate: (DragUpdateDetails details){
                final int index = getIndexItem(context, details.globalPosition);
                widget.indexBarCallBack(index);
                setState(() {
                  widget.chooseIndex = index;
                  _indicatorY =  index * dragHeight/27;
                  _indicatorText = indexWord[index];
                  _indicatorHidden = false;//是否隐藏指示器
                });
              },
              child: Container(
                width:dragHeight/27,
                // color: AppColor.black,
                child: _getListView(context)
              ),
            ),