Qt编写自定义控件55-手机通讯录

liudianwu

一、前言
前面几篇文章中的控件基本上难度系数接近0，甚至有凑控件数量的嫌疑，这次必须来一个强悍的控件，本控件难度系数在所有控件中排前五，代码量也不少，头文件都550行，实现文件1600行，为什么这么多呢，其实本控件是由好多个子控件组成的，字母高亮背景类、中间字母分隔类、右侧字母导航类、通讯录按钮类、自定义滚动条类，我在写比较复杂的控件的时候，一般都会逐个功能拆分，然后思考是否该功能可以做成独立的类，这样管理起来比较方便，也方便查看代码。
最开始拿到这个控件需求的时候，也觉得不会简单，要求用纯QWidget实现，qml实现滑动等各种效果很方便，天生的优势，而QWidget就需要自己来实现了，需求主要是要求五点，能够批量和单个添加联系人信息（头像+姓名+标识）、能够滑动列表悬浮滚动条、能够自动按照字母分类、提供字母导航栏直接快速定位、单击联系人发出对应联系人的详细信息。

二、实现的功能
* 1:可设置信息集合(图标+姓名+类型+电话)以及添加单个联系人
* 2:可设置背景图片+背景颜色
* 3:可设置右侧导航字母的列表+默认颜色+高亮颜色
* 4:可设置联系人按钮姓名颜色+姓名字体
* 5:可设置联系人按钮类型颜色+姓名字体
* 6:可设置联系人按钮选中背景颜色
* 7:可设置字母导航的风格(背景颜色+线条)
* 8:可设置字母导航的颜色+字体大小
* 9:可设置各种边距+联系人列数+元素间隔等
* 10:支持悬浮滚动条,可设置悬停时间
* 11:可设置悬浮滚动条的正常颜色+高亮颜色
* 12:支持滑动,可设置滑动的步长速度
* 13:支持单击右侧字母导航定位+文本突出显示
* 14:单击发出当前联系人的姓名+类型+电话等信息
* 15:根据汉字字母排序从小到大排列联系人,自带汉字转拼音功能

三、效果图




四、头文件代码

1. #ifdef quc
   
2. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
   
3. #include <QtDesigner/QDesignerExportWidget>
   
4. #else
   
5. #include <QtUiPlugin/QDesignerExportWidget>
   
6. #endif
   
7. 
   
8. class QDESIGNER_WIDGET_EXPORT TelWidget : public QWidget
   
9. #else
   
10. class TelWidget : public QWidget
    
11. #endif
    
12. 
    
