一些小控件的用法和一些问题的请教

z55716368

一叶知秋 发表于 2015-5-4 11:54
你是指哪个距离比较远，我没太懂

比如 控制器地址和groupbox上面的距离 确定按钮和下面的距离
还有 那个Qcombobox的样式我想换换 QSpinbox的上下键怎么换成像combobox的黑色的？

一叶知秋

1.首先需要说明的是，如果你的界面是固定大小，那么在一个固定大小的区域里，要么让控件尽可能的大，来填充多于的地方，要么就让控件间的间距变大来占据更多的空间，所以你可以调整整个界面的大小，或者去调整垂直布局的margin和space
2.至于那个黑色，可能就需要QSS来做了，这个需要你找些资料看看了，送你一套QSS慢慢学习吧

一叶知秋

1. /*---------------------------------------------------------------主要设置----------------------------------------------------------------*/
   
2. 
   
3. *{
   
4.   font-size:13px;
   
5.   color:white;
   
6.   font-family:"宋体";
   
7. }
   
8. 
   
9. CallWidget QLineEdit#telEdt
   
10. {
    
11.   font-size:24px;
    
12. 
    
13. }
    
14. 
    
15. QMainWindow,QDialog{
    
16.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*背景*/
    
17.                                  stop: 0 #113845,
    
18.                                  stop: 1.0 #15A8FF);
    
19. }
    
20. QWidget{
    
21.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*背景*/
    
22.                                  stop: 0 #113845,
    
23.                                  stop: 1.0 #15A8FF);
    
24. }
    
25. 
    
26. QLabel{
    
27.    background:transparent;
    
28. }
    
29. 
    
30. QTreeWidget{
    
31.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*背景*/
    
32.                                  stop: 0 #113845,
    
33.                                  stop: 1.0 #15A8FF);
    
34. }
    
35. 
    
36. 
    
37. /*--------------------------------------------------以下为菜单的设置---------------------------------------------------------------------------*/
    
38. /*设置整条菜单栏的颜色，现在为橙红色*/
    
39.   QMenuBar {
    
40.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*背景*/
    
41.                                  stop: 0  #15A8FF,
    
42.                                  stop: 1.0 #113845);
    
43. }
    
44. 
    
45. QMenuBar::item {
    
46.      spacing: 3px; /* spacing between menu bar items */
    
47.      padding: 1px 4px;                       
    
48.      border-radius: 1px;
    
49.      font:#BBDDFF;
    
50.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*菜单最顶层如“Flie”的背景颜色*/
    
51.                                  stop: 0 #113845,
    
52.                                  stop: 1.0 #15A8FF);
    
53. }
    
54. 
    
55. QMenuBar::item:selected { /* when selected using mouse or keyboard */
    
56.      background: #1A2432;                        /*当鼠标移动到菜单项上面或者通过键盘使菜单项得到光标时显示的颜色*/
    
57.      font:#FFFFFF;
    
58. }
    
59. 
    
60. QMenuBar::item:pressed {
    
61.      background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    
62.                                        stop:0 #10151E, stop:1 #2C547E);
    
63.      font:#FFFFFF;
    
64. 
    
65. }
    
66. QMenuBar::item:hover{
    
67.     border-width:1px;
    
68.     border-color:#516589;
    
69.     background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    
70.                                        stop:0 #9979A, stop:1 #2D567F);
    
71.     font:#FFFFFF;
    
72. 
    
73. }
    
74.   QMenu {
    
75.      background-color: #030406;                /*菜单下拉列表的外边框颜色*/
    
76.      border-width:0px;
    
77.      margin: 2px;                        /*下拉列表的外边框的宽度*/
    
78. }
    
79. 
    
80. QMenu::item {
    
81.      background-color: #1D2838;                 /*如果不加，菜单下拉列表背景颜色默认为黑色*/
    
82.      padding: 2px 25px 2px 20px;                /*对应每个菜单下拉选项的文字与上一选项的距离，与左边的距离，与下一选项的距离，与右边的距离*/
    
83.      border-color:transparent;
    
84.      color:#858E94;
    
85. }
    
86. QMenu::item:!enabled {                /*当某项菜单不能用时*/
    
87.      background-color:  #1D2838;
    
88.      padding: 2px 25px 2px 20px;
    
89.      border-color:transparent;
    
90.      color:#76746C;                        /*字体颜色*/
    
91. }
    
92. 
    
