0

I'd like to change the font size of a Button. I used the solution from here

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
  id: container
  width: 800
  height: 800

  Button {
    id: cmdQuit
    text: qsTr("Quit")
    width: 100
    height: 100
    style: ButtonStyle {
      label: Text {
        renderType: Text.NativeRendering
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pointSize: 20
        text: cmdQuit.text
      }
    }
  }
}

Unfortunately, when I do this, I lose the Android native look and get a fallback base look. Is there any way to change the font size without losing the native style on Android?

I want to change the look of a single button and want the other buttons to remain the same. I'm using Qt5 (C++) with QML. I don't want a solution which involves copying the whole QtQuick/Controls/Styles/Android folder - I can do it on my own but it's awful

Community
  • 1
  • 1
marmistrz
  • 5,974
  • 10
  • 42
  • 94

3 Answers3

6

WARNING : this solution relies on modifying an internal object and is not guaranteed to work across different Qt versions or platforms

If you absolutely want to modify only a property of an object that is not exposed, you can still access it with the children property of an Item (or resources/data).

One handy function to call on Component.omCompleted is one that dumps the hierarchy of an Item, here is an example implementation :

function dumpHierarchy(item, level) {
    level = level | 0;
    for (var index = 0; index < item.children.length; ++index) {
        var child = item.children[index];
        print(Array(level*2 + 1).join(" ")+ index +": "+child);
        dumpHierarchy(child, level+1);
    }
}

and what it outputs on Android and Qt 5.5 for a Button:

0: QQuickLoader(0xab87c768)
  0: QQuickLoader_QML_44(0xab7a84f0)
  1: QQuickItem_QML_53(0xab8c8d60)
    0: DrawableLoader_QMLTYPE_51(0xab8bb088)
      0: StateDrawable_QMLTYPE_65(0xab949420)
        0: DrawableLoader_QMLTYPE_51(0xab936ea0)
          0: NinePatchDrawable_QMLTYPE_67(0xab955c90)
            0: QQuickAndroid9Patch_QML_68(0xab913608)
        1: QQuickLoader_QML_66(0xab924838)
    1: QQuickRowLayout(0xab8b03a0)
      0: QQuickImage(0xab8b0960)
      1: LabelStyle_QMLTYPE_50(0xab8c1758)
1: QQuickMouseArea_QML_46(0xab887028)

Here we can see the hierarchy position of the LabelStyle which is of interest to us. If you want to do it quick and dirty you could just add this in your Button element : 

Component.onCompleted: children[0].children[1].children[1].children[1].font.pixelSize = 50

but this isn't really maintainable, a more acceptable solution is to traverse the children hierarchy of our Button and find the font to modify.

I've put a function findFont in a working example Application :

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {
    id: app
    visible: true
    width: 640
    height: 480

    function findFont(object) {
        if (object.font)
            return object.font;
        var font = null;
        for (var index = 0; index < object.children.length && !font; ++index)
            font = findFont(object.children[index]);
        return font;
    }

    Column {
        anchors.centerIn: parent

        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Button 1"
            width: 300
            height: 100
        }
        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Button 2"
            width: 300
            height: 100

            Component.onCompleted: {
                findFont(this).pixelSize = 50;
                // On Android and Qt 5.5, this is equivalent :
                //children[0].children[1].children[1].children[1].font.pixelSize = 50;
            }
        }
    }
}
GrecKo
  • 6,615
  • 19
  • 23
  • Well, in fact it will modify the first found font. It works perfectly when we have an object with only one font. Would it be possible to extend this answer to modify all fonts? – marmistrz Sep 17 '15 at 13:59
  • The first font found in the `Button`, which should be the button's font unless you've added other components in your button. To modify the font of all buttons, just create a MyButton.qml file and add the modifications mentioned in my answer. Then you need to use `MyButton { }`, instead of `Button { }` – GrecKo Sep 17 '15 at 14:05
  • Well, I meant another thing. This answer will work perfectly with `Button`s and similar objects. But some day I may want to change the fonts of a QtQuick component which has multiple labels. For example, double all fonts of a `TableView`. Then this answer would not work - it would change only the first font found. Since you've worked out a solution for this case, why not make a more general solution too? This is one of the most frustrating limitations of Qt on Android. – marmistrz Sep 17 '15 at 14:10
  • 1
    If you want that, make findFont returns an array of the fonts found and not stop on the first font found. But honestly I feel that this isn't really clean and you should probably use your own style (written from scratch or copied from the Qt ones like you said in your question) – GrecKo Sep 17 '15 at 14:23
0

Have you tried using Usefont.pixelSize

Or tried the following

QFont f( "Arial", 10, QFont::Bold);
textLabel->setFont( f);
Sprout
  • 630
  • 1
  • 5
  • 22
0

You can try Button.setTextSize() Button inherits from the TextView. If you are doing it in design time you could use the textSize property. If you are doing it in design time, you could do apply the textSize as following:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    android:layout_gravity="center"
    android:textSize="25sp"
    />

When you do it from the java code, you could do the following:

// Set textsize to 20px here
button.setTextSize(TypedValue.COMPLEX_UNIT_PX, 20);
Phani
  • 1,851
  • 2
  • 15
  • 28