阅读 6502

Flutter(十八)实战-通讯录索引条

「这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战

简单的通讯录列表页我们已经实现了,今天我们来实现通讯录的索引条;我们都知道通讯录的索引条是悬浮在列表上方的,在屏幕右侧;那么,我们的构建方式就要进行修改;

构建索引条

我们需要使用Stack来构建整个界面,使索引条显示在列表上面:

image.png

显示索引条数据

我们在索引条上显示一下信息:

const INDEX_WORDS = [
  '🔍',
  '☆',
  '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'
];
复制代码

索引条是竖着显示的,那么很明显,需要使用Column进行布局,我们先将Columnchildren对应的Widget数组创建好:

final List<Widget> _indexList = []; // 索引条Widget数组

@override
  void initState() {
    super.initState();
    ......
    // 索引条
    for (int i = 0; i < INDEX_WORDS.length; i++) {
      _indexList.add(Text(INDEX_WORDS[i], style: const TextStyle(fontSize: 12),));
    }
  }
复制代码

这样,我们就讲所有需要显示的Widget放在_indexList中,只需要给Columnchildren赋值为_indexList即可:

image.png

索引条布局优化

目前,所有的索引字母都是在最上面开始显示的,而且各个字母之间的距离过近,此时我们可使用ExpandedText包起来,让他们自适应布局:

// 索引条
for (int i = 0; i < INDEX_WORDS.length; i++) {
  _indexList.add(
      Expanded(
        child: Text(
          INDEX_WORDS[i],
          style: const TextStyle(fontSize: 12),
        ),
      )
  );
}
复制代码

此时,重新渲染界面,效果如下:

image.png

我们改一下索引条的位置如下:

image.png

为了便于操作及扩展,我们将索引条抽取出来,放在IndexBar中,完整代码如下:

image.png

这样我们在Stack中直接使用IndexBar即可,也便于后续扩展功能;

image.png

索引条的状态改变

接下来,修改一下索引条在不同情况下的状态变化:默认透明背景,黑色字体,点击或者在上边滑动时背景变黑,字体变白;

我们定义两个颜色,一个背景色,一个字体颜色:

  Color _bgColor = const Color.fromRGBO(1, 1, 1, 0.0); // 背景色 默认透明
  Color _textColor = Colors.black; // 字体颜色 默认黑色
复制代码

接下来,在手势触发时,修改两个颜色:

image.png

这个时候,我们发现在手势触发时,背景色变了,而字体颜色没有发生改变,这是因为我们字体使用的Text控件的初始化放在了initState方法中,而此方法只有在界面创建时才会调用;setState触发的是build方法,所以我们应该将创建Text的循环过程放在build中进行,最终代码如下:

image.png

效果如下:

需要注意的是,_indexList的定义也要放在build中,否则每一次渲染,列表都会被渲染一次,而数组没有重新创建,会一直往里边增加元素;

确定鼠标所在的索引位置

现在索引条我们已经基本完成了,那么我们如果知道点击的时候,当前是点击的哪一个字母呢?我们注意到手势的事件是否参数的:

DragDownDetails({
  this.globalPosition = Offset.zero,
  Offset? localPosition,
})
复制代码

那么这两个参数都是什么意思呢?我们来打印一下:

image.png

我们通过打印信息可以确定,这两个都是坐标位置:

  • globalPosition:当前点击点在全局的位置;
  • localPosition:当前点击点在当前部件中的位置;

localPosition也是可以通过globalPosition计算得到的:

image.png

接下来我们就可以确定,当前点击的是第几个字符了:

image.png

我么你讲此处的操作封装为方法:

String getIndexString(BuildContext context, Offset localPosition) {
  // 点击的坐标点在当前部件中的y坐标
  double y = localPosition.dy;
  // 算出字符的高度
  var itemHeight = screenHeight(context) / 2 / INDEX_WORDS.length;
  // 计算是第几个字符
  int index = y ~/ itemHeight; // ~/ 意为 取整
  // 当前选中的字符
  String str = INDEX_WORDS[index];
  return str;
}
复制代码

但是此时是有问题的,如果我们滑动的区域超出了索引条的区域就会报错:

image.png

所以,我们的index取值范围是有限制的:

