通過qss實作Qt按鈕的預設效果——qconicalgradient

　　這裡提供一種使用qconicalgradient()實作QPushButton的預設顯示效果的方法，由名字可以知道，qconicalgradient()提供的是一種扇形漸變效果，或稱為圓錐式漸變效果。

直接上代碼 >>

按鈕正常狀态時的樣式

QPushButton {
    border:1px solid rgb(124, 124, 124);
    background-color:qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(214, 214, 214, 255), stop:0.50001 rgba(236, 236, 236, 255));
    border-radius:5px;
}      

效果如下：

按鈕被滑鼠滑過時的樣式

QPushButton:hover{
    border:1px solid #3C80B1;
    background-color:qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(181, 225, 250, 255), stop:0.50001 rgba(222, 242, 251, 255));
    border-radius:5px;
}      

效果如下：

按鈕被按下時的樣式

QPushButton:pressed{
    border:1px solid #5F92B2;
    background-color:qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(134, 198, 233, 255), stop:0.50001 rgba(206, 234, 248, 255));
    border-radius:5px;
}      

效果如下：

qconicalgradient()參數詳解

• cx和cy的值是中心點的邏輯坐标，所謂邏輯坐标就是将它所描述的對象（箱體模型）的左上頂點設為(0.0, 0.0)，右下頂點設為(1.0,

  1.0)。是以這裡的(cx:0.5, cy:0.5)就是指定扇形的圓心在按鈕的中心點上。

• angle的值代表扇形的起始角度（機關：度），和數學上定義的一樣，預設扇形的起始角度為0，即指向x軸的正方向，角度為正是逆時針方向，角度為負是順時針方向。

  如圖所示，藍點為中心點，黑線為angle等于0時的起始線，紅線為angle等于180時的起始線。

• stop可以控制扇形的跨度和顔色，确切來說它控制的是扇形從哪裡、以什麼顔色開始漸變。stop的第一個值表示漸變開始的位置（以angle指定的的角度為0，逆時針轉360度後為1），第二個值表示此處的顔色值。是以上面的例子其實0.49999和0.50001之間是有漸變效果的，隻不過實在看不出來而已（或者說顯示屏無法表達這種漸變）。

  值得注意的是，第一個stop前的那部分（即上述例子的0.49999）會顯示為第一個stop指定的顔色，而最後一個stop後的那部分（即上述例子的0.50001）會顯示為最後一個stop指定的顔色，相信如果用過photoshop等圖像處理軟體的會很容易了解這一點。