Qt World Summit: Submit your Presentation

How to change label text style dynamically

  • So I would like to change the text style of a label once you click on it.

    There is a title, click on it and it should open the drawer and change title text color and change anchors from right to left.

    Any help or a link would be really great.

    Thanks !

    This is what I have now:

    Item { 
        id: item
        width: parent.width
        height: parent.height   
        Label {
             id: title
             text: qsTrId("Title")
             font.pixelSize: Theme.fontSizeLarge
             height: Theme.fontSizeLarge
             color: Theme.secondaryHighlightColor
             property alias titletext: title.text
             anchors {
                    right: item.right
                    top: item.top
                    leftMargin: Theme.paddingLarge
                    rightMargin: Theme.paddingLarge
                    topMargin: Theme.paddingLarge
                    bottomMargin: Theme.paddingLarge
             MouseArea {
                      anchors.fill: title
                      onClicked: { drawer.open = !drawer.open
                          if (clicked) {
                      function openDrawerFunction() {
                          if (!drawer.open) title.titletext = "Title" ;
                          if (drawer.open) title.titletext = "Title   100°C – 200°C"

    I also not sure if that is the way to do it but opening/closing the drawer and changing title text works.

  • Ok that's kinda weird (but perhaps it's another Qt6 Bug?)

    I've got a similar approach:


            id: welcomeText
            anchors.top: chargingBackground.bottom
            anchors.horizontalCenter: chargingBackground.horizontalCenter
            anchors.topMargin: 20
            text: qsTr("Please select your charging pod!")
            property alias infoText: welcomeText.text
            font.pointSize: 20
            font.family: "Helvetica"
        function slotSelected(id)
                t.running = false
                console.log("No more parking spaces available!");
                welcomeText.infoText = "No more parking spaces available!";

    all in "root" space.
    It all works fine. The Console logs properly... but the text doesn't change. What am I missing here?
    I tried to apply the alias at different levels (because I found it written that way in other solutions) but I can't make it work.

Log in to reply