一、前言
前面几篇文章中的控件基本上难度系数接近0,甚至有凑控件数量的嫌疑,这次必须来一个强悍的控件,本控件难度系数在所有控件中排前五,代码量也不少,头文件都550行,实现文件1600行,为什么这么多呢,其实本控件是由好多个子控件组成的,字母高亮背景类、中间字母分隔类、右侧字母导航类、通讯录按钮类、自定义滚动条类,我在写比较复杂的控件的时候,一般都会逐个功能拆分,然后思考是否该功能可以做成独立的类,这样管理起来比较方便,也方便查看代码。
最开始拿到这个控件需求的时候,也觉得不会简单,要求用纯QWidget实现,qml实现滑动等各种效果很方便,天生的优势,而QWidget就需要自己来实现了,需求主要是要求五点,能够批量和单个添加联系人信息(头像+姓名+标识)、能够滑动列表悬浮滚动条、能够自动按照字母分类、提供字母导航栏直接快速定位、单击联系人发出对应联系人的详细信息。
二、实现的功能
* 1:可设置信息集合(图标+姓名+类型+电话)以及添加单个联系人
* 2:可设置背景图片+背景颜色
* 3:可设置右侧导航字母的列表+默认颜色+高亮颜色
* 4:可设置联系人按钮姓名颜色+姓名字体
* 5:可设置联系人按钮类型颜色+姓名字体
* 6:可设置联系人按钮选中背景颜色
* 7:可设置字母导航的风格(背景颜色+线条)
* 8:可设置字母导航的颜色+字体大小
* 9:可设置各种边距+联系人列数+元素间隔等
* 10:支持悬浮滚动条,可设置悬停时间
* 11:可设置悬浮滚动条的正常颜色+高亮颜色
* 12:支持滑动,可设置滑动的步长速度
* 13:支持单击右侧字母导航定位+文本突出显示
* 14:单击发出当前联系人的姓名+类型+电话等信息
* 15:根据汉字字母排序从小到大排列联系人,自带汉字转拼音功能
三、效果图
五、核心代码
void TelWidget::setInfo(const QStringList &names, const QStringList &types, const QStringList &tels, const QList &pixmaps){ this->names = names.join("|"); this->types = types.join("|"); this->tels = tels.join("|"); this->pixmaps = pixmaps; if (names.isEmpty() || types.isEmpty() || tels.isEmpty()) { return; } //行标识符文字集合 QList texts; texts << "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" << "#"; QList listName = names; QList listType = types; QList listTel = tels; QList listPix = pixmaps; int countName = listName.count(); int countType = listType.count(); int countTel = listTel.count(); int countPix = listPix.count(); if (countName == countType && countType == countTel && countTel == countPix) { //取出对应汉字首字母,先对所有姓名按照字母从小到大排序 QList poundInfos, telInfos; for (int i = 0; i < countName; i++) { TelInfo telInfo; telInfo.name = listName.at(i); telInfo.type = listType.at(i); telInfo.tel = listTel.at(i); telInfo.pixmap = listPix.at(i); //如果首字母未找到字母则归结到 # 分类中 QString letter = ZhToPY::Instance()->zhToZM(listName.at(i).at(0)); if (texts.contains(letter)) { telInfo.letter = ZhToPY::Instance()->zhToJP(listName.at(i)); telInfos << telInfo; } else { telInfo.letter = "#"; poundInfos << telInfo; } } //对信息集合进行升序排序 qSort(telInfos.begin(), telInfos.end()); //对最后的 # 类别追加到末尾 foreach (TelInfo telInfo, poundInfos) { telInfos << telInfo; } //先要清空所有元素 qDeleteAll(items); qDeleteAll(banners); items.clear(); banners.clear(); //生成电话本按钮 for (int i = 0; i < countName; i++) { TelInfo telInfo = telInfos.at(i); TelButton *btn = new TelButton; connect(btn, SIGNAL(btnPressed()), this, SLOT(btnPressed())); connect(btn, SIGNAL(btnRelease()), this, SLOT(btnRelease())); //设置字母属性 QString letter = telInfo.letter.at(0); btn->setProperty("letter