码迷,mamicode.com
首页 > 其他好文 > 详细

QT 使用QSS实现圆角对话框

时间:2015-02-22 17:22:51      阅读:1153      评论:0      收藏:0      [点我收藏+]

标签:qt   qt4   样式表   

QT 使用QSS实现圆角对话框

圆角对话框有很多办法,一般是用代码重绘的方式,比较复杂,这一个高仿360的界面给的代码,比较复杂,放入我的QDialog的窗口总是不生效:

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow){
ui->setupUi(this);
setWindowFlags(Qt::FramelessWindowHint);//隐藏边框和标题栏


//生成一张位图
QBitmap objBitmap(size());
//QPainter用于在位图上绘画
QPainter painter(&objBitmap);
//填充位图矩形框(用白色填充)
painter.fillRect(rect(),Qt::white);
painter.setBrush(QColor(0,0,0));
//在位图上画圆角矩形(用黑色填充)
painter.drawRoundedRect(this->rect(),5,5);
//使用setmask过滤即可
setMask(objBitmap);
//设置背景
QPalette pal;
QPixmap pixmap(QDir::toNativeSeparators
    (":/image/frame.png"));
pal.setBrush(QPalette::Window, QBrush(pixmap));
setPalette(pal);
}

简单实现圆角窗口

实际发现,可以简单的通过QT的 styleSheet 来实现这一功能,相当简单好用。

思路是把QDialog 背景透明,然后在QDialog再放上一个圆角的QFrame 即可实现圆角效果!

2.1 初始化对话框

OnePicker::OnePicker(QWidget *parent) :
RoundCornerPicker(parent),
ui(new Ui::OnePicker)
{//
    ui->setupUi(this);
    setWindowFlags(Qt::FramelessWindowHint | Qt::Dialog);
}

2.2 设置相应样式

其中对话框的样式是

border: none; background-color: transparent;

用来作直正的背景的Frame样式

border-image: url(:/resource/images/picker_bk.png);
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: rgb(76,76,76);
border-radius:6px;

2.3 全局样式表

可以把上述定义放入全局的qss样式表中,这样所有对话框自动变成圆角矩表

   QDialog { 
       border: none;
      background-color: transparent;}

   QDialog #DialogBk {
    border-image:          url(:/resource/images/picker_bk.png);
    border-width: 1px 1px 1px 1px;
     border-style: solid;
     border-color: rgb(76,76,76);
    border-radius:6px;
}

最终效果如下
技术分享

不直接对QDialog 做圆角背景的原因

为什么使用QFrame的原因是强制把QDialog做成圆角背景,仍然会显示四周的直角边框,这样极不美观。

QT 使用QSS实现圆角对话框

标签:qt   qt4   样式表   

原文地址:http://blog.csdn.net/work4blue/article/details/43908101

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!