×
Namespaces

Variants
Actions
Revision as of 04:14, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Customizing QSlider

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

This article shows how to create custom slider based on QWidget.

Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s): S60 5th Edition
Symbian
Article
Keywords: QSlider
Created: divanov (20 May 2010)
Last edited: hamishwillee (11 Oct 2012)

Source Code

#include <QtGui>
 
int main (int argc, char **argv)
{
QApplication app(argc, argv);
app.setStyleSheet("QSlider { height: 30px}"
"QSlider::groove:horizontal {"
"border: 1px solid #999999;"
"background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);"
"height: 26px;"
"margin: 0 0 0 0;}"
"QSlider::handle:horizontal {"
"background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);"
"border: 1px solid #5c5c5c;"
"width: 30px;"
"margin: -2px 0 -2px 0;"
"border-radius: 3px;}");
QWidget widget;
QVBoxLayout *layout = new QVBoxLayout;
QSlider *slider;
slider = new QSlider(Qt::Horizontal);
layout->addWidget(slider, 0, Qt::AlignBottom);
slider = new QSlider(Qt::Horizontal);
layout->addWidget(slider, 0, Qt::AlignTop);
layout->setSpacing(0);
widget.setLayout(layout);
widget.show();
 
return app.exec();
}

setStyleSheet() holds the application style sheet. QSlider is used to create the slider, and QVBoxLayout to create the layout. First we add the slider to the layout and then call setLayout() to set the layout to the widget. We make spacing between the sliders with setSpacing(). Finally show() is called to display the widget.


Slider.png

This page was last modified on 11 October 2012, at 04:14.
92 page views in the last 30 days.