flutter 通讯录

原创

已于 2022-05-15 23:28:11 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

于 2022-05-15 18:29:21 首次发布

这篇博客详细介绍了如何使用Flutter构建一个具有滑动交互的通讯录导航栏。内容包括页面布局、数据处理、滑动监听以及导航栏手势操作。通过创建模拟数据和监听ScrollView滚动，实现了导航栏与列表的联动效果，当滑动时，导航栏位置会根据列表内容动态调整。此外，还讨论了如何处理没有完全占满屏幕的列表情况。

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;
  // 最后占满屏幕的