Qt Widget app in BB10
-
Qt Widget apps look ugly by default for today. But this will not stay like this. There will be a native style which will make Qt widgets look as close as possible to the native ones (you get those using Cascades). I hope very much we will get this done on time for the final release of the NDK before the launch in Jan...
Before that you can apply a simple CSS style:
@ this->setStyleSheet("QWidget{ "
"font-size: 60px; "
"font-family: 'Slate'; "
"background:'black';"
"color: 'white';"
"}"
"QPushButton {"
"background:'#121212';"
"border-radius: 10;"
"border: 2px solid gray;"
"}"
"QListWidget {"
"background:'#121212';"
"border-radius: 10;"
"border: 2px solid gray;"
"}"
"QLineEdit {"
"border-radius: 10;"
"border: 2px solid gray;"
"}"
"QListWidgetItem {"
"font-size: 30px; "
"}"
);
@ -
Hi Vladimir
Finally I received my Alpha device. I tried the CSS style they look good.
Can you tell me if the native style made it to last ndk version ? If so how to apply it ? I'm using QtCreator configured for ndk. If not, can you recommend a CCS for a toolbar menu ?Thanks
João de Deus -
Since, at least, the Gold BlackBerry 10 NDK there are a BB10 Light and Dark styles. They look pretty close to a native look and feel, however there are some parts that are not finished yet: menus have dark text on dark background and too small for finger selection, icons on the toolbar and buttons are too small, drop downs look a bit weird, QTableView borders aren't visible, etc. However, it was a good starting point making my QWidget app look less alien. Luckily, I was able to fix most of these issues by creating a proxy style + writing a style sheet. You can also make your app using this style by default by passing "-style bb10dark", if I remember correctly, parameter on start-up.
Unfortunately, I'm not at home ATM so I can't copy-paste the code and style sheet I wrote. Will do this later when I get home.
-
[quote author="Bomb3rman" date="1358446815"]QApplication::setStyle("bb10dark")
or
QApplication::setStyle("bb10light")should also work.[/quote]
Yes, but it won't work with QProxyStyle approach I mentioned earlier: if you try calling QApplication::setStyle() twice (first to select BB 10 style and second to set proxy style) it crashes. At least, that's how it was for me.
-
So, here is the code I used to "fix" current BB10 Dark style.
The style sheet:
@
app.setStyleSheet(
"QMenuBar {"
" background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #444 stop:0.65 #333, stop:1 #444);"
" border-bottom: 1px solid darkgray;"
" spacing: 1px;"
"}"
"QMenuBar::item {"
" padding: 0.3em 0.5em;"
"}"
"QMenuBar::item:selected {"
" background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #00a8df stop:0.65 #00889f, stop:1 #00a8df);"
"}"
"QMenu {"
" border: 1px solid darkgray;"
"}"
"QMenu::item {"
" padding: 0.4em 0.5em 0.4em 1.4em;"
" color: white;"
" font-size: 9pt;"
" background-color: #121212;"
"}"
"QMenu::item:selected {"
" background-color: #00a8df;"
"}"
"QMenu::item:disabled {"
" color: darkgray;"
" background-color: #121212;"
"}"
"QMenu::icon {"
" margin-left: 0.85em;"
"}"
"QTabBar {"
" background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #444 stop:0.65 #333, stop:1 #444);"
" border-bottom: 1px solid darkgray;"
" spacing: 1px;"
"}"
"QTabBar::tab {"
" padding: 0.3em 0.5em;"
"}"
"QTabBar::tab:selected {"
" background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #00a8df stop:0.65 #00889f, stop:1 #00a8df);"
" padding: 0.3em 0.5em;"
"}"
"QTableView {"
" gridline-color: darkgray;"
"}"
"QTableView::item {"
" padding: 0 0.5em;"
"}"
"QComboBox {"
" padding: 0.5em 1.3em 0.5em 0.5em;"
"}"
"QTextBrowser {"
" background-color: lightgray;"
" color: black;"
"}"
);
@The proxy style:
@
#include <QProxyStyle>class BB10ProxyStyle: public QProxyStyle
{
public:
int pixelMetric(PixelMetric metric, const QStyleOption *option, const QWidget *widget) const
{
switch (metric) {
case QStyle::PM_ButtonIconSize:
return 42; // Makes icons in QPushButton bigger
case QStyle::PM_SmallIconSize:
return 42; // Makes icons in QMenu bigger
default:
return QProxyStyle::pixelMetric(metric, option, widget);
}
}
int styleHint(StyleHint hint, const QStyleOption *option, const QWidget *widget, QStyleHintReturn *returnData) const
{
if (hint == QStyle::SH_UnderlineShortcut)
return 0; // Don't underline shortcuts in menu and on buttons
return QProxyStyle::styleHint(hint, option, widget, returnData);
}
};int main(int argc, char *argv[])
{
QApplication::setStyle(new BB10ProxyStyle);
QApplication app(argc, argv);
...
}
@And to have bb10dark style set as the default when application starts, add the following to your bar-descriptor.xml:
@
<?xml version='1.0' encoding='utf-8' standalone='no'?>
<qnx >
...
<arg>-style</arg>
<arg>bb10dark</arg>
...
</qnx>
@Here's how it looks:
Plain BB10 Dark style: https://l-homes.org/~leppa/bb10/IMG_00000017.png
With style sheet: https://l-homes.org/~leppa/bb10/IMG_00000018.png
With style sheet and proxy: https://l-homes.org/~leppa/bb10/IMG_00000019.pngEdit: added QTextBrowser styling rules.
