Qt編寫自定義控件55-手機通訊錄

本文轉載自查看原文 2019-09-20 22:09 738 QT/ Qt-自定義控件/ 免費/ 自定義控件/ Qt-項目作品/ 插件/ Qt-界面開發

一、前言

前面幾篇文章中的控件基本上難度系數接近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 <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#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;             //通訊錄面板

    QList<QWidget *> items;         //通訊錄按鈕集合
    QList<QWidget *> banners;       //通訊錄字母分割集合
    QList<QPixmap> pixmaps;         //聯系人圖片集合
    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<QPixmap> &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<QPixmap> &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<QString> 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<QString> listName = names;
    QList<QString> listType = types;
    QList<QString> listTel = tels;
    QList<QPixmap> 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<TelInfo> 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", letter);

            //設置頭像+姓名+類型+電話
            btn->setPixmap(telInfo.pixmap);
            btn->setName(telInfo.name);
            btn->setType(telInfo.type);
            btn->setTel(telInfo.tel);
            items << btn;
        }

        //逐個計算字母對應的索引
        QList<int> tempIndex;
        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才算數
        QList<int> indexs;
        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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何獲取手機通訊錄編寫Qt Designer自定義控件（二）——編寫自定義控件界面編寫Qt Designer自定義控件（一）——如何創建並使用Qt自定義控件 Qt編寫自定義控件及插件的使用 Android 手機通訊錄(源碼) 【Android Demo】簡單手機通訊錄 Android 個人手機通訊錄開發 Qt編寫自定義控件二動畫按鈕 Qt編寫自定義控件一開關按鈕 Qt編寫自定義控件屬性設計器