93. QMenu::item:selected {                        /*当菜单项处于选中状态时选中时*/
    
94.      border-width:1px;
    
95.      border-color: #516589;
    
96.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*stop有两个，是设置渐变色的关键，由这两个stop的提供的颜色值混合设置渐变色*/
    
97.                                  stop: 0 #1E293A,
    
98.                                  stop: 1.0 #2C547E);
    
99.      color:#E6FFFF;
    
100. }
     
101. 
     
102. QMenu::icon:checked { /* appearance of a 'checked' icon */
     
103.      background: gray;
     
104.      border: 1px inset gray;
     
105.      position: absolute;
     
106.      top: 1px;
     
107.      right: 1px;
     
108.      bottom: 1px;
     
109.      left: 1px;
     
110. }
     
111. 
     
112. QMenu::separator {                                /*分离器，作用暂时未知*/
     
113.      height: 1px;
     
114.      background: #1D99A9;
     
115.      /*margin-left: 10px;*/
     
116.      /*margin-right: 5px;*/
     
117. }
     
118. 
     
119. QMenu::indicator {                                /*指示符，作用暂时未知*/
     
120.      width: 13px;
     
121.      height: 13px;
     
122. }
     
123. 
     
124. 
     
125. 
     
126. /*---------------------------------------------------------------------以下为TabBar的设置-------------------------------------------------------*/
     
127. QTabBar::tab {
     
128.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
129.                                  stop: 0 #15A8FF,  stop: 1.0 #113845);        /*当鼠标经过tabbar的上方时所显示的颜色*/
     
130. }
     
131. QTabBar::tab:selected{
     
132.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
133.                                  stop: 0 #113845,  stop: 1.0 #15A8FF);                /*TabBar的某一个子窗体被选中时，它的最上面的小标题的背景颜色*/
     
134. }
     
135. QTabBar::tab:hover {
     
136.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
137.                                  stop: 0 #15A8FF,  stop: 1.0 #113845);        /*当鼠标经过tabbar的上方时所显示的颜色*/
     
138. }
     
139. 
     
140. 
     
141. /*----------------------------------------------------------------------------在MainWindow右下角-------------------------------------------------------------------------------------------------------*/
     
142. QSizeGrip {
     
143. 
     
144.      image: url(qss/sizegrip.png);
     
145.      width: 16px;
     
146.      height: 16px;
     
147. }
     

复制代码

一叶知秋

1. 
   
2. /*----------------------------------------------------------------------------在TreeWidget的标题颜色设置-------------------------------------------------------------------------------------------------------*/
   
3. QHeaderView::section {
   
4. 
   
5.      background:transparent;                /*控件背景透明*/
   
6.     border-color: #11505C;                        /*改变boder的颜色，以便实现动态感觉*/
   
7.     border-style: outset;
   
8.     border-width: 1px;                                /*boder的长度，有突出效果*/
   
9.     border-radius: 1px;
   
10.     padding: 5px;                                /*标题宽度*/
    
11. }
    
12. 
    
13. 
    
14. 
    
15. /*--------------------------------------------------------------以下为QLineEdit的设置----------------------------------------------------------*/
    
16. 
    
17. 
    
18. QLineEdit,QTextEdit {
    
19.     border: 1px solid #32435E;
    
20.     border-radius: 5px;                                /*控件边框的弧度，数值越大，则弯曲得越厉害*/
    
21.     /* padding: 0 8px; */
    
22.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*背景*/
    
23.                                  stop: 0 #113845,
    
24.                                  stop: 1.0 #15A8FF);
    
25.     selection-background-color: #0A246A;
    
26. 
    
27. }
    
28. QLineEdit::hover{
    
29.   border-color:#5D8B9E;                                /*外边框的颜色*/
    
30. }
    
31. 
    
32. QLineEdit[echoMode="3"] {
    
33.      lineedit-password-character: 9679;
    
34. }
    
35. 
    
36. #QLineEdit:read-only {
    
37.      background: #543F7C;
    
38. }
    
39. 
    
40. 
    
41. 
    
42. /*-----------------------------------------------------------以下设置特定QToolButton的属性-----------------------------------------------------*/
    
43. 
    
44. 
    
45. QToolButton[objectName="minimizeToolBtn"] {                                                /*为特定控件名的按钮单独设置属性*/
    
46.     background: transparent;
    
47.     border:none;
    
48.     image:url(qss/minimize.png)
    
49. }
    
50. QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {/*为特定控件名的按钮单独设置属性*/
    
51.     image:url(qss/minimize_hover.png)
    
52. }
    
53. 
    
54. 
    
55. 
    
56. 
    
