Gradient Buttons (+/-) for lists on Mac OS X, others
-
Hello,
I am attempting to write an application in Qt for both Mac OS X and Windows. In Cocoa on Mac OS X, there is something that Apple calls "Gradient Buttons". They are used for manipulating lists and column views, and are "standard" (OS-provided) buttons on that platform. They are "described in the Apple HIG":http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGControls/XHIGControls.html#//apple_ref/doc/uid/TP30000359-SW12 and I was wondering if Qt provided anything similar. I searched all of: the Internet (using keywords "gradient button qt" and "add and delete standard buttons in qt"), these forums, and Qt Assistant, and came up empty-handed.
What I personally think would be best is something like QPushButtons with QPixmaps of the + and - symbols, at least on Windows. My concern is that on Mac OS X they will not be square or aligned as they are in the Apple HIG and then the app will not look 'native'.
My question is: Does Qt provide something similar to Apple's gradient buttons? Or would I be able to set up a QPushButton so that it is at least very similar-looking on the Mac OS X platform?
Thank you for your time.
-
I just read the HIG, and I am not sure what is so special about them really. To be honest, I think they look a bit alien to OSX in the examples shown on that page, if you ask me (and I know you don't). I think a QToolButton can work just as well? If you want to manipulate their shape, you might want to look into Qt Style Sheets.
-
When there are several buttons in a strip of gradient buttons on OS X, they have a single-line frame between them. Because of that, they look like segments of a single control.
To make this kind of buttons, I used QToolButton (not a QToolBar, just buttons in layouts), and styled them.
I used 4 styles:
the first (left) button in a strip.
buttons in the middle in a strip.
the last (right) button in a strip.
a standalone button.
These 4 styles draw different frames.
This is what I did:
- A fragment of the style that I assign to the instance of QApplication (these styles use stretchable images that you need to draw or grab from OS X)
@//
// == QToolButton: segmented
//
"QToolButton[sgm_single="true"] { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrSUp.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_single="true"]:pressed { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrSDown.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_left="true"] { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrLUp.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_left="true"]:pressed { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrLDown.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_left="true"]:checked { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrLChecked.png) 4 4 4 4 ; "
" color: white; "
"} "
"QToolButton[sgm_middle="true"] { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrMUp.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_middle="true"]:pressed { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrMDown.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_middle="true"]:checked { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrMChecked.png) 4 4 4 4 ; "
" color: white; "
"} "
"QToolButton[sgm_right="true"] { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrRUp.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_right="true"]:pressed { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrRDown.png) 4 4 4 4 ; "
"} "
"QToolButton[sgm_right="true"]:checked { "
" border-width: 4px; "
" border-image: url(:/img/BPicTbrRChecked.png) 4 4 4 4 ; "
" color: white; "
"} "
@- In a constructor of a dialog with these special buttons
@
// a single button
ui->btnWkPerfInfo->setProperty("sgm_single", true);
//
// 3 buttons in a strip
ui->btnDayAdd->setProperty("sgm_left", true);
ui->btnDayCopy->setProperty("sgm_middle", true);
ui->btnDayDelete->setProperty("sgm_right", true);
@