QT 使用QSS实现圆角对话框

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做成圆角背景，仍然会显示四周的直角边框，这样极不美观。