CODEWITHSUNDEEP
qtqmlqt-quick
user1054922
user1054922

Reputation: 2165

Change Font Size of Button in Qt QML

How can the font size of the text in a Button control be set in QML? The designer has not option, and 'font' is not a valid property of Button.

Button {
    id: cmdQuit
    text: qsTr("Quit")
    width: 64
    height: 32
}

Upvotes: 16

Views: 29237

Answers (3)

fxam
fxam

Reputation: 3982

You set the Button's style property:

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: 64
    height: 32
    style: ButtonStyle {
      label: Text {
        renderType: Text.NativeRendering
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.family: "Helvetica"
        font.pointSize: 20
        color: "blue"
        text: control.text
      }
    }
  }
}

Upvotes: 30

Chris
Chris

Reputation: 2046

For QtQuick 2, you have to use the contentItem property as shown here: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-button

import QtQuick 2.12
import QtQuick.Controls 2.12

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font.pointSize: 20
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }
}

Upvotes: 3

Ad5001
Ad5001

Reputation: 753

This is an old question, but since it comes first in search engines I'm providing an update on the situation.

For QtQuick2, unlike what Chris said, you don't need to use the contentItem property anymore. You can access the font property directly from Button.

Example:

Button {
    id: btn
    text: "Test"
    font.pixelSize: 18
}

Upvotes: 3

Related Questions