快捷導(dǎo)航

Qt設(shè)置窗體(QWidget)透明度的方法總結(jié)

更新時(shí)間：2022年11月17日 10:52:49 作者：音視頻開發(fā)老舅

在Qt開發(fā)中，有的時(shí)候需要為窗體設(shè)置透明度。這篇文章主要為大家介紹幾個(gè)Qt中窗體設(shè)置透明度的方法，文中的示例代碼講解詳細(xì)，需要的可以參考一下

1. 設(shè)置窗體的背景色

在構(gòu)造函數(shù)里添加代碼，需要添加頭文件qpalette或qgui

QPalette pal = palette(); 
pal.setColor(QPalette::Background, QColor(0x00,0xff,0x00,0x00)); 
setPalette(pal);

通過設(shè)置窗體的背景色來實(shí)現(xiàn)，將背景色設(shè)置為全透。

效果：窗口整體透明，但窗口控件不透明，QLabel控件只是字顯示，控件背景色透明；窗體客戶區(qū)完全透明。

2. 使用函數(shù)

setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint);//去掉標(biāo)題欄
setAttribute(Qt::WA_TranslucentBackground, true);//設(shè)置窗口背景透明

同樣在構(gòu)造函數(shù)中，效果和第一種方法相同。

3. 窗口及其上面的控件都半透明

setWindowOpacity(0.7);

這個(gè)函數(shù)可以分10個(gè)等級調(diào)整透明度，配合QSlider控件可以做成控制條效果：窗口及控件都半透明。

自己注釋：

直接設(shè)置setWindowOpacity函數(shù)應(yīng)該不起作用，需要設(shè)置窗體的屬性：

this->setAttribute(Qt::WA_WState_WindowOpacitySet);

4. 窗口整體不透明，局部透明

在Paint事件中使用Clear模式繪圖。

void TestWindow::paintEvent( QPaintEvent* )
{ 
    QPainter p(this);
    p.setCompositionMode( QPainter::CompositionMode_Clear );
    p.fillRect( 10, 10, 300, 300, Qt::SolidPattern ); 
}

試驗(yàn)效果：繪制區(qū)域全透明。如果繪制區(qū)域有控件不會影響控件。

5. 使用qss樣式表設(shè)置窗體透明

QWidget* widget = new QWidget();
widget->setObjectName("wid");
widget->setStyleSheet("QWidget#wid{background-color: rgba(255,0,0,0.5);}");
widget->show();

rgba(255,255,255,1)中參數(shù)解釋：

r【read】表示：紅色，范圍：0-255，
g【green】表示：綠色，范圍：0-255，
b【blue】表示：藍(lán)色，范圍：0-255，
a【alpha】表示：透明度，范圍：0-1，0表示全透明, 1表示不透明;

補(bǔ)充: 如果QWidget 的子類窗口采用setStyleSheet 設(shè)置背景色無效,需要加上setAttribute(Qt::WA_StyledBackground);

目的是脫離父窗口的樣式。

6. 設(shè)置窗體顏色漸變

（1）漸變顏色設(shè)置有：qlineargradient（線性漸變顏色設(shè)置），qradialgradient（輻射漸變），qconicalgradient（圓錐形漸變）。

漸變方式	解釋
QLinearGradient：	顯示從起點(diǎn)到終點(diǎn)的漸變。
QRadialGradient：	以圓心為中心顯示漸變
QConicalGradient：	圍繞一個(gè)中心點(diǎn)顯示漸變
QGradient::PadSpread ：	填充區(qū)域內(nèi)最接近的停止顏色。這是默認(rèn)的
QGradient::RepeatSpread :	在區(qū)域外繼續(xù)重復(fù)填充
QGradient::ReflectSpread :	在區(qū)域外反射填充

（2）漸變過程：x1->x2 從左向右漸變；y1->y2 從上向下漸變。如果只有x相等,則表示垂直線性漸變,如果只有y相等,則表示平行線性漸變,否則就是斜角線性漸變。

（3）左右漸變

QLabel#label{
                background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,
                stop:0 rgba(255,0,0,1),stop:1 rgba(0,255,0,1));
            }

效果：

（4）上下漸變

QLabel#label{
                background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                stop:0 rgba(255,0,0,1),stop:1 rgba(0,255,0,1));
            }

效果：

（5）左右上下漸變

QLabel#label{
                background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1,
                stop:0 rgba(255,0,0,1),stop:1 rgba(0,255,0,1));
            }

效果：

（6）x1,x2,y1,y2都是設(shè)置成0或者1，顏色都一樣是紅色

QLabel#label{
                background-color: qlineargradient(x1:1, y1:1, x2:1, y2:1,
                stop:0 rgba(255,0,0,1),stop:1 rgba(0,255,0,1));
            }

效果：

（7）增加多個(gè)漸變點(diǎn)

QLabel#label{
                background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
                stop:0 rgba(255,0,0,1),stop:0.5 rgba(0,255,0,1),stop:1 rgba(0,0,255,1));
            }

效果：

（8）輻射漸變

以圓心為中心顯示漸變。(cx, cy)是中點(diǎn)，半徑(radius)是以中點(diǎn)為圓心的圓的半徑，(fx, fy)是漸變的起點(diǎn)。

QLabel#label{
        background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
        stop:0 rgba(105, 105, 0, 255),
        stop:0.19397 rgba(0, 55, 55, 255),
        stop:0.202312 rgba(80, 80, 0, 255),
        stop:0.495514 rgba(0, 105, 105, 255),
        stop:0.504819 rgba(0, 188, 188, 255),
        stop:0.79 rgba(0, 195, 195, 255),
        stop:1 rgba(0, 158, 158, 255));
}

效果：

（9）圓錐形漸變

在(cx, cy)坐標(biāo)上以角度(angle)為中心顯示漸變。

QLabel#label{
            background-color: qconicalgradient(cx:0.5, cy:0.5, angle:0,
            stop:0 rgba(0, 255, 0, 255), stop:0.373979 rgba(0, 255, 0, 255),
            stop:0.373991 rgba(33, 30, 255, 255), stop:0.624018 rgba(33, 30, 255, 255),
            stop:0.624043 rgba(255, 0, 0, 255), stop:1 rgba(255, 0, 0, 255));
            }

效果：