自定义窗口及拖动
1.自定义无边框窗口时,需要将窗口标志设为:
Qt::FramelessWindowHint |Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint
2.然后还需要通过安装EventFilter给自己监视窗口拖动
其中构造函数实现:
myUi::myUi(QWidget *parent) :
QWidget(parent)
{
setWindowFlags(Qt::FramelessWindowHint |Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);
qApp->installEventFilter(this); //给自己加事件过滤器,用来实现拖动窗口
... ...
}
eventFilter事件处理函数实现:
bool myUi::eventFilter(QObject *obj, QEvent *evt)
{
QMouseEvent *mouse = dynamic_cast<QMouseEvent *>(evt);
if(obj == this&&mouse) //判断拖动
{
if(this->isMaximized())
{
return true;
}
static bool dragFlag = false;
static QPoint dragPoint(0,0);
if(mouse->button()==Qt::LeftButton && mouse->type() ==QEvent::MouseButtonPress) //按下
{
dragFlag =true;
dragPoint = mouse->pos(); //记录鼠标所在的界面位置
return true;
}
else if(dragFlag && mouse->type() ==QEvent::MouseMove) //拖动
{
this->move(mouse->globalPos() - dragPoint);
return true;
}
else if(mouse->type() ==QEvent::MouseButtonRelease)
{
dragFlag = false;
return true;
}
}
return QWidget::eventFilter(obj,evt);
}
自定义QToolButton/QPushButton开关按钮
1.以QToolButton为例,构造函数里实现:
myUi::myUi(QWidget *parent) :
QWidget(parent)
{
//... ...
ui->ToolButton->setText("更新设置");
ui->ToolButton->setIcon( QIcon(":/image/ok.png"));
connect(ui->ToolButton ,SIGNAL(clicked()),this,SLOT(onPageStartBtnClicked()));
ui->ToolButton->setProperty("START","Up"); //设置为未按下状态
//... ...
}
2.槽函数里实现:
void myUi::onPageStartBtnClicked()
{
if(b->property("START")=="Up") //之前是未按下
{
ui->ToolButton->setProperty("START","Down"); //设置为按下
ui->ToolButton->setText("取消设置");
ui->ToolButton->setIcon( QIcon(":/image/colose.png"));
//... ...
}
else
{
ui->ToolButton->setProperty("START","Up"); //设置为未按下状态
ui->ToolButton->setText("更新设置");
ui->ToolButton->setIcon( QIcon(":/image/ok.png"));
//... ...
}
}
3.QSS代码:
/*正常状态下*/
QToolButton[START="Up"] {
border-radius: 20px;
border: none;
padding-left :30px;
color: rgb(255,255,255);
background: rgb(56,167,222);
}
QToolButton[START="Up"]:hover {
padding-bottom: 2px;
background: rgb(0,205,252);
}
QToolButton[START="Up"]:checked,QToolButton[START="Up"]:pressed {
background: rgb(6,144,175);
}
/*取消状态下*/
QToolButton[START="Down"] {
border-radius: 20px;
border: none;
padding-left :30px;
color: rgb(255,255,255);
background: qlineargradient(spread:pad,
x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(255,176,30, 255),
stop:0.6 rgba(254,139,91, 255),
stop:1.0 rgba(254,176,143, 255));
}
QToolButton[START="Down"]:hover {
padding-bottom: 2px;
background: qlineargradient(spread:pad,
x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(255,176,30, 255),
stop:0.6 rgba(255,74,0, 255),
stop:1.0 rgba(255,183,153, 255));
}
效果
点击前:
点击后:
界面阴影
首先,将界面拖放在QFrame子组件里,然后将该QFrame居中,与主窗口间隔10px左右(用来显示阴影).并将主窗口设为透明属性.
接下来,有2种方法设置阴影:
1.使用QGraphicsDropShadowEffect图像阴影效果类
好处在于快捷,只需要在构造函数里实现即可,坏处就是界面有点卡(我这里测试是这样的)
QGraphicsDropShadowEffect常用函数:
setOffset ( qreal dx, qreal dy );
//设置阴影的偏移度,如果想实现整个界面上下左右都有阴影,则设为dx=0,dy=0.
//当dx为负时,表示偏移为左,反之为右
//当dy为负时,表示偏移为上,反之为下
void setBlurRadius ( qreal blurRadius );
//设置阴影半径,值越大,则阴影效果越强
setColor ( const QColor & color )
//设置阴影颜色
示例-在构造函数里调用:
setAttribute(Qt::WA_TranslucentBackground);
QGraphicsDropShadowEffect* shadowEffect = new QGraphicsDropShadowEffect(this);
shadowEffect->setOffset(0,0);
shadowEffect->setColor(QColor(0,0,0));
shadowEffect->setBlurRadius(10);
ui->frame->setGraphicsEffect(shadowEffect);
效果:
2.QPainter绘画
首先,在构造函数里调用下面函数,设置透明:
setAttribute(Qt::WA_TranslucentBackground);
然后在paintEvent函数里进行绘制
void myUi::paintEvent(QPaintEvent *) //绘画阴影
{
int size =10; //阴影宽度
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
QColor color(0, 0, 0, 0);
for(int i=0;i<=size; i++)
{
color.setAlpha(i*4);
painter.setPen(color);
painter.setBrush(Qt::transparent);
painter.drawRoundedRect(i,i,this->width()-i*2, this->height()-i*2,15,15);
}
}
由于界面是圆角的,所以通过drawRoundedRect()绘制.
效果:
参考: https://blog.csdn.net/stephan14/article/details/47406881
参考: http://blog.sina.com.cn/s/blog_a6fb6cc90101eoop.html#cmt_53197A33-7F000001-6E85F70F-8B8-8A0