57. /*---------------------------------------------------------以下设置pushbutton的样式-------------------------------------------------*/
    
58. QPushButton{
    
59.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*三个坐标对应的是上。中。下的background的颜色*/
    
60.                                  stop: 0 #122C39, stop: 0.5 #758385,
    
61.                                  stop: 1.0 #15A8FF);
    
62.     border-color: #11505C;                        /*改变boder的颜色，以便实现动态感觉*/
    
63.     border-style: outset;
    
64.     border-width: 5px;                                /*boder的长度，有突出效果*/
    
65.     border-radius: 1px;
    
66.     padding: 1px;
    
67. }
    
68. 
    
69. QPushButton::hover{
    
70.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    
71.                                  stop: 0 #5B5F5F, stop: 0.5 #0C2436,
    
72.                                  stop: 1.0 #27405A);
    
73.     border-color: #11223F;                        /*boder的颜色,boder跟background做对比设置可以有较明显效果*/
    
74.    
    
75. }
    
76. 
    
77. QPushButton::pressed{
    
78.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    
79.                                  stop: 0 #969B9C, stop: 0.5 #16354B,
    
80.                                  stop: 1.0 #244F76);
    
81.     border-color: #11505C;
    
82. }
    
83. QPushButton::disabled{
    
84.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    
85.                                  stop: 0 #282B2C, stop: 0.5 #09121A,
    
86.                                  stop: 1.0 #111D29);
    
87.     border-color: #0A1320;
    
88.     color:#6A6864;
    
89. 
    
90. }
    
91. 
    
92. 
    
93. 
    
94. QDialog QPushButton,QDialog QToolButton{
    
95.   min-width:30px;
    
96.   min-height:23px;
    
97. }
    
98. 
    
99. /*----------------------------------------------------------------以下设置QToolButton------------------------------------------------------*/
    
100. QToolButton{
     
101.   min-width:30px;
     
102.   min-height:23px;
     
103. }
     
104. 
     
105. /*----------------------------------------------------------------以下设置QComboBox------------------------------------------------------*/
     
106. 
     
107. 
     
108. QComboBox {
     
109.      min-width: 6em;
     
110.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*三个坐标对应的是上。中。下的background的颜色*/
     
111.                                  stop: 0 #122C39, stop: 0.5 #758385,
     
112.                                  stop: 1.0 #15A8FF);
     
113.     border-color: #11505C;                        /*改变boder的颜色，以便实现动态感觉*/
     
114.     border-style: outset;
     
115.     border-width: 5px;                                /*boder的长度，有突出效果*/
     
116.     border-radius: 1px;
     
117.     padding: 1px;
     
118. }
     
119. QComboBox::hover{
     
120.   border-color:#5D8B9E;
     
121. }
     
122. 
     
123. 
     
124. QComboBox:editable {
     
125.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
126.                                  stop: 0 #080B10,
     
127.                                  stop: 1.0 #212C3F);
     
128. }
     
129. 
     
130. QComboBox:!editable, QComboBox::drop-down:editable {
     
131.       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
132.                                  stop: 0 #080B10,
     
133.                                  stop: 1.0 #212C3F);
     
134. }
     
135. 
     
136. /* QComboBox gets the "on" state when the popup is open */
     
137. QComboBox:!editable:on, QComboBox::drop-down:editable:on {
     
138.      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
139.                                  stop: 0 #080B10,
     
140.                                  stop: 1.0 #212C3F);;
     
141. }
     
142. 
     
143. QComboBox:on { /* shift the text when the popup opens */
     
144.      padding-top: 3px;
     
145.      padding-left: 4px;
     
146. }
     
147. QComboBox::drop-down {
     
148.      subcontrol-origin: padding;
     
149.      subcontrol-position: top right;
     
150.      width: 15px;
     
151. 
     
152.      border-left-width: 1px;
     
153.      border-left-color: 32435E;
     
154.      border-left-style: solid; /* just a single line */
     
155.      border-top-right-radius: 3px; /* same radius as the QComboBox */
     
156.      border-bottom-right-radius: 3px;
     
157. }
     
158. 
     
159. QComboBox::down-arrow {
     
160.      image: url(qss/downarrow.png);
     
161. }
     
162. 
     
163. QComboBox::down-arrow:on { /* shift the arrow when popup is open */
     
164.      top: 1px;
     
165.      left: 1px;
     
166. }
     
167. 
     
