qml desktop components scaling

Question

I want to create a user interface qtquick2 that can be scaled and includes some desktop components. As mentioned in this blogpost the default rendering for qml/qtquick2 should use distance fields and not native text rendering. I tried to scale qt quick controls. The result is rather disappointing. I was testing on ubuntu 64 and qt-5.1.1. The text on the controls is looking bad but all text in standard qml elements (Text/TextEdit) is looking good when scaled.

This leads me to think that native rendering is the default now for desktop components. Can this be turned of?

Simon Warta Simon Warta · Accepted Answer · 2013-12-03T23:47:25

Setting render types of Qt Quick Controls will be available in Qt 5.2 using styles, e.g. in TextArea:

TextArea {
    /* ... */
    style: TextAreaStyle {
        renderType: Text.QtRendering
    }
}

Supported render types are:

Text.QtRendering
Text.NativeRendering (default)

See TextArea.qml, TextAreaStyle.qml.

For Button and ButtonStyle there is no public interface to set the render type directly in Qt 5.2. But what you can do, is overwrite the label with your own text component:

Button {
    id: theButton
    /* ... */
    style: ButtonStyle {
        label: Item {
        implicitWidth: row.implicitWidth
        implicitHeight: row.implicitHeight

        property var __syspal: SystemPalette {
            colorGroup: theButton.enabled ?
                        SystemPalette.Active : SystemPalette.Disabled
        }

        Row {
            id: row
            anchors.centerIn: parent
            spacing: 2
            Image {
                source: theButton.iconSource
                anchors.verticalCenter: parent.verticalCenter
            }
            Text {
                renderType: Text.NativeRendering /* Change me */
                anchors.verticalCenter: parent.verticalCenter
                text: theButton.text
                color: __syspal.text
            }
        }
    }
}

This code is inspired by the default label component of ButtonStyle.qml, modified and untested.

qml desktop components scaling

2 Answers