-
UID:110085
-
- 注册时间2010-12-21
- 最后登录2024-03-25
- 在线时间3536小时
-
- 发帖2734
- 搜Ta的帖子
- 精华2
- 金钱32613
- 威望3359
- 贡献值586
- 好评度3377
-
访问TA的空间加好友用道具
|
一、前言前面几篇文章中的控件基本上难度系数接近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);
- }
|