First, you need to download the plugin... in a way or another. :) You can, for example, clone the qt/qtquickcontrols2.git repo, or grab qtquickcontrols2-everywhere-src-5.10.1.zip from download.qt.io. Then, browse to src/imports/controls/imagine/design and double click 9-patch-export.sketchplugin. Sketch should inform that the 9-patch export plugin has been installed.

You can export individual image assets from the Export pane, or export all exportable image assets with the Export tool button in the top right corner. The script callback gets called either way, and 9-patch image assets are simply detected by the ".9" suffix in the image asset export names.

PS. Yeah, the whole process should be documented and there should be a simple download link in the docs. I guess somebody forgot something. :)

OK
found a solution, for those interested, it's based on the fact that maybe the root item can't access the handle but the handle on the other hand can access the root item. So I created a binding between handle's state and slider's state :

Slider { anchors { fill: parent margins: 10; } id: slider value: 0.5 style : SliderStyle { groove: Rectangle { id: background /* ... */ } handle: Rectangle { id: handle /* ... */ opacity: 0.0 // Bind slider's state and handle's state state: slider.state == "hovered" ? "hovered" : "" states : [ State { name: "hovered" PropertyChanges { target: handle ; opacity: 1.0 } } ] } } MouseArea { anchors.fill: parent hoverEnabled: true onEntered: { slider.state = "hovered" } onExited: { slider.state = "" } } states: [ State { name: "hovered" } ] }

@mrjj Thank you very much! I have researched and been able to do what I was looking for. Here's what I did:

def drawPrimitive(self, element, opt, painter, widget): if element == QStyle.PE_PanelButtonTool: pressed = (opt.state & STATE_SUNKEN | opt.state & STATE_ON) color = QColor("#323232") if pressed: color = QColor("#222222") elif opt.state & STATE_ENABLED and opt.state & STATE_MOUSEOVER: color = QColor("#4e4e4e") painter.fillRect(opt.rect, color) elif element == QStyle.PE_IndicatorArrowDown or \ element == QStyle.PE_IndicatorArrowUp: r = opt.rect size = min(r.height(), r.width()) image = QImage(size, size, QImage.Format_ARGB32_Premultiplied) image.fill(Qt.transparent) image_painter = QPainter(image) image_painter.setPen(QColor("#bdbfc0")) image_painter.setBrush(QColor("#bdbfc0")) polygon = QPolygon() polygon.append(QPoint(0, r.width() * 0.5)) if element == QStyle.PE_IndicatorArrowDown: polygon.append(QPoint(size, size * 0.6)) polygon.append(QPoint(size / 2, size * 0.1)) else: polygon.append(QPoint(size, size * 0.5)) polygon.append(QPoint(size / 2, size * 0.9)) image_painter.drawPolygon(polygon) image_painter.end() pixmap = QPixmap.fromImage(image) painter.drawPixmap(r.x() + (r.width() - size) / 2, r.y() + (r.height() - size) / 2, pixmap) else: QProxyStyle.drawPrimitive(self, element, opt, painter, widget)

Regards!

@raven-worx
ah right, couldn't be easier. :)
Maybe I'll come up with another solution for my issue like subclassing and repainting the tabbar. For now that'll do the trick.
Cheers

Thank you for answer :)

@SGaist Thanks. That's definitely another option. I suppose these approaches are as good as it gets for having a toolbar item auto-adjust to horizontal vs. vertical. Thanks again.

Hi and welcome to devnet,

Thanks for sharing !

@Joel-Bodenmann said:

As this seems to be a bit more complex than it looked initially I will postpone this and just life with rectangular boxes for now :)

Sure, if this is an option. However, implementing a class with a single function shouldn't be very complex ;)

class MyRoundedCornerEffects { public: MyRoundedCornerEffects(QObject * parent = NULL) : QObject(parent) { } virtual draw(QPainter * painter) { painter->setPen(QPen(Qt::black, 1)); painter->setBrush(Qt::red); painter->drawRoundedRect(boundingRect(), 10, 10); } }; class MyWidgetWithEffect : public QWidget { public: MyWidgetWithEffect(QWidget * parent) : QWidget(parent) { setAttribute(Qt::WA_TranslucentBackground); setGraphicsEffect(new MyRoundedCornerEffects(this)); } };

Yup, this is a code review: https://codereview.qt-project.org/#/c/139174/

Thanks @SGaist, for updating the link for us, and thanks @kouhzadi for reporting this!

Hi,

You should rather ask this on the android development mailing list. You'll find there Qt's Android port developers/maintainers (this forum is more user oriented)

@p3c0 Thanks for the suggestion. Sorry about the delay in replying.

I can achieve a good result by dividing by 1.1 instead of 2. Using 1.1 I get blue box just a little bit smaller than the radio button itself.

For some reason if I make the ration 1.01, the blue box exceeds the size of the radio button.

If I simple divide by 1.0, the application fails to get out of bed.

Thanks

James

@shengfa.zhang
try to call on tabBar().adjustSize() each time, when drugging is over...
I had the same problem...

@maximo
Agree.
I wonder if there is something secret I missed in some Doc.

I have a similar problem too. I want to change the font size and I get a fallback base style.

I've already reported a bug against Qt. Maybe we could find another workaround in the meantime.

All the android styling seems done by the AndroidStyle singleton object coming from QtQuick.Controls.Styles.Android 1.0 module.

They do, for example

Style { readonly property Button control: __control property Component panel: Item { id: panel readonly property var styleDef: control.checkable ? AndroidStyle.styleDef.buttonStyleToggle : AndroidStyle.styleDef.buttonStyle // some more code }

see ButtonStyle.qml

But, if we look further, styleDef seems specific to the Android drawables, see this commit

And the Android Button.qml seems to use something like this for setting the style

style: Settings.styleComponent(Settings.style, "ButtonStyle.qml", button)

But I don't know where the settings come from

See Button.qml

Do you have any idea what to do with it? I don't see any other option that copying the Android Styles tree and adapting it to our needs. But it's awful.

Hi @Pheelbert,
if you meant changing the background of dropdown list then you will need to do it in __dropDownStyle private property for now.
eg: inside ComboBoxStyle

__dropDownStyle: MenuStyle { itemDelegate.label: Text { width:200 height: 80 color: "blue" text: styleData.text } itemDelegate.background: Rectangle { color: styleData.selected ? "darkGray" : "transparent" } }

And to add an arrow you can just use an Image inside the background: Rectangle { component.