13. {
    
14.     Q_OBJECT
    
15.     Q_PROPERTY(QString names READ getNames WRITE setNames)
    
16.     Q_PROPERTY(QString types READ getTypes WRITE setTypes)
    
17.     Q_PROPERTY(QString tels READ getTels WRITE setTels)
    
18. 
    
19.     Q_PROPERTY(QPixmap bgImage READ getBgImage WRITE setBgImage)
    
20.     Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
    
21. 
    
22.     Q_PROPERTY(int telHighFontSize READ getTelHighFontSize WRITE setTelHighFontSize)
    
23.     Q_PROPERTY(QPixmap telHighBgImage READ getTelHighBgImage WRITE setTelHighBgImage)
    
24.     Q_PROPERTY(QColor telHighBgColor READ getTelHighBgColor WRITE setTelHighBgColor)
    
25.     Q_PROPERTY(QColor telHighTextColor READ getTelHighTextColor WRITE setTelHighTextColor)
    
26. 
    
27.     Q_PROPERTY(QColor telBannerBgColor READ getTelBannerBgColor WRITE setTelBannerBgColor)
    
28.     Q_PROPERTY(QColor telBannerTextColor READ getTelBannerTextColor WRITE setTelBannerTextColor)
    
29.     Q_PROPERTY(QColor telBannerLineColor READ getTelBannerLineColor WRITE setTelBannerLineColor)
    
30. 
    
31.     Q_PROPERTY(QColor telLetterNormalColor READ getTelLetterNormalColor WRITE setTelLetterNormalColor)
    
32.     Q_PROPERTY(QColor telLetterHighColor READ getTelLetterHighColor WRITE setTelLetterHighColor)
    
33. 
    
34.     Q_PROPERTY(QColor telButtonBgColor READ getTelButtonBgColor WRITE setTelButtonBgColor)
    
35.     Q_PROPERTY(QColor telButtonNameColor READ getTelButtonNameColor WRITE setTelButtonNameColor)
    
36.     Q_PROPERTY(QColor telButtonTypeColor READ getTelButtonTypeColor WRITE setTelButtonTypeColor)
    
37. 
    
38.     Q_PROPERTY(QColor telPanelNormalColor READ getTelPanelNormalColor WRITE setTelPanelNormalColor)
    
39.     Q_PROPERTY(QColor telPanelHighColor READ getTelPanelHighColor WRITE setTelPanelHighColor)
    
40. 
    
41. public:
    
42.     //联系人结构体
    
43.     struct TelInfo {
    
44.         QString letter;
    
45.         QString name;
    
46.         QString type;
    
47.         QString tel;
    
48.         QPixmap pixmap;
    
49. 
    
50.         bool operator <(const TelInfo &telInfo)const
    
51.         {
    
52.             return letter < telInfo.letter;
    
53.             //return (letter == "#") ? false : (letter < telInfo.letter);
    
54.         }
    
55. 
    
56.         bool operator >(const TelInfo &telInfo)const
    
57.         {
    
58.             return letter > telInfo.letter;
    
59.             //return (letter == "#") ? true : (letter > telInfo.letter);
    
60.         }
    
61.     };
    
62. 
    
63.     explicit TelWidget(QWidget *parent = 0);
    
64.     ~TelWidget();
    
65. 
    
66. protected:
    
67.     void resizeEvent(QResizeEvent *);
    
68.     void showEvent(QShowEvent *);
    
69.     void paintEvent(QPaintEvent *);
    
70. 
    
71. private:
    
72.     QString names;                  //姓名集合
    
73.     QString types;                  //类型集合
    
74.     QString tels;                   //电话集合
    
75. 
    
76.     QPixmap bgImage;                //背景图片
    
77.     QColor bgColor;                 //背景颜色
    
78. 
    
79.     int telHighFontSize;            //高亮标签字体大小
    
80.     QPixmap telHighBgImage;         //高亮标签背景图片
    
81.     QColor telHighBgColor;          //高亮标签背景颜色
    
82.     QColor telHighTextColor;        //高亮标签文字颜色
    
83. 
    
84.     QColor telBannerBgColor;        //顶部字母导航背景颜色
    
85.     QColor telBannerTextColor;      //顶部字母导航文字颜色
    
86.     QColor telBannerLineColor;      //顶部字母导航线条颜色
    
87. 
    
88.     QColor telLetterNormalColor;    //右侧字母导航正常颜色
    
89.     QColor telLetterHighColor;      //右侧字母导航高亮颜色
    
90. 
    
91.     QColor telButtonBgColor;        //通讯录按钮背景颜色
    
92.     QColor telButtonNameColor;      //通讯录按钮姓名颜色
    
93.     QColor telButtonTypeColor;      //通讯录按钮类型颜色
    
94. 
    
95.     QColor telPanelNormalColor;     //滚动条正常颜色
    
96.     QColor telPanelHighColor;       //滚动条高亮颜色
    
97. 
    
98.     int lastPosition;               //最后滚动条位置
    
99.     TelHigh *telHigh;               //高亮字母标签
    
100.     TelBanner *telBanner;           //顶部间隔字母导航
     
101.     TelLetter *telLetter;           //右侧字母标签
     
102.     TelPanel *telPanel;             //通讯录面板
     
103. 
     
104.     QList<QWidget *> items;         //通讯录按钮集合
     
105.     QList<QWidget *> banners;       //通讯录字母分割集合
     
106.     QList<QPixmap> pixmaps;         //联系人图片集合
     
107.     QTimer *timer;                  //隐藏高亮标签定时器
     
108. 
     
109. public:
     
110.     QString getNames()              const;
     
111.     QString getTypes()              const;
     
112.     QString getTels()               const;
     
113. 
     
114.     QPixmap getBgImage()            const;
     
115.     QColor getBgColor()             const;
     
116. 
     
117.     int getTelHighFontSize()        const;
     
118.     QPixmap getTelHighBgImage()     const;
     
119.     QColor getTelHighBgColor()      const;
     
120.     QColor getTelHighTextColor()    const;
     
121. 
     
122.     QColor getTelBannerBgColor()    const;
     
123.     QColor getTelBannerTextColor()  const;
     
124.     QColor getTelBannerLineColor()  const;
     
125. 
     
126.     QColor getTelLetterNormalColor()const;
     
127.     QColor getTelLetterHighColor()  const;
     
128. 
     
129.     QColor getTelButtonBgColor()    const;
     
130.     QColor getTelButtonNameColor()  const;
     
131.     QColor getTelButtonTypeColor()  const;
     
132. 
     
133.     QColor getTelPanelNormalColor() const;
     
134.     QColor getTelPanelHighColor()   const;
     
135. 
     
136.     QSize sizeHint()                const;
     
137.     QSize minimumSizeHint()         const;
     
138. 
     
139. private slots:
     
140.     void initControl();
     
141.     void initForm();
     
142.     void btnPressed();
     
143.     void btnRelease();
     
144.     void positionChanged(int value);
     
145.     void letterClicked(const QString &letter, int letterY);
     
146. 
     
147. public Q_SLOTS:
     
148.     //设置姓名+类型+电话集合
     
149.     void setNames(const QString &names);
     
150.     void setTypes(const QString &types);
     
151.     void setTels(const QString &tels);
     
152.     void setInfo(const QString &names, const QString &types, const QString &tels);
     
153.     void setInfo(const QStringList &names, const QStringList &types,
     
154.                  const QStringList &tels, const QList<QPixmap> &pixmaps);
     
155. 
     
156.     //添加单个联系人
     
157.     void addInfo(const QString &name, const QString &type,
     
158.                  const QString &tel, const QPixmap &pixmap);
     
159. 
     
160.     //设置背景图+背景颜色
     
161.     void setBgImage(const QPixmap &bgImage);
     
162.     void setBgColor(const QColor &bgColor);
     
163. 
     
164.     //设置高亮字母标签相关属性
     
165.     void setTelHighFontSize(int telHighFontSize);
     
166.     void setTelHighBgImage(const QPixmap &telHighBgImage);
     
167.     void setTelHighBgColor(const QColor &telHighBgColor);
     
168.     void setTelHighTextColor(const QColor &telHighTextColor);
     
169. 
     
170.     //设置顶部字母导航相关属性
     
171.     void setTelBannerBgColor(const QColor &telBannerBgColor);
     
172.     void setTelBannerTextColor(const QColor &telBannerTextColor);
     
173.     void setTelBannerLineColor(const QColor &telBannerLineColor);
     
174. 
     
175.     //设置右侧字母导航相关属性
     
176.     void setTelLetterNormalColor(const QColor &telLetterNormalColor);
     
177.     void setTelLetterHighColor(const QColor &telLetterHighColor);
     
178. 
     
179.     //设置通讯录按钮相关属性
     
180.     void setTelButtonBgColor(const QColor &telButtonBgColor);
     
181.     void setTelButtonNameColor(const QColor &telButtonNameColor);
     
182.     void setTelButtonTypeColor(const QColor &telButtonTypeColor);
     
183. 
     
184.     //设置滚动条相关属性
     
185.     void setTelPanelNormalColor(const QColor &telPanelNormalColor);
     
186.     void setTelPanelHighColor(const QColor &telPanelHighColor);
     
187. 
     
188. Q_SIGNALS:
     
189.     void telClicked(const QString &name, const QString &type, const QString &tel);
     
190. };