168. QComboBox QAbstractItemView {
     
169.      border: 2px solid #32435E;
     
170.      selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
171.                                  stop: 0 #506B79,
     
172.                                  stop: 1.0 #0D95A6);
     
173.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     
174.                                  stop: 0 #1B2534, stop: 0.4 #010101,
     
175.                                  stop: 0.5 #000101, stop: 1.0 #1F2B3C);
     
176. }
     
177. 
     
178. /*--------------------------------------------------设置QStatusBar---------------------------------------------------------------------------*/
     
179. QStatusBar {
     
180.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,        /*背景*/
     
181.                                  stop: 0 #113845,
     
182.                                  stop: 1.0 #15A8FF);
     
183. }
     
184. 
     
185. QStatusBar::item {
     
186.      border: 1px solid #3E58A5;
     
187.      border-radius: 3px;
     
188. }
     
189. 
     
190. #QStatusBar QLabel {
     
191.      border: 1px solid #6AF0FF;
     
192.      /*background: white; */
     
193. }

复制代码

一叶知秋

1. /*-----------------------------------------------------------以下设置checkbox--------------------------------------------------------------*/
   
2. QCheckBox {
   
3.      spacing: 5px;
   
4.      background:transparent;                /*控件背景透明*/
   
5. }
   
6. 
   
7. QCheckBox::indicator {
   
8.      width: 13px;
   
9.      height: 13px;
   
10. }
    
11. 
    
12. QCheckBox::indicator:unchecked {
    
13.      image: url(:/qss/checkbox_unchecked.png);
    
14. }
    
15. 
    
16. QCheckBox::indicator:unchecked:hover {
    
17.     image: url(:/qss/checkbox_unchecked_hover.png);
    
18. }
    
19. 
    
20. QCheckBox::indicator:unchecked:pressed {
    
21.      image: url(:/qss/checkbox_unchecked_pressed.png);
    
22. }
    
23. 
    
24. QCheckBox::indicator:checked {
    
25.      image: url(:/qss/checkbox_checked.png);
    
26. }
    
27. 
    
28. QCheckBox::indicator:checked:hover {
    
29.      image: url(:/qss/checkbox_checked_hover.png);
    
30. }
    
31. 
    
32. QCheckBox::indicator:checked:pressed {
    
33.      image: url(:/qss/checkbox_checked_pressed.png);
    
34. }
    
35. 
    
36. QCheckBox::indicator:indeterminate:hover {
    
37.      image: url(:/qss/checkbox_indeterminate_hover.png);
    
38. }
    
39. 
    
40. QCheckBox::indicator:indeterminate:pressed {
    
41.      image: url(:/qss/checkbox_indeterminate_pressed.png);
    
42. }
    
43. 
    
44. 
    
45. /*-----------------------------------------------------------以下设置QRadioButton-----------------------------------------------------------*/
    
46. 
    
47. QRadioButton {
    
48.      width: 13px;
    
49.      height: 13px;
    
50.      background:transparent;
    
51. }
    
52. 
    
53. QRadioButton::indicator {
    
54.      width: 13px;
    
55.      height: 13px;
    
56.      background:transparent;
    
57. }
    
58. 
    
59. QRadioButton::indicator::unchecked {
    
60.      image: url(qss/radiobutton_unchecked.png);
    
61. }
    
62. 
    
63. QRadioButton::indicator:unchecked:hover {
    
64.      image: url(qss/radiobutton_unchecked_hover.png);
    
65. }
    
66. 
    
67. QRadioButton::indicator:unchecked:pressed {
    
68.      image: url(qss/radiobutton_unchecked_pressed.png);
    
69. }
    
70. 
    
71. QRadioButton::indicator::checked {
    
72.      image: url(qss/radiobutton_checked.png);
    
73. }
    
74. 
    
75. QRadioButton::indicator:checked:hover {
    
76.      image: url(qss/radiobutton_checked_hover.png);
    
77. }
    
78. 
    
79. QRadioButton::indicator:checked:pressed {
    
80.      image: url(qss/radiobutton_checked_pressed.png);
    
81. }
    
82. 
    
83. 
    
84. /*--------------------------------------------------------以下设置QScrollBar------------------------------------------------------*/
    
85. 
    
86. QScrollBar:vertical {                                                /*垂直的QScrollBar*/
    
87.       border: 1px solid #32435E;
    
88.       border-width: 0px 0px 0px 1px;
    
89.       background: #21252F;
    
90.       width: 12px;
    
91.       margin: 12px 0 12px 0;
    
92.   }
    
