一、前言
上一篇文章写的广告轮播控件,采用的传统widget堆积设置样式表做的,这次必须要用到更高级的QPainter来绘制了,这个才是最高效的办法,本控件参考雨田哥的轮播控件,经过大规模的改造而成,相比于原来的广告轮播控件,本控件可以说完爆他,按在地上使劲摩擦。除了可以设置图片路径集合以外,还可以设置对应的提示信息,这个在众多的web轮播图片效果中最常见,比如新闻的标题等,可以更直观的显示当前图片,而且单击图片还可以支持跳转,指示器的位置也能设置左边+中间+右边,指示器的样式更加增加到椭圆条状+圆形+矩形+小圆点+长条状多种可选择,可以说涵盖了各种web轮播图片的效果,还可以设置鼠标悬停暂停轮播,以便看清说明后鼠标移开继续轮播。指示器的宽高颜色等,都是可以自由设定的,这个对于采用QPainter绘制来说,是最好自定义的,无非就是设置对应的画笔QPen和对应的画布QBrush的颜色啦。
二、实现的功能
* 1:可设置图片路径集合
* 2:可设置提示信息集合
* 3:可设置指示器最小宽度和最大宽度
* 4:可设置图片切换间隔
* 5:可设置指示器颜色和提示文字颜色
* 6:可设置指示器高度
* 7:可设置指示器显示序号
* 8:可设置指示器位置 左边+中间+右边
* 9:可设置指示器的样式 椭圆条状+圆形+矩形+小圆点+长条状
* 10:可设置鼠标悬停停止轮播
三、效果图
四、核心代码
void AdsWidget2::paintEvent(QPaintEvent *){ if (names.count() == 0) { return; } int width = this->width(); int height = this->height(); QPainter painter(this); painter.setRenderHints(QPainter::SmoothPixmapTransform | QPainter::TextAntialiasing); QTextOption option(Qt::AlignLeft | Qt::AlignVCenter); painter.setPen(tipColor); //设置字体 QFont font; font.setPixelSize(15); painter.setFont(font); //取出上一张图片+当前图片,并平滑缩放 QPixmap previousPix(names.at(previousIndex)); QPixmap currentPix(names.at(currentIndex)); previousPix = previousPix.scaled(width, height, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation); currentPix = currentPix.scaled(width, height, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation); int widthOffset = offset + width; if (leftToRight) { widthOffset = offset - width; } //绘制上一张图片 painter.drawPixmap(offset, 0, previousPix); //绘制当前图片 painter.drawPixmap(widthOffset, 0, currentPix); //绘制上一张图片提示信息,有可能上一张图片提示信息为空 if (previousIndex <= tips.count() - 1) { painter.drawText(QRect(offset + 10, height - minHeight - 40, width - 20, 30), tips.at(previousIndex), option); } //绘制当前图片提示信息,有可能当前图片提示信息为空 if (currentIndex <= tips.count() - 1) { painter.drawText(QRect(widthOffset + 10, height - minHeight - 40, width - 20, 30), tips.at(currentIndex), option); }}void AdsWidget2::initWidget(){ //放置指示器的窗体载体 widgetNav = new QWidget(this); widgetNav->setObjectName(QString::fromUtf8("widgetNav")); //给指示器窗体加上左右布局 layout = new QHBoxLayout(widgetNav); layout->setSpacing(3); //主布局,上下布局 QVBoxLayout *verticalLayout = new QVBoxLayout(this); verticalLayout->setSpacing(0); verticalLayout->setContentsMargins(0, 0, 0, 0); //上部弹簧,用于将指示器区域弹到底部 QSpacerItem *verticalSpacer = new QSpacerItem(10, 10, QSizePolicy::Minimum, QSizePolicy::Expanding); verticalLayout->addItem(verticalSpacer); //将指示器窗体加入到主布局中下部 verticalLayout->addWidget(widgetNav); //实例化左侧右侧弹簧 spacerLeft = new QSpacerItem(1, 1, QSizePolicy::Expanding, QSizePolicy::Minimum); spacerRight = new QSpacerItem(1, 1, QSizePolicy::Expanding, QSizePolicy::Minimum);}void AdsWidget2::initForm(){ hoverStop = true; showNumber = false; minHeight = 6; minWidth = 6; maxWidth = 25; interval = 3000; navRadius = 3; navColor = QColor(220, 220, 220); textColor = QColor(20, 20, 20); tipColor = QColor(255, 255, 255); darkColor = QColor(255, 255, 255); imageNames.clear(); imageTips.clear(); navPosition = NavPosition_Left; navStyle = NavStyle_Ellipse; leftToRight = true; offset = 0; currentIndex = 0; previousIndex = 0; //定时器切换图片 timer = new QTimer(this); timer->setInterval(interval); connect(timer, SIGNAL(timeout()), this, SLOT(changedAds())); this->setMouseTracking(true); //定义动画组 animationGroup = new QParallelAnimationGroup(this); //定义动画切换图片 animationImage = new QPropertyAnimation(this, ""); connect(animationImage, SIGNAL(valueChanged(const QVariant &)), this, SLOT(changedImage(const QVariant &))); animationImage->setEasingCurve(QEasingCurve::OutCirc); animationImage->setDuration(1000); animationGroup->addAnimation(animationImage); QSequentialAnimationGroup *sequentialGroup = new QSequentialAnimationGroup(animationGroup); //用于切换最小拉伸宽度 animationMin = new QPropertyAnimation(sequentialGroup, ""); connect(animationMin, SIGNAL(valueChanged(const QVariant &)), this, SLOT(changedMin(const QVariant &))); animationMin->setEasingCurve(QEasingCurve::OutCubic); animationMin->setDuration(500); //用于切换最大拉伸宽度 animationMax = new QPropertyAnimation(sequentialGroup, ""); connect(animationMax, SIGNAL(valueChanged(const QVariant &)), this, SLOT(changedMax(const QVariant &))); animationMax->setEasingCurve(QEasingCurve::OutCubic); animationMax->setDuration(500); //按钮切换串行运行 sequentialGroup->addAnimation(animationMin); sequentialGroup->addAnimation(animationMax); animationGroup->addAnimation(sequentialGroup);}void AdsWidget2::initQss(){ //可自行拓展自定义样式 if (navStyle == NavStyle_Dot) { qssNormal = QString("border:none;background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5," "stop:0 #00FFFFFF,stop:0.4 #00FFFFFF," "stop:0.5 #00FFFFFF,stop:0.6 #00FFFFFF,stop:0.7 rgba(%1,%2,%3,%4));" "color:rgba(%5,%6,%7,%8);border-radius:%9px;") .arg(navColor.red()).arg(navColor.green()).arg(navColor.blue()).arg(navColor.alpha()) .arg(textColor.red()).arg(textColor.green()).arg(textColor.blue()).arg(navColor.alpha()).arg(navRadius); qssCurrent = QString("border:none;background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5," "stop:0 rgba(%1,%2,%3,%4),stop:0.4 rgba(%1,%2,%3,%4)," "stop:0.5 #00FFFFFF,stop:0.6 #00FFFFFF,stop:0.7 rgba(%1,%2,%3,%4));" "color:rgba(%5,%6,%7,%8);border-radius:%9px;") .arg(darkColor.red()).arg(darkColor.green()).arg(darkColor.blue()).arg(darkColor.alpha()) .arg(textColor.red()).arg(textColor.green()).arg(textColor.blue()).arg(navColor.alpha()).arg(navRadius); } else { qssNormal = QString("border:none;background:rgba(%1,%2,%3,%4);color:rgba(%5,%6,%7,%8);border-radius:%9px;") .arg(navColor.red()).arg(navColor.green()).arg(navColor.blue()).arg(navColor.alpha()) .arg(textColor.red()).arg(textColor.green()).arg(textColor.blue()).arg(navColor.alpha()).arg(navRadius); qssCurrent = QString("border:none;background:rgba(%1,%2,%3,%4);color:rgba(%5,%6,%7,%8);border-radius:%9px;") .arg(darkColor.red()).arg(darkColor.green()).arg(darkColor.blue()).arg(darkColor.alpha()) .arg(textColor.red()).arg(textColor.green()).arg(textColor.blue()).arg(textColor.alpha()).arg(navRadius); }}void AdsWidget2::changedAds(){ if (names.count() == 0) { return; } previousIndex = currentIndex; if (currentIndex < names.count() - 1) { currentIndex++; } else { currentIndex = 0; } changedAds(labs.at(currentIndex));}
六、控件介绍
1. 超过146个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
2. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
3. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.12的任何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动态库文件,可以直接集成到qtcreator中拖曳设计使用。
可以留言评论区索要SDK下载地址。