String getIndexString(BuildContext context, Offset localPosition) {
  // 点击的坐标点在当前部件中的y坐标
  double y = localPosition.dy;
  // 算出字符的高度
  var itemHeight = screenHeight(context) / 2 / INDEX_WORDS.length;
  // 计算是第几个字符
  int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length - 1); // ~/ 意为 取整 区域限制在[0, length-1]
  // 当前选中的字符
  String str = INDEX_WORDS[index];
  return str;
}
复制代码

索引条与联系人列表联动

通常我们点击索引条的时候,是需要联系人列表滚动到相应位置的,那么我们就需要IndexBar对外保留一个接口:

// 点击索引字符的回调;
final void Function(String str)? indexBarCallBack;
IndexBar({this.indexBarCallBack});
复制代码

然后在IndexBar触发手势事件时,回调该函数:

image.png

这样,我们就能在使用IndexBar时,在其构造函数中获取点击的字符:

image.png

接下来,如果需要ListView同步滚动的话,需要使用到ListView中的属性controller,我们先定义一个_scrollController的属性,然后在initState中初始化:

image.png

然后将_scrollController赋值给ListViewcontroller属性:

image.png

这样的话,如果我们需要滚动ListView,那么我们只需要拿到_scrollController进行滚动即可;如下:

image.png

点击索引字符之后,让ListView滚动到260像素的位置,总共动画时长为1秒,Curves.easeIn的意思是动画开始和结束时速度快,中间速度慢;效果如下:

现在我们滚动到了一个固定值,那么只要我们能够算出每一个分组的位置,就能实现点击字符,滚动到某一个分组的效果;

计算索引分组的位置

我们如果想要滚动到分组的位置,那么就需要提前把位置信息计算出来,我们创建一个Map用来存放每一个分组与其高度的对应关系:

/*存放分组的字符和其对应的高度*/
final Map _groupOffsetMap = {
  INDEX_WORDS[0]: 0.0,
  INDEX_WORDS[1]: 0.0,
};
复制代码

01两个位置不是字母,可以不用滚动,所以其高度定为0;然后在initState中循环计算每一个分组头的高度:

final double _rowHeight = 51;
final double _groupHeaderHeight = 30;

// 循环计算,将每一个分组头的字符位置计算出来,放入map中
var _groupOffset = _rowHeight * _headerList.length; // 头部四个的高度
for (int i = 0; i < _listDatas.length; i++) {
  if (i < 1) {
    // 第一个一定有头
    _groupOffsetMap.addAll(
        {_listDatas[i].indexLetter: _groupOffset}); // 第一个头部高度为 51 * 4
    // 改变偏移位置
    _groupOffset += _rowHeight + _groupHeaderHeight;
  } else if (_listDatas[i].indexLetter == _listDatas[i - 1].indexLetter) { // 前后两个indexLetter相同的话不用保存;
    // 不存map,只添加偏移
    _groupOffset += _rowHeight;
  } else {
    _groupOffsetMap.addAll({_listDatas[i].indexLetter: _groupOffset});
    // 改变偏移位置
    _groupOffset += _rowHeight + _groupHeaderHeight;
  }
}
复制代码

在滚动时,从Map中取出高度,然后滚动到具体位置:

image.png

运行效果如下:

索引条指示器

如果需要显示索引条的指示器,那么我们就需要修改索引条的布局:

image.png

我们在添加上气泡,然后默认显示一个A,在气泡中居中显示:

image.png

其中,文字在气泡中居中显示是使用了Stackalignment属性,用来调整位置;接下来就是控制气泡显示的位置了,警告我们尝试,气泡上下两端位置的显示区域如下:

我们除了要控制指示器显示的位置,显示的文字还得判断指示器的隐藏和显示状态,我们定义三个变量:

double _indicatorY = 0.0; // 指示器默认Y值
String _indicatorTitle = 'A'; // 指示器文字 默认A
bool _indicatorHidden = true; // 指示器显示与隐藏 默认隐藏
复制代码

我们将之前写的获取选中字符的方法修改一下,返回字符的索引值:

/*获取选中的字符索引*/
int getIndex(BuildContext context, Offset localPosition) {
  // 点击的坐标点在当前部件中的y坐标
  double y = localPosition.dy;
  // 算出字符的高度
  var itemHeight = screenHeight(context) / 2 / INDEX_WORDS.length;
  // 计算是第几个字符
  int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length - 1); // ~/ 意为 取整 clamp限制取值范围在[0, length - 1]
  return index;
}
复制代码

最终指示器代码如下:

image.png

运行效果如下:

至此,通讯录界面效果已完全实现;

文章分类
iOS
文章标签