复制代码

五、核心代码

1. void TelWidget::setInfo(const QStringList &names, const QStringList &types,
   
2.                         const QStringList &tels, const QList<QPixmap> &pixmaps)
   
3. {
   
4.     this->names = names.join("|");
   
5.     this->types = types.join("|");
   
6.     this->tels = tels.join("|");
   
7.     this->pixmaps = pixmaps;
   
8. 
   
9.     if (names.isEmpty() || types.isEmpty() || tels.isEmpty()) {
   
10.         return;
    
11.     }
    
12. 
    
13.     //行标识符文字集合
    
14.     QList<QString> texts;
    
15.     texts << "A" << "B" << "C" << "D" << "E" << "F" << "G" << "H" << "I" << "J" << "K" << "L" << "M"
    
16.           << "N" << "O" << "P" << "Q" << "R" << "S" << "T" << "U" << "V" << "W" << "X" << "Y" << "Z" << "#";
    
17. 
    
18.     QList<QString> listName = names;
    
19.     QList<QString> listType = types;
    
20.     QList<QString> listTel = tels;
    
21.     QList<QPixmap> listPix = pixmaps;
    
22.     int countName = listName.count();
    
23.     int countType = listType.count();
    
24.     int countTel = listTel.count();
    
25.     int countPix = listPix.count();
    
26. 
    
27.     if (countName == countType && countType == countTel && countTel == countPix) {
    
28.         //取出对应汉字首字母,先对所有姓名按照字母从小到大排序
    
29.         QList<TelInfo> poundInfos, telInfos;
    
30.         for (int i = 0; i < countName; i++) {
    
31.             TelInfo telInfo;
    
32.             telInfo.name = listName.at(i);
    
33.             telInfo.type = listType.at(i);
    
34.             telInfo.tel = listTel.at(i);
    
35.             telInfo.pixmap = listPix.at(i);
    
36. 
    
37.             //如果首字母未找到字母则归结到 # 分类中
    
38.             QString letter = ZhToPY::Instance()->zhToZM(listName.at(i).at(0));
    
39.             if (texts.contains(letter)) {
    
40.                 telInfo.letter = ZhToPY::Instance()->zhToJP(listName.at(i));
    
41.                 telInfos << telInfo;
    
42.             } else {
    
43.                 telInfo.letter = "#";
    
44.                 poundInfos << telInfo;
    
45.             }
    
46.         }
    
47. 
    
48.         //对信息集合进行升序排序
    
49.         qSort(telInfos.begin(), telInfos.end());
    
50. 
    
51.         //对最后的 # 类别追加到末尾
    
52.         foreach (TelInfo telInfo, poundInfos) {
    
53.             telInfos << telInfo;
    
54.         }
    
55. 
    
56.         //先要清空所有元素
    
57.         qDeleteAll(items);
    
58.         qDeleteAll(banners);
    
59.         items.clear();
    
60.         banners.clear();
    
61. 
    
62.         //生成电话本按钮
    
63.         for (int i = 0; i < countName; i++) {
    
64.             TelInfo telInfo = telInfos.at(i);
    
65.             TelButton *btn = new TelButton;
    
66.             connect(btn, SIGNAL(btnPressed()), this, SLOT(btnPressed()));
    
67.             connect(btn, SIGNAL(btnRelease()), this, SLOT(btnRelease()));
    
68. 
    
69.             //设置字母属性
    
70.             QString letter = telInfo.letter.at(0);
    
71.             btn->setProperty("letter", letter);
    
72. 
    
73.             //设置头像+姓名+类型+电话
    
74.             btn->setPixmap(telInfo.pixmap);
    
75.             btn->setName(telInfo.name);
    
76.             btn->setType(telInfo.type);
    
77.             btn->setTel(telInfo.tel);
    
78.             items << btn;
    
79.         }
    
80. 
    
81.         //逐个计算字母对应的索引
    
82.         QList<int> tempIndex;
    
83.         int textCount = texts.count();
    
84.         for (int j = 0; j < textCount; j++) {
    
85.             QString text = texts.at(j);
    
86.             int index = -1;
    
87.             for (int k = 0; k < items.count(); k++) {
    
88.                 if (items.at(k)->property("letter").toString() == text) {
    
89.                     index = k;
    
90.                     break;
    
91.                 }
    
92.             }
    
93. 
    
94.             tempIndex << index;
    
95.         }
    
96. 
    
97.         //过滤索引,标识符索引>=0才算数
    
98.         QList<int> indexs;
    
99.         for (int j = 0; j < textCount; j++) {
    
100.             int index = tempIndex.at(j);
     
101.             if (index >= 0) {
     
102.                 TelBanner *banner = new TelBanner;
     
103.                 banner->setText(texts.at(j));
     
104.                 banners << banner;
     
105.                 indexs << index;
     
106.             }
     
107.         }
     
108. 
     
109.         //设置标识符+元素集合
     
110.         telPanel->setIndexs(indexs);
     
111.         telPanel->setBanners(banners);
     
112.         telPanel->setItems(items);
     
113. 
     
114.         //重新设置颜色
     
115.         setTelHighBgColor(telHighBgColor);
     
116.         setTelBannerBgColor(telBannerBgColor);
     
117.         setTelBannerTextColor(telBannerTextColor);
     
118.         setTelLetterNormalColor(telLetterNormalColor);
     
119.         setTelLetterHighColor(telLetterHighColor);
     
120.         setTelButtonNameColor(telButtonNameColor);
     
121.         setTelButtonTypeColor(telButtonTypeColor);
     
122.         setTelPanelNormalColor(telPanelNormalColor);
     
123.         setTelPanelHighColor(telPanelHighColor);
     
124.     }
     
125. }
     
