3

How can I set the font size of a TextField element in QML? wanna change size of the placeholderText and also for the text which the user enters.

I tried with a lot of ways without luck!

TextField {
    id: name_TextField; horizontalAlignment: Text.AlignHCenter;
    Layout.preferredWidth: parentCLayer.width * 0.90; Layout.preferredHeight: 50
    style: TextFieldStyle {
        font.pixelSize: 20  // This doesn't seem to work either
    }
    placeholderText: qsTr("Your name here")
}
Alaa Salah
  • 1,047
  • 3
  • 12
  • 28

2 Answers2

4

You can use the style property to customize your TextField. For example:

TextField {
    style: TextFieldStyle {
        font.pixelSize: 14
    }
}

I tried it and it works like a charm

folibis
  • 12,048
  • 6
  • 54
  • 97
1

Using the font member of TextField

The TextField type itself has a member font which contains an instance of the QML basic type font. It's sufficient to change the values of the inner-members of the font member of TextField to make the changes you want to see. Note that the color is provided by the TextField itself, not the font type.

TextField {
    font.pointSize: 20
    font.bold: true
    font.family: "Times New Roman"
    textColor: "red"
}

Default Style

Default TextField style

Custom Style

TextField style in 20pt, bold Times New Roman.

Using the style member of TextField

If you want to do more in-depth styling of the TextField you can attach a TextFieldStyle to the style member of the TextField. The TextFieldStyle instance also has a font member, though in the IDE it will complain that font has no members if you reference them with dot notation, this may be bug QTCREATORBUG-11186. I believe the proper way to assign values is using group notation by referencing the font property with inner-items as such:

TextField {
    style: TextFieldStyle {
        background: Rectangle {
            color: "red"
            radius: 10
        }
        font {
            bold: true
            pointSize: 22
        }
        textColor: "white"
    }
}

It could be that bug #11186 is a genuine bug, or maybe by design the font property is TextFieldStyle is null; someone with better Qt/QML knowledge could provide a clearer answer as to that part of the question.

This guide on styling may help: http://wiki.qt.io/Qml_Styling

Graham R. Armstrong
  • 116
  • 5
  • 1
    I believe that using `style` in Qt6 is now outdated for this and many other QML components as well. Using `font` member mentioned here is the way to go. – SCP3008 Aug 04 '21 at 15:47