93.   QScrollBar::handle:vertical {                                        /*handle处理*/
    
94.       background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    
95.                                        stop:0 #60788C, stop:1 #1084BD);
    
96.       min-height: 20px;
    
97.   }
    
98.   QScrollBar::add-line:vertical {
    
99.       border: 1px solid #32435E;
    
100.       border-width:0px 0px 0px 1px;
     
101.       background:#21252F;
     
102.       height: 12px;
     
103.       subcontrol-position: bottom;
     
104.       subcontrol-origin: margin;
     
105.   }
     
106. 
     
107.   QScrollBar::sub-line:vertical {
     
108.       border: 1px solid #32435E;
     
109.       border-width:0px 0px 0px 1px;
     
110.       background: #21252F;
     
111.       height: 12px;
     
112.       subcontrol-position: top;
     
113.       subcontrol-origin: margin;
     
114.   }
     
115.   QScrollBar::up-arrow:vertical {
     
116.       border: 1px solid transparent;
     
117.       background: #21252F;
     
118.       image: url(qss/up_arrow.png);
     
119.       width: 7px;
     
120.       height: 7px;
     
121.   }
     
122.   QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed {
     
123.       image: url(qss/up_arrow_hover.png);
     
124.   }
     
125. 
     
126.   QScrollBar::down-arrow:vertical{
     
127.       border: 1px solid transparent;
     
128.       background: #21252F;
     
129.       image:url(qss/down_arrow.png);
     
130.       width: 7px;
     
131.       height: 7px;
     
132.   }
     
133. QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed{
     
134.     image: url(qss/down_arrow_hover.png);
     
135. }
     
136. QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     
137.       background: none;
     
138. }
     
139. 
     
140. 
     
141. QScrollBar:horizontal {                                /*水平的QScrollBar*/
     
142.       border: 1px solid #32435E;
     
143.       border-width: 1px 0px 0px 0px;
     
144.       background: #21252F;
     
145.       height: 12px;
     
146.       margin: 0 12px 0 12px;
     
147.   }
     
148.   QScrollBar::handle:horizontal {
     
149.       background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
     
150.                                        stop:0 #60788C, stop:1 #1084BD);
     
151.       min-width: 20px;
     
152.   }
     
153.   QScrollBar::add-line:horizontal {
     
154.       border: 1px solid #32435E;
     
155.       border-width:1px 0px 0px 0px;
     
156.       background:#21252F;
     
157.       width: 12px;
     
158.       subcontrol-position: right;
     
159.       subcontrol-origin: margin;
     
160.   }
     
161. 
     
162.   QScrollBar::sub-line:horizontal {
     
163.       border: 1px solid #32435E;
     
164. 
     
165. 
     
166.       border-width:1px 0px 0px 0px;
     
167.       background: #21252F;
     
168.       width: 12px;
     
169.       subcontrol-position: left;
     
170.       subcontrol-origin: margin;
     
171.   }
     
172.   QScrollBar::left-arrow:horizontal {
     
173.       border: 1px solid transparent;
     
174.       background: #21252F;
     
175.       image: url(qss/left_arrow.png);
     
176.       width: 7px;
     
177.       height: 7px;
     
178.   }
     
179.   QScrollBar::left-arrow:horizontal:hover,QScrollBar::left-arrow:horizontal:pressed {
     
180.       image: url(qss/left_arrow_hover.png);
     
181.   }
     
182. 
     
183.   QScrollBar::right-arrow:horizontal{
     
184.       border: 1px solid transparent;
     
185.       background: #21252F;
     
186.       image:url(qss/right_arrow.png);
     
187.       width: 7px;
     
188.       height: 7px;
     
189.   }
     
190. QScrollBar::right-arrow:horizontal:hover,QScrollBar::right-arrow:horizontal:pressed{
     
191.     image: url(qss/right_arrow_hover.png);
     
192. }
     
193. QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     
194.       background: none;
     
195. }

复制代码

一叶知秋

资源来自于网络，但我也忘了在哪下的了。。。

z55716368

一叶知秋 发表于 2015-5-4 13:15
资源来自于网络，但我也忘了在哪下的了。。。

额 谢谢了 这么多........

z55716368

我贴的第一张图片可以拉成这样 我问问这个是怎么实现的 我一直做不出来？

z55716368

一叶知秋 发表于 2015-5-4 13:15
资源来自于网络，但我也忘了在哪下的了。。。

再帮我看一下28楼的那个改变是怎么做的、、、

一叶知秋

建议你看一下亚飞老师关于布局管理的那一章，这么给你解释太累了。。。