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) {
                              openDrawerFunction();
                          }
                      }
                      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:

    It's

        Text{
            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)
        {
            if(!hpcManager.chargerIsOccupied())
            {
                hpcManager.setCurrentCharger(id)
                t.running = false
            }
            else
            {
                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