Qt编写自定义控件55-手机通讯录
作者:互联网
一、前言
前面几篇文章中的控件基本上难度系数接近0,甚至有凑控件数量的嫌疑,这次必须来一个强悍的控件,本控件难度系数在所有控件中排前五,代码量也不少,头文件都550行,实现文件1600行,为什么这么多呢,其实本控件是由好多个子控件组成的,字母高亮背景类、中间字母分隔类、右侧字母导航类、通讯录按钮类、自定义滚动条类,我在写比较复杂的控件的时候,一般都会逐个功能拆分,然后思考是否该功能可以做成独立的类,这样管理起来比较方便,也方便查看代码。
最开始拿到这个控件需求的时候,也觉得不会简单,要求用纯QWidget实现,qml实现滑动等各种效果很方便,天生的优势,而QWidget就需要自己来实现了,需求主要是要求五点,能够批量和单个添加联系人信息(头像+姓名+标识)、能够滑动列表悬浮滚动条、能够自动按照字母分类、提供字母导航栏直接快速定位、单击联系人发出对应联系人的详细信息。
二、实现的功能
- 1:可设置信息集合(图标+姓名+类型+电话)以及添加单个联系人
- 2:可设置背景图片+背景颜色
- 3:可设置右侧导航字母的列表+默认颜色+高亮颜色
- 4:可设置联系人按钮姓名颜色+姓名字体
- 5:可设置联系人按钮类型颜色+姓名字体
- 6:可设置联系人按钮选中背景颜色
- 7:可设置字母导航的风格(背景颜色+线条)
- 8:可设置字母导航的颜色+字体大小
- 9:可设置各种边距+联系人列数+元素间隔等
- 10:支持悬浮滚动条,可设置悬停时间
- 11:可设置悬浮滚动条的正常颜色+高亮颜色
- 12:支持滑动,可设置滑动的步长速度
- 13:支持单击右侧字母导航定位+文本突出显示
- 14:单击发出当前联系人的姓名+类型+电话等信息
- 15:根据汉字字母排序从小到大排列联系人,自带汉字转拼音功能
三、效果图
四、头文件代码
#ifdef quc #if (QT_VERSION < QT_VERSION_CHECK(5,7,0)) #include#else #include#endif class QDESIGNER_WIDGET_EXPORT TelWidget : public QWidget #else class TelWidget : public QWidget #endif { Q_OBJECT Q_PROPERTY(QString names READ getNames WRITE setNames) Q_PROPERTY(QString types READ getTypes WRITE setTypes) Q_PROPERTY(QString tels READ getTels WRITE setTels) Q_PROPERTY(QPixmap bgImage READ getBgImage WRITE setBgImage) Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor) Q_PROPERTY(int telHighFontSize READ getTelHighFontSize WRITE setTelHighFontSize) Q_PROPERTY(QPixmap telHighBgImage READ getTelHighBgImage WRITE setTelHighBgImage) Q_PROPERTY(QColor telHighBgColor READ getTelHighBgColor WRITE setTelHighBgColor) Q_PROPERTY(QColor telHighTextColor READ getTelHighTextColor WRITE setTelHighTextColor) Q_PROPERTY(QColor telBannerBgColor READ getTelBannerBgColor WRITE setTelBannerBgColor) Q_PROPERTY(QColor telBannerTextColor READ getTelBannerTextColor WRITE setTelBannerTextColor) Q_PROPERTY(QColor telBannerLineColor READ getTelBannerLineColor WRITE setTelBannerLineColor) Q_PROPERTY(QColor telLetterNormalColor READ getTelLetterNormalColor WRITE setTelLetterNormalColor) Q_PROPERTY(QColor telLetterHighColor READ getTelLetterHighColor WRITE setTelLetterHighColor) Q_PROPERTY(QColor telButtonBgColor READ getTelButtonBgColor WRITE setTelButtonBgColor) Q_PROPERTY(QColor telButtonNameColor READ getTelButtonNameColor WRITE setTelButtonNameColor) Q_PROPERTY(QColor telButtonTypeColor READ getTelButtonTypeColor WRITE setTelButtonTypeColor) Q_PROPERTY(QColor telPanelNormalColor READ getTelPanelNormalColor WRITE setTelPanelNormalColor) Q_PROPERTY(QColor telPanelHighColor READ getTelPanelHighColor WRITE setTelPanelHighColor) public: //联系人结构体 struct TelInfo { QString letter; QString name; QString type; QString tel; QPixmap pixmap; bool operator <(const TelInfo &telInfo)const { return letter < telInfo.letter; //return (letter == "#") ? false : (letter < telInfo.letter); } bool operator >(const TelInfo &telInfo)const { return letter > telInfo.letter; //return (letter == "#") ? true : (letter > telInfo.letter); } }; explicit TelWidget(QWidget *parent = 0); ~TelWidget(); protected: void resizeEvent(QResizeEvent *); void showEvent(QShowEvent *); void paintEvent(QPaintEvent *); private: QString names; //姓名集合 QString types; //类型集合 QString tels; //电话集合 QPixmap bgImage; //背景图片 QColor bgColor; //背景颜色 int telHighFontSize; //高亮标签字体大小 QPixmap telHighBgImage; //高亮标签背景图片 QColor telHighBgColor; //高亮标签背景颜色 QColor telHighTextColor; //高亮标签文字颜色 QColor telBannerBgColor; //顶部字母导航背景颜色 QColor telBannerTextColor; //顶部字母导航文字颜色 QColor telBannerLineColor; //顶部字母导航线条颜色 QColor telLetterNormalColor; //右侧字母导航正常颜色 QColor telLetterHighColor; //右侧字母导航高亮颜色 QColor telButtonBgColor; //通讯录按钮背景颜色 QColor telButtonNameColor; //通讯录按钮姓名颜色 QColor telButtonTypeColor; //通讯录按钮类型颜色 QColor telPanelNormalColor; //滚动条正常颜色 QColor telPanelHighColor; //滚动条高亮颜色 int lastPosition; //最后滚动条位置 TelHigh *telHigh; //高亮字母标签 TelBanner *telBanner; //顶部间隔字母导航 TelLetter *telLetter; //右侧字母标签 TelPanel *telPanel; //通讯录面板 QListitems; //通讯录按钮集合 QListbanners; //通讯录字母分割集合 QListpixmaps; //联系人图片集合 QTimer *timer; //隐藏高亮标签定时器 public: QString getNames() const; QString getTypes() const; QString getTels() const; QPixmap getBgImage() const; QColor getBgColor() const; int getTelHighFontSize() const; QPixmap getTelHighBgImage() const; QColor getTelHighBgColor() const; QColor getTelHighTextColor() const; QColor getTelBannerBgColor() const; QColor getTelBannerTextColor() const; QColor getTelBannerLineColor() const; QColor getTelLetterNormalColor()const; QColor getTelLetterHighColor() const; QColor getTelButtonBgColor() const; QColor getTelButtonNameColor() const; QColor getTelButtonTypeColor() const; QColor getTelPanelNormalColor() const; QColor getTelPanelHighColor() const; QSize sizeHint() const; QSize minimumSizeHint() const; private slots: void initControl(); void initForm(); void btnPressed(); void btnRelease(); void positionChanged(int value); void letterClicked(const QString &letter, int letterY); public Q_SLOTS: //设置姓名+类型+电话集合 void setNames(const QString &names); void setTypes(const QString &types); void setTels(const QString &tels); void setInfo(const QString &names, const QString &types, const QString &tels); void setInfo(const QStringList &names, const QStringList &types, const QStringList &tels, const QList&pixmaps); //添加单个联系人 void addInfo(const QString &name, const QString &type, const QString &tel, const QPixmap &pixmap); //设置背景图+背景颜色 void setBgImage(const QPixmap &bgImage); void setBgColor(const QColor &bgColor); //设置高亮字母标签相关属性 void setTelHighFontSize(int telHighFontSize); void setTelHighBgImage(const QPixmap &telHighBgImage); void setTelHighBgColor(const QColor &telHighBgColor); void setTelHighTextColor(const QColor &telHighTextColor); //设置顶部字母导航相关属性 void setTelBannerBgColor(const QColor &telBannerBgColor); void setTelBannerTextColor(const QColor &telBannerTextColor); void setTelBannerLineColor(const QColor &telBannerLineColor); //设置右侧字母导航相关属性 void setTelLetterNormalColor(const QColor &telLetterNormalColor); void setTelLetterHighColor(const QColor &telLetterHighColor); //设置通讯录按钮相关属性 void setTelButtonBgColor(const QColor &telButtonBgColor); void setTelButtonNameColor(const QColor &telButtonNameColor); void setTelButtonTypeColor(const QColor &telButtonTypeColor); //设置滚动条相关属性 void setTelPanelNormalColor(const QColor &telPanelNormalColor); void setTelPanelHighColor(const QColor &telPanelHighColor); Q_SIGNALS: void telClicked(const QString &name, const QString &type, const QString &tel); };
五、核心代码
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; } //行标识符文字集合 QListtexts; 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" << "#"; QListlistName = names; QListlistType = types; QListlistTel = tels; QListlistPix = pixmaps; int countName = listName.count(); int countType = listType.count(); int countTel = listTel.count(); int countPix = listPix.count(); if (countName == countType && countType == countTel && countTel == countPix) { //取出对应汉字首字母,先对所有姓名按照字母从小到大排序 QListpoundInfos, 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", letter); //设置头像+姓名+类型+电话 btn->setPixmap(telInfo.pixmap); btn->setName(telInfo.name); btn->setType(telInfo.type); btn->setTel(telInfo.tel); items << btn; } //逐个计算字母对应的索引 QListtempIndex; int textCount = texts.count(); for (int j = 0; j < textCount; j++) { QString text = texts.at(j); int index = -1; for (int k = 0; k < items.count(); k++) { if (items.at(k)->property("letter").toString() == text) { index = k; break; } } tempIndex << index; } //过滤索引,标识符索引>=0才算数 QListindexs; for (int j = 0; j < textCount; j++) { int index = tempIndex.at(j); if (index >= 0) { TelBanner *banner = new TelBanner; banner->setText(texts.at(j)); banners << banner; indexs << index; } } //设置标识符+元素集合 telPanel->setIndexs(indexs); telPanel->setBanners(banners); telPanel->setItems(items); //重新设置颜色 setTelHighBgColor(telHighBgColor); setTelBannerBgColor(telBannerBgColor); setTelBannerTextColor(telBannerTextColor); setTelLetterNormalColor(telLetterNormalColor); setTelLetterHighColor(telLetterHighColor); setTelButtonNameColor(telButtonNameColor); setTelButtonTypeColor(telButtonTypeColor); setTelPanelNormalColor(telPanelNormalColor); setTelPanelHighColor(telPanelHighColor); } } void TelWidget::addInfo(const QString &name, const QString &type, const QString &tel, const QPixmap &pixmap) { names = names + "|" + name; types = types + "|" + type; tels = tels + "|" + tel; pixmaps.append(pixmap); setInfo(names.split("|"), types.split("|"), tels.split("|"), pixmaps); }
六、控件介绍
- 超过150个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
- 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
- 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.13的任何Qt版本,支持mingw、msvc、gcc等编译器,支持任意操作系统比如windows+linux+mac+嵌入式linux等,不乱码,可直接集成到Qt Creator中,和自带的控件一样使用,大部分效果只要设置几个属性即可,极为方便。
- 每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
- 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。
- 每个控件默认配色和demo对应的配色都非常精美。
- 超过130个可见控件,6个不可见控件。
- 部分控件提供多种样式风格选择,多种指示器样式选择。
- 所有控件自适应窗体拉伸变化。
- 集成自定义控件属性设计器,支持拖曳设计,所见即所得,支持导入导出xml格式。
- 自带activex控件demo,所有控件可以直接运行在ie浏览器中。
- 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体,享受图形字体带来的乐趣。
- 所有控件最后生成一个动态库文件(dll或者so等),可以直接集成到qtcreator中拖曳设计使用。
- 目前已经有qml版本,后期会考虑出pyqt版本,如果用户需求量很大的话。
- 自定义控件插件开放动态库使用(永久免费),无任何后门和限制,请放心使用。
- 目前已提供26个版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
- Qt入门书籍推荐霍亚飞的《Qt Creator快速入门》《Qt5编程入门》,Qt进阶书籍推荐官方的《C++ GUI Qt4编程》。
- 强烈推荐程序员自我修养和规划系列书《大话程序员》《程序员的成长课》《解忧程序员》,受益匪浅,受益终生!
- SDK下载链接:https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取码:877p
标签:QColor,控件,const,自定义,void,通讯录,字母,QString 来源: https://blog.51cto.com/u_15246509/2845842