• 2233阅读
  • 3回复

Qt编写自定义控件55-手机通讯录 [复制链接]

上一主题 下一主题
离线liudianwu
 

只看楼主 倒序阅读 楼主  发表于: 2019-09-20
一、前言
前面几篇文章中的控件基本上难度系数接近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. class QDESIGNER_WIDGET_EXPORT TelWidget : public QWidget
  8. #else
  9. class TelWidget : public QWidget
  10. #endif
  11. {
  12.     Q_OBJECT
  13.     Q_PROPERTY(QString names READ getNames WRITE setNames)
  14.     Q_PROPERTY(QString types READ getTypes WRITE setTypes)
  15.     Q_PROPERTY(QString tels READ getTels WRITE setTels)
  16.     Q_PROPERTY(QPixmap bgImage READ getBgImage WRITE setBgImage)
  17.     Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
  18.     Q_PROPERTY(int telHighFontSize READ getTelHighFontSize WRITE setTelHighFontSize)
  19.     Q_PROPERTY(QPixmap telHighBgImage READ getTelHighBgImage WRITE setTelHighBgImage)
  20.     Q_PROPERTY(QColor telHighBgColor READ getTelHighBgColor WRITE setTelHighBgColor)
  21.     Q_PROPERTY(QColor telHighTextColor READ getTelHighTextColor WRITE setTelHighTextColor)
  22.     Q_PROPERTY(QColor telBannerBgColor READ getTelBannerBgColor WRITE setTelBannerBgColor)
  23.     Q_PROPERTY(QColor telBannerTextColor READ getTelBannerTextColor WRITE setTelBannerTextColor)
  24.     Q_PROPERTY(QColor telBannerLineColor READ getTelBannerLineColor WRITE setTelBannerLineColor)
  25.     Q_PROPERTY(QColor telLetterNormalColor READ getTelLetterNormalColor WRITE setTelLetterNormalColor)
  26.     Q_PROPERTY(QColor telLetterHighColor READ getTelLetterHighColor WRITE setTelLetterHighColor)
  27.     Q_PROPERTY(QColor telButtonBgColor READ getTelButtonBgColor WRITE setTelButtonBgColor)
  28.     Q_PROPERTY(QColor telButtonNameColor READ getTelButtonNameColor WRITE setTelButtonNameColor)
  29.     Q_PROPERTY(QColor telButtonTypeColor READ getTelButtonTypeColor WRITE setTelButtonTypeColor)
  30.     Q_PROPERTY(QColor telPanelNormalColor READ getTelPanelNormalColor WRITE setTelPanelNormalColor)
  31.     Q_PROPERTY(QColor telPanelHighColor READ getTelPanelHighColor WRITE setTelPanelHighColor)
  32. public:
  33.     //联系人结构体
  34.     struct TelInfo {
  35.         QString letter;
  36.         QString name;
  37.         QString type;
  38.         QString tel;
  39.         QPixmap pixmap;
  40.         bool operator <(const TelInfo &telInfo)const
  41.         {
  42.             return letter < telInfo.letter;
  43.             //return (letter == "#") ? false : (letter < telInfo.letter);
  44.         }
  45.         bool operator >(const TelInfo &telInfo)const
  46.         {
  47.             return letter > telInfo.letter;
  48.             //return (letter == "#") ? true : (letter > telInfo.letter);
  49.         }
  50.     };
  51.     explicit TelWidget(QWidget *parent = 0);
  52.     ~TelWidget();
  53. protected:
  54.     void resizeEvent(QResizeEvent *);
  55.     void showEvent(QShowEvent *);
  56.     void paintEvent(QPaintEvent *);
  57. private:
  58.     QString names;                  //姓名集合
  59.     QString types;                  //类型集合
  60.     QString tels;                   //电话集合
  61.     QPixmap bgImage;                //背景图片
  62.     QColor bgColor;                 //背景颜色
  63.     int telHighFontSize;            //高亮标签字体大小
  64.     QPixmap telHighBgImage;         //高亮标签背景图片
  65.     QColor telHighBgColor;          //高亮标签背景颜色
  66.     QColor telHighTextColor;        //高亮标签文字颜色
  67.     QColor telBannerBgColor;        //顶部字母导航背景颜色
  68.     QColor telBannerTextColor;      //顶部字母导航文字颜色
  69.     QColor telBannerLineColor;      //顶部字母导航线条颜色
  70.     QColor telLetterNormalColor;    //右侧字母导航正常颜色
  71.     QColor telLetterHighColor;      //右侧字母导航高亮颜色
  72.     QColor telButtonBgColor;        //通讯录按钮背景颜色
  73.     QColor telButtonNameColor;      //通讯录按钮姓名颜色
  74.     QColor telButtonTypeColor;      //通讯录按钮类型颜色
  75.     QColor telPanelNormalColor;     //滚动条正常颜色
  76.     QColor telPanelHighColor;       //滚动条高亮颜色
  77.     int lastPosition;               //最后滚动条位置
  78.     TelHigh *telHigh;               //高亮字母标签
  79.     TelBanner *telBanner;           //顶部间隔字母导航
  80.     TelLetter *telLetter;           //右侧字母标签
  81.     TelPanel *telPanel;             //通讯录面板
  82.     QList<QWidget *> items;         //通讯录按钮集合
  83.     QList<QWidget *> banners;       //通讯录字母分割集合
  84.     QList<QPixmap> pixmaps;         //联系人图片集合
  85.     QTimer *timer;                  //隐藏高亮标签定时器
  86. public:
  87.     QString getNames()              const;
  88.     QString getTypes()              const;
  89.     QString getTels()               const;
  90.     QPixmap getBgImage()            const;
  91.     QColor getBgColor()             const;
  92.     int getTelHighFontSize()        const;
  93.     QPixmap getTelHighBgImage()     const;
  94.     QColor getTelHighBgColor()      const;
  95.     QColor getTelHighTextColor()    const;
  96.     QColor getTelBannerBgColor()    const;
  97.     QColor getTelBannerTextColor()  const;
  98.     QColor getTelBannerLineColor()  const;
  99.     QColor getTelLetterNormalColor()const;
  100.     QColor getTelLetterHighColor()  const;
  101.     QColor getTelButtonBgColor()    const;
  102.     QColor getTelButtonNameColor()  const;
  103.     QColor getTelButtonTypeColor()  const;
  104.     QColor getTelPanelNormalColor() const;
  105.     QColor getTelPanelHighColor()   const;
  106.     QSize sizeHint()                const;
  107.     QSize minimumSizeHint()         const;
  108. private slots:
  109.     void initControl();
  110.     void initForm();
  111.     void btnPressed();
  112.     void btnRelease();
  113.     void positionChanged(int value);
  114.     void letterClicked(const QString &letter, int letterY);
  115. public Q_SLOTS:
  116.     //设置姓名+类型+电话集合
  117.     void setNames(const QString &names);
  118.     void setTypes(const QString &types);
  119.     void setTels(const QString &tels);
  120.     void setInfo(const QString &names, const QString &types, const QString &tels);
  121.     void setInfo(const QStringList &names, const QStringList &types,
  122.                  const QStringList &tels, const QList<QPixmap> &pixmaps);
  123.     //添加单个联系人
  124.     void addInfo(const QString &name, const QString &type,
  125.                  const QString &tel, const QPixmap &pixmap);
  126.     //设置背景图+背景颜色
  127.     void setBgImage(const QPixmap &bgImage);
  128.     void setBgColor(const QColor &bgColor);
  129.     //设置高亮字母标签相关属性
  130.     void setTelHighFontSize(int telHighFontSize);
  131.     void setTelHighBgImage(const QPixmap &telHighBgImage);
  132.     void setTelHighBgColor(const QColor &telHighBgColor);
  133.     void setTelHighTextColor(const QColor &telHighTextColor);
  134.     //设置顶部字母导航相关属性
  135.     void setTelBannerBgColor(const QColor &telBannerBgColor);
  136.     void setTelBannerTextColor(const QColor &telBannerTextColor);
  137.     void setTelBannerLineColor(const QColor &telBannerLineColor);
  138.     //设置右侧字母导航相关属性
  139.     void setTelLetterNormalColor(const QColor &telLetterNormalColor);
  140.     void setTelLetterHighColor(const QColor &telLetterHighColor);
  141.     //设置通讯录按钮相关属性
  142.     void setTelButtonBgColor(const QColor &telButtonBgColor);
  143.     void setTelButtonNameColor(const QColor &telButtonNameColor);
  144.     void setTelButtonTypeColor(const QColor &telButtonTypeColor);
  145.     //设置滚动条相关属性
  146.     void setTelPanelNormalColor(const QColor &telPanelNormalColor);
  147.     void setTelPanelHighColor(const QColor &telPanelHighColor);
  148. Q_SIGNALS:
  149.     void telClicked(const QString &name, const QString &type, const QString &tel);
  150. };

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


欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线305750665

只看该作者 1楼 发表于: 2019-09-21
    
雨田哥: 群号:853086607
QQ: 3246214072

刘典武-feiyangqingyun:专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!QQ:517216493
离线文华在线

只看该作者 2楼 发表于: 2019-10-09
厉害!!!!!!!!
离线jokerhuang

只看该作者 3楼 发表于: 2019-10-10
刘大侠威武!
快速回复
限100 字节
 
上一个 下一个