126. 
     
127. void TelWidget::addInfo(const QString &name, const QString &type,
     
128.                         const QString &tel, const QPixmap &pixmap)
     
129. {
     
130.     names = names + "|" + name;
     
131.     types = types + "|" + type;
     
132.     tels = tels + "|" + tel;
     
133.     pixmaps.append(pixmap);
     
134.     setInfo(names.split("|"), types.split("|"), tels.split("|"), pixmaps);
     
135. }

复制代码

六、控件介绍
1. 超过150个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏，flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
2. 每个类都可以独立成一个单独的控件，零耦合，每个控件一个头文件和一个实现文件，不依赖其他文件，方便单个控件以源码形式集成到项目中，较少代码量。qwt的控件类环环相扣，高度耦合，想要使用其中一个控件，必须包含所有的代码。
3. 全部纯Qt编写，QWidget+QPainter绘制，支持Qt4.6到Qt5.13的任何Qt版本，支持mingw、msvc、gcc等编译器，支持任意操作系统比如windows+linux+mac+嵌入式linux等，不乱码，可直接集成到Qt  Creator中，和自带的控件一样使用，大部分效果只要设置几个属性即可，极为方便。
4. 每个控件都有一个对应的单独的包含该控件源码的DEMO，方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
5. 每个控件的源代码都有详细中文注释，都按照统一设计规范编写，方便学习自定义控件的编写。
6. 每个控件默认配色和demo对应的配色都非常精美。
7. 超过130个可见控件，6个不可见控件。
8. 部分控件提供多种样式风格选择，多种指示器样式选择。
9. 所有控件自适应窗体拉伸变化。
10. 集成自定义控件属性设计器，支持拖曳设计，所见即所得，支持导入导出xml格式。
11. 自带activex控件demo，所有控件可以直接运行在ie浏览器中。
12. 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体，享受图形字体带来的乐趣。
13. 所有控件最后生成一个动态库文件(dll或者so等)，可以直接集成到qtcreator中拖曳设计使用。
14. 目前已经有qml版本，后期会考虑出pyqt版本，如果用户需求量很大的话。
15. 自定义控件插件开放动态库使用（永久免费），无任何后门和限制，请放心使用。
16. 目前已提供26个版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
17. 不定期增加控件和完善控件，不定期更新SDK，欢迎各位提出建议，谢谢！
18. Qt入门书籍推荐霍亚飞的《Qt Creator快速入门》《Qt5编程入门》，Qt进阶书籍推荐官方的《C++ GUI Qt4编程》。
19. 强烈推荐程序员自我修养和规划系列书《大话程序员》《程序员的成长课》《解忧程序员》，受益匪浅，受益终生！
20. SDK下载链接：[https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ](https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ) 提取码：877p