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: px px px px;
     border-style: solid;
     border-color: rgb(,,);
    border-radius:px;
}
           

最終效果如下

不直接對QDialog 做圓角背景的原因

為什麼使用QFrame的原因是強制把QDialog做成圓角背景，仍然會顯示四周的直角邊框，這樣極不美觀。