qss樣式表之QPushButton

先來個示例

QPushButton {
    font-family: "Microsoft YaHei";
    font-size: 16px;
    color: #BDC8E2;
    background-color: #2E3648;
}

效果圖如下:
在這裏插入圖片描述

上面的例子是基本的樣式設置,下面我們將探討 QPushButton 各種樣式設置:


字體樣式

font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #BDC8E2;
font: bold italic 18px "Microsoft YaHei";

font-family 爲設置字體類型,標準形式需要加雙引號,不加也可能會生效,具體看系統是否支持,中英文都支持,但要保證字體編碼支持,一般程序編碼爲"utf-8"時沒問題。

font-size 爲設置字體大小,單位一般使用 px 像素

font-style 爲設置字體斜體,italic 爲斜體, normal 爲不斜體

font-weight 爲設置字體加粗,bold 爲加粗, normal 爲不加粗

font 爲同時設置字體 style weight size family 的樣式,但是 style 和 weight 必須出現在開頭,size 和 family 在後面,而且 size 必須在 family 之前,否則樣式將不生效,font 中不能設置顏色,可以單獨設置 style weight 和 size,不能單獨設置 family

color 爲設置字體顏色,可以使用十六進制數表示顏色,也可以使用某些特殊的字體顏色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置,其中 r、g、b、a 值爲0~255,如果想不顯示顏色可以設置值爲透明 transparent

注意:字體顏色用的是 color 屬性,沒有 font-color 這個屬性的


文字位置

text-align: left center;
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;

text-align 爲設置文字位置,只支持 left right top bottom center;值 left right center 爲設置水平位置,值 top bottom center 爲設置垂直位置

padding-left 爲設置文字距離左邊邊界的距離

padding-top 爲設置文字距離頂邊邊界的距離

padding-right 爲設置文字距離右邊邊界的距離

padding-bottom 爲設置文字距離底邊邊界的距離

Tip: 特殊的位置可以使用 text-align 來設置,如果要精確設置位置只能通過 padding 來設置,一般 padding-left 相當於 x 座標,padding-top 相當於 y 座標,設置這兩個就可以顯示任意位置顯示了(默認情況下文字是上下左右都居中顯示的)


邊框樣式

border-style: solid;
border-width: 2px;
border-color: red;
border: 2px solid red;

border-style 爲設置邊框樣式,solid 爲實線, dashed 爲虛線, dotted 爲點線, none 爲不顯示(如果不設置 border-style 的話,默認會設置爲 none)

border-width 爲設置邊框寬度,單位爲 px 像素

border-color 爲設置邊框顏色,可以使用十六進制數表示顏色,也可以使用某些特殊的字體顏色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置,其中 r、g、b、a 值爲0~255,如果想不顯示顏色可以設置值爲透明 transparent

border 爲同時設置 border 的 width style color 屬性,但值的順序必須是按照 width style color 來寫,不然不會生效!

也可以單獨設置某一條邊框的樣式

border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red;

border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;

border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;

border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;

border-top-style 爲設置頂部邊框樣式

border-top-width 爲設置頂部邊框寬度

border-top-color 爲設置頂部邊框顏色

border-top 爲設置頂部邊框 width style color 的屬性,原理和 border 一致

其它三個邊框:right bottom left 邊框的設置都相同

設置邊框半徑

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-radius: 20px;

border-top-left-radius 爲設置左上角圓角半徑,單位 px 像素

border-top-right-radius 爲設置右上角圓角半徑,單位 px 像素

border-bottom-left-radius 爲設置左下角圓角半徑,單位 px 像素

border-bottom-right-radius 爲設置右上角圓角半徑,單位 px 像素

border-radius 爲設置所有邊框圓角半徑,單位爲 px 像素,通過圓角半徑可以實現圓形的 PushButton


背景樣式

background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat; 
background-position: left center;
background: url("./image.png") no-repeat left center #2E3648;

background-color 爲設置背景顏色,可以使用十六進制數表示顏色,也可以使用某些特殊的字體顏色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置,其中 r、g、b、a 值爲0~255,如果想不顯示顏色可以設置值爲透明 transparent

background-image 爲設置背景圖片,圖片路徑爲 url(image-path)

background-repeat 爲設置背景圖是否重複填充背景,如果背景圖片尺寸小於背景實際大小的話,默認會自動重複填充圖片,可以設置爲 no-repeat 不重複,repeat-x 在x軸重複,repeat-y 在y軸重複

background-position 爲設置背景圖片顯示位置,只支持 left right top bottom center;值 left right center 爲設置水平位置,值 top bottom center 爲設置垂直位置

background 爲設置背景的所有屬性,color image repeat position 這些屬性值出現的順序可以任意


下面是一個綜合示例

QPushButton {
    font-family: "Microsoft YaHei";
    font-size: 16px;
    color: #BDC8E2;
    font-style: italic;
    font-weight: bold;

    text-align: left center;
    padding-left: 25px;
    padding-top: 0px;

    border-style: solid;
    border-width: 2px;
    border-color: aqua;
    border-radius: 20px;

    background-color: #2E3648;
    background-image: url("./image.png");
    background-repeat: no-repeat;
    background-position: left center;
}

效果圖
在這裏插入圖片描述


接下來,我們對 QPuahButton 進行動態樣式設置

鼠標懸浮時的樣式

QPushButton:hover{
	color: red;
	border-color: green;
    background-color: aqua;
}

鼠標點擊時的樣式

QPushButton:pressed{
	color: green;
	border-color: blueviolet;
    background-color: black;
}

按鈕禁止時的樣式

QPushButton:disabled{
	color: blue;
	border-color: brown;
    background-color: aqua;
}

下拉菜單

對於 QPushButton,可以給它設置添加一個下拉菜單,這需要調用 QPushButton 的 setMenu() 方法,當菜單設置成功後,QPushButton 就會默認添加一個 menu-indicator 下拉菜單指示器圖標,我們可以對這個菜單圖標進行樣式修改

QPushButton::menu-indicator {
    image: url(myindicator.png);
    subcontrol-position: right center;
    subcontrol-origin: padding;
    right: 10px;
    top: 15px;
}

image 爲設置菜單指示器圖標

subcontrol-position 爲設置菜單指示器圖標的位置,如果不設置的話會默認放在右下角處

subcontrol-origin 爲設置菜單指示器圖標與按鈕之間的停靠位置,默認爲 padding

right top left bottom 爲設置菜單指示器圖標距離按鈕四個位置的距離


當然下拉菜單指示器圖標也有動態樣式
QPushButton::menu-indicator:hover {
    image: url(./image1.png)
}

QPushButton::menu-indicator:pressed{
    image: url(./image2.png)
}

QPushButton::menu-indicator:open{
    image: url(./image2.png)
}

對於 menu-indicator 來說 pressed 和 open 原理相同


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章