خانه برنامه نویسی QSpinBox استایل عمودی و افقی در کیوت
QSpinBox استایل عمودی و افقی در کیوت

QSpinBox استایل عمودی و افقی در کیوت


۶ فروردین ۱۳۹۹
رضا احمدی
171 بازدید
دسته بندی : Qt creator , برنامه نویسی

در این مطلب دو استایل شیت جدید برای ابجکتهای QSpinBox می نویسیم که یکی آن را به صورت عمودی و دیگری آن را بصورت افقی نمایش میدهد.

برای قرار دادن استایل شیت بر روی آبجکتهای کیوت دو راه وجود دارد یکی از طریق کد و یکی از طریق طراحی فرم. در حالت کد با فراخوانی متد setStyleSheet :

ui->spinBox->setStyleSheet("/*style here*/");

و از طریق فرم هم که روی شی راست کلیک کرده و گزینه change styleSheet را انتخاب کنید… ( آموزش استایل شیت ها در کیوت )

میخواهیم دو اسپین باکس مانند زیر طراحی کنیم:

QSpinBox استایل عمودی و افقی در کیوت
QSpinBox استایل عمودی و افقی در کیوت

1-استایل شیت عمودی :

  1. QSpinBox {
  2.     padding-top: 30px; /* make room for the arrows */  
  3. 	padding-bottom:30px;
  4.     border:3px solid #0ec2ff;
  5. 	border-radius:8px;
  6. 	min-width: 40px;
  7. 	max-width: 40px;
  8. 	font: 22pt "Arial";font-weight:bold;
  9. 	qproperty-alignment: AlignCenter;
  10. }
  11.  
  12. QSpinBox::up-button {
  13.     subcontrol-origin: border;
  14.     subcontrol-position: top center;
  15. 	top:0px;
  16.     width: 40px;
  17. 	height:30px;  
  18.     border: 2px solid #0ec2ff;
  19. 	border-top-left-radius:8px;
  20. 	border-top-right-radius:8px;
  21. 	background:#0ec2ff url(:/img/up.png) center no-repeat;
  22. }
  23.  
  24. QSpinBox::up-arrow {
  25.  
  26.     width: 0px;
  27.     height: 0px;
  28. }
  29.  
  30. QSpinBox::down-button {
  31.     subcontrol-origin: border;
  32.     subcontrol-position: bottom center;
  33.  
  34.     width: 40px;
  35. 	height:30px;  
  36.     border: 2px solid #0ec2ff;
  37. 	border-bottom-left-radius:8px;
  38. 	border-bottom-right-radius:8px;
  39. 	background:#0ec2ff url(:/img/down.png) center no-repeat;
  40.  
  41. }
  42.  
  43. QSpinBox::down-button:hover,QSpinBox::up-button:hover {
  44. 	background-color:#0eb2cc;
  45. }
  46.  
  47. QSpinBox::down-arrow {    
  48.     width: 0px;
  49.     height: 0px;
  50. }

2-استایل شیت افقی :

  1. QSpinBox {
  2.     border:3px solid #0ec2ff;
  3. 	border-radius:8px;	
  4. 	min-height:40px;
  5. 	max-height:40px;
  6. 	font: 22pt "Arial";font-weight:bold;
  7. 	qproperty-alignment: AlignCenter;	
  8. }
  9.  
  10. QSpinBox::up-button {
  11.     subcontrol-origin: border;
  12.     subcontrol-position: top right;
  13. 	top:0px;
  14.     width: 30px;
  15. 	height:40px;  
  16.     border: 2px solid #0ec2ff;
  17. 	border-top-right-radius:8px;
  18. 	border-bottom-right-radius:8px;
  19. 	background:#0ec2ff url(:/img/right.png) center no-repeat;
  20. }
  21.  
  22. QSpinBox::up-arrow {
  23.  
  24.     width: 0px;
  25.     height: 0px;
  26. }
  27.  
  28. QSpinBox::down-button {
  29.     subcontrol-origin: border;
  30.     subcontrol-position: top left;
  31.     width: 30px;
  32. 	height:40px;  
  33.     border: 2px solid #0ec2ff;
  34. 	border-top-left-radius:8px;
  35. 	border-bottom-left-radius:8px;
  36. 	background:#0ec2ff url(:/img/left.png) center no-repeat;
  37. }
  38.  
  39. QSpinBox::down-button:hover,QSpinBox::up-button:hover {
  40. 	background-color:#0eb2cc;
  41.    }
  42.  
  43. QSpinBox::down-arrow {    
  44.     width: 0px;
  45.     height: 0px;
  46. }

نکته : در استایل های بالا برای قرار دادن علامت بالا و پایین یا چپ راست از 4 تا تصویر png استفاده شده؛ این تصاویر را به ریسورس فایل خود بی افزاید.

میتوانید استایل شیت ها را از ادرس زیر بررسی کنید:

https://doc.qt.io/qt-5/stylesheet-examples.html

مطالب مرتبط

 دیدگاهتان را بنویسید   

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *