在实现Qt界面的时候,往往需要进行一些诸如提示框的东东,如何实现、如何才能做到最美观又最易用成了主要考虑的问题,在设计提示框的问题上Qt自带的QMessageBox很强大而且很好用,但是若追求美观则有有点黯然失色,所以很多时候我们都必须自定义提示框等等的东西!现在主要介绍等待提示框。。。
在很多网页或者其他界面中经常可以看到各种各样的等待框,Qt如何实现自己的等待框呢?很easy。。。在查阅一些资料之后,通过一些思路转化,可以实现自己想要的任何效果(当然,符合实际情况的哦)。
如图:
这个功能如何实现呢?很简单,利用对QDialog(模态、无模自己选择)实现无边框并且背景透明,在其上添加QLabel并设置QMovie对gif图片进行播放即可。。。很简单吧!
直接看代码:
LoadingDialog::LoadingDialog(QWidget *parent)
: QDialog(parent)
{
this->setFixedSize(100, 100);
int width = this->width();
//设置透明度
this->setWindowOpacity(0.8);
//设置背景色为淡蓝色
this->setStyleSheet("background-color: rgb(55, 135, 215);");
//取消对话框标题
this->setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint);
label = new QLabel(this);
label->setStyleSheet("background-color: transparent;");
tip_label->setStyleSheet("color: white; background-color: transparent;");
label->setGeometry(30, 15, 40, 40);
movie = new QMovie(":/icon/loading");
label->setScaledContents(true);
label->setMovie(movie);
movie->start();
}
图片一 图片二
先解释一下代码:主要是设置背景色(淡蓝),并设置无边框,圆角边框不解介绍(博客里有专门讲解),然后添加QLabel并进行QMovie对gif图片的播放。
注意:其实如果比较细心的完全可以注意到图片一锯齿比较严重,而二相反,虽然播放了loading图片,但是如果背景不为白色或者透明色,则会出现比较严重的锯齿,怎么解决呢?
方法:生成gif图片的时候,设置锯齿边框跟等待框背景色相同(这里我的是淡蓝色)。
对比图片:
图片三 图片四
仔细观察,图片三在背景为淡蓝色的时候不会出现锯齿(对应图片二),则图片四会。然而图片四在背景为白色或者透明的时候不会出现锯齿(锯齿是有的,但是肉眼基本是不可见的)。
关于生成gif的方法可以提供一个网站,基本是可以满足需求的。http://preloaders.net/
再新添加一个功能,在loading图标底下添加提示信息可以动态进行更改(waiting. waiting.. waiting...)等。
效果如图:
基本思路:在loading下添加一个标签用于显示提示信息,利用定时器实现文字的切换。
index = 0;
timer = new QTimer();
connect(timer, SIGNAL(timeout()), this, SLOT(changeText()));
void LoadingDialog::translateLanguage()
{
tip_label->setText(tr("waiting"));
info = tip_label->text();
}
void LoadingDialog::startLoading()
{
movie->start();
timer->start(500);
this->exec();
}
void LoadingDialog::setHidden()
{
index = 0;
timer->stop();
movie->stop();
this->accept();
}
void LoadingDialog::changeText()
{
index++;
QString signal;
if(index == 1)
{
signal = QString(".");
}
else if(index == 2)
{
signal = QString("..");
}
else
{
signal = QString("...");
index = 0;
}
QString tip_info = info + signal;
tip_label->setText(tip_info);
}