「这是我参与11月更文应战的第14天，活动概况查看：2021最终一次更文应战」

【Flutter】学习养成记，【程序员必备技术】

【Flutter】微信项目实战！

1. 写在前面

在上篇文章中现已对微信通讯录界面进行了列表部分，包含组头的设置、怎么显现躲藏兼并组的代码完成，那么今天就继续来写微信实战项目的通讯录界面最复杂的索引条部分！

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

2. 页面布局

首要索引条是在列表之上的，也便是布局来说是悬浮的，那么咱们能够运用Stack 来布局，然后在封装一个索引条IndexBar。

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

3. 索引条封装

索引条是需求改动状况的，索引咱们运用StatefulWidget，便利后续的状况的改动，以依据状况的改动来改动列表的显现。索引是由两部分组成的：

  • 指示器：便是拖动索引条，前面的放大器部分，里边显现对应的索引字母。
  • 索引条：显现分组的名称字母，这个要依据鼠标的移动，来改动指示器的方位和显现的文字。

大致的代码布局如下所示：

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

索引条是悬浮的，所以需求定位它的方位，这儿运用Positioned来定位。这儿设置索引条的高度是屏幕高的一半，间隔屏幕的顶部间隔是屏幕高度的八分之一，宽度为 120。

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

3.1 指示器

指示器这儿和索引条是一体的，仅仅改动一下方位就能够了。

//指示器
          Container(
            alignment: Alignment(0,_indicatorY),
            width: 100,
            // color: Colors.red,
            child: _indicatorHidden?null:Stack(
              alignment: const Alignment(-0.2,0),
              children: [
               const Image(image: AssetImage("images/气泡.png"),width: 60,),
                Text(_indicatorText,style: const TextStyle(fontSize: 18,color: Colors.white),)
              ],
            ),
          ),

这儿指示器外面是用Container包裹，里边是运用了Stack来包裹一个放大镜的图片，再把需求显现的Text置顶，以此来达到咱们需求的作用。 字母索引咱们这儿是运用一个 List，遍历本地写的一个字母 LIst 来参与字母的 widget，具体代码如下所示：

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

3.2 索引条

索引条是需求响应手势的，所以用GestureDetector来包裹起来。

针对鼠标的拖动时、离开时的回调办法来处理不同的状况。

咱们要定位索引条字母的方位，依据鼠标移动的方位来改动，指示器的移动方位，这就得拿到坐标才能够。系统还真提供了这样一个办法，能够通过RenderBox来找到当前的方位。获取的代码如下所示：

int getIndexItem(BuildContext context,Offset globalPosition){
  //拿到当前盒子
  RenderBox box = context.findRenderObject() as RenderBox;
  //拿到y值，当前方位到部件原点(部件左上角)的间隔(x,y)
  var y = box.globalToLocal(globalPosition).dy;
  //算出字符高度
  var itemHeight = screenHeight(context)/2/INDEX_WORDS.length;
  int index = y ~/itemHeight.clamp(0, INDEX_WORDS.length-1);//~取整,设置取整范围clamp
  print("${INDEX_WORDS[index]}");
  return index;
}

这儿封装了一个办法，来获取每个字母的方位，然后在数据移动的相关回调办法里边直接调用就能够了。具体的处理逻辑如下图所示：

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

那么现在咱们来看看，鼠标移动是否能够达到改动指示器的作用呢？

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

从上面的作用图来看，现已基本满足了咱们的需求，现在还有一个功能需求完成，便是点击索引对应的字母，让列表翻滚起来，而且翻滚的作用是，我点击那个字母，所在组就置顶。那么现在就去完成一下吧！

3.3 列表置顶

那么完成的思路，便是咱们得知道整个列表对应的字母的偏移量，依据对应字母的偏移量来对列表进行偏移就能够了。那么该如何去核算这个偏移量呢？核算的时机是在什么时分呢？

咱们肯定不能动态的去核算吧，不能你点击一次就核算一下，应该是界面进来的时分便是现已核算好了的。

final Map _groupOffsetMap = {
    INDEX_WORDS[0]:0.0,
    INDEX_WORDS[0]:0.0,
  };

咱们这儿运用一个字典也便是 Map来寄存对应字母的偏移量，在处理组头的时分就顺便一同核算，存在map 里边，这样我点击的是那个字母或许鼠标翻滚到对应的字母，就改动偏移量就 OK 了！

//索引条
          IndexBar(indexBarCallBack:(String str){
            if(_groupOffsetMap[str]!=null){
              _scrollController.animateTo(_groupOffsetMap[str],
                  duration: const Duration(microseconds: 100),
                  curve: Curves.easeIn);
            }
          }
          ),

这儿IndexBar的回调办法indexBarCallBack，在其回调办法里边对字典里边的对应字母值进行判断，然后控制器去控制对应的偏移量。完成作用如下：

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

以上便是本次博客的全部内容，欢迎我们留言沟通。更具体的代码请移步这儿GitHub项目地址

4. 写在后面

  • 【根底语法合集】

【Flutter】Dart中的var、final 和 const基本运用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的办法与箭头函数

【Flutter】Dart的办法中的可选参数、办法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和目标

【Flutter】Dart中的结构函数

【Flutter】Dart的工厂结构办法&单例目标&初始化列表

【Flutter】Dart的类办法和目标操作符

【Flutter】Dart中的承继

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗？

  • [根底组件合集]

【Flutter】根底组件【01】Text

【Flutter】根底组件【02】Container

【Flutter】根底组件【03】Scaffold

【Flutter】根底组件【04】Row/Column

【Flutter】根底组件【05】Image

【Flutter】根底组件【06】Icon

【Flutter】根底组件【07】Appbar

【Flutter】根底组件【08】BottomNavigationBar

【Flutter】根底组件【09】Button

  • [项目实战合集]

【Flutter】微信项目实战【01】基本结构建立

【Flutter】微信项目实战【02】我的界面建立(上)

【Flutter】微信项目实战【03】我的界面建立(下)

【Flutter】微信项目实战【04】发现界面建立

【Flutter】微信项目实战【05】 通讯录界面建立(上)

【Flutter】微信项目实战【06】 通讯录界面建立(中)

GitHub项目地址

重视我，更多内容持续输出

  • CSDN
  • 简书

喜爱就点个赞吧

觉得有收获的，能够来一波 保藏+重视，以免你下次找不到我

欢迎我们留言沟通，批评指正，转发请注明出处，谢谢支撑！