Qt QSS QPushButton 详细介绍
生活随笔
收集整理的這篇文章主要介紹了
Qt QSS QPushButton 详细介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 QPushButton {
2 /* 前景色 */
3 color:red;
4
5 /* 背景色 */
6 background-color:rgb(30,75,10);
7
8 /* 邊框風格 */
9 border-style:outset;
10
11 /* 邊框寬度 */
12 border-2px;
13
14 /* 邊框顏色 */
15 border-color:rgb(10,45,110);
16
17 /* 邊框倒角 */
18 border-radius:10px;
19
20 /* 字體 */
21 font:bold 14px;
22
23 /* 控件最小寬度 */
24 min-100px;
25
26 /* 控件最小高度 */
27 min-height:20px;
28
29 /* 內邊距 */
30 padding:4px;
31 }
32
33 /* 鼠標按下時的效果 */
34 QPushButton#pushButton:pressed {
35 /* 改變背景色 */
36 background-color:rgb(40,85,20);
37
38 /* 改變邊框風格 */
39 border-style:inset;
40
41 /* 使文字有一點移動 */
42 padding-left:6px;
43 padding-top:6px;
44 }
45
46 /* 按鈕樣式 */
47 QPushButton:flat {
48 border:2px solid red;
49 }
50
51 /* 當按鈕打開菜單時:ui->pushButton->setMenu(btnMenu) */
52 QPushButton:open{
53 background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);
54 }
55
56 /* 子選擇器:菜單 */
57 QPushButton::menu-indicator {
58 image:url(:/images/close.png);
59
60 /* 去掉小三角號
61 image:none;*/
62
63 /* 繪制subcontrol 的參考矩形的位置 */
64 subcontrol-origin:padding;
65
66 /* 小三角的位置 */
67 subcontrol-position:bottom right;
68 }
69
70 QPushButton::menu-indicator:pressed,QPushButton::menu-indicator:open {
71 position:relative;
72 top:4px;
73 left:4px;
74 }
前景色 color:rgb(255, 0, 0)
1 QPushButton *btn = new QPushButton("我叫按鈕");
2 btn->setStyleSheet( QString("QPushButton{color:rgb(255, 0, 0)}
3 QPushButton:hover{color:rgb(0, 255, 0)}
4 QPushButton:pressed{color:rgb(0, 0, 255)}") );
5 btn->show();
效果如下:
按鈕上的字初始顏色是紅色
鼠標移到按鈕上后,按鈕按鈕上字的顏色變成綠色
鼠標點擊后,按鈕按鈕上字的顏色變成藍色
背景色 background-color:rgb(255, 0, 0)
1 QPushButton *btn = new QPushButton("我叫按鈕");
2 btn->setStyleSheet( QString("QPushButton{background-color:rgb(255, 0, 0)}
3 QPushButton:hover{background-color:rgb(0, 255, 0)}
4 QPushButton:pressed{background-color:rgb(0, 0, 255)}") );
5 btn->show();
效果如下:
按鈕初始背景色是紅色
鼠標移到按鈕上后,按鈕背景色變成綠色
鼠標點擊后,按鈕背景色變成藍色
邊框風格 border:2px solid red
調整邊框風格時,border-width >= 1。否則不管怎么調整,都看不出效果
| border-style屬性值 | 含義 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 “none” 相同。不過應用于表時除外,對于表,hidden 用于解決邊框沖突。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等于 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決于 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決于 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決于 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決于 border-color 的值。 |
| inherit | 規定應該從父元素繼承邊框樣式。 |
1 QPushButton *btn = new QPushButton("我叫按鈕");
2 btn->setStyleSheet( QString("QPushButton{border:2px solid #ff0000}
3 QPushButton:hover{border:5px dotted #00ff00}
4 QPushButton:pressed{border:10px groove #0000ff}") );
5 btn->show();
效果如下:
按鈕初始為普通紅色邊框
鼠標移到按鈕上后,按鈕邊框變成綠色點狀邊框
鼠標點擊按鈕后,按鈕邊框變成藍色3D 凹槽邊框
邊框倒角 border-radius:2px
1 QPushButton *btn = new QPushButton("我叫按鈕");
2 btn->setStyleSheet( QString("QPushButton{ border:2px solid red;
3 border-top-left-radius:4px;
4 border-top-right-radius:8px;
5 border-bottom-left-radius:16px;
6 border-bottom-right-radius:32px }
7 QPushButton:hover{border:5px dotted #00ff00}
8 QPushButton:pressed{border:10px groove #0000ff}") );
9 btn->show();
效果如下:
總結
以上是生活随笔為你收集整理的Qt QSS QPushButton 详细介绍的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 知识点复习
- 下一篇: MySQL数据库之rowid