How to realize the function of fade the "HintText" automatically in my Qml project?



  • Well,I want to realize this function.There is a search box,which accepts user's textinput.When there is no input(in other words,TextInput's "text" is null string ""),the hint-text is visible ; when user types one character or more,the hint-text is invisible.I want to use signal&slot to realize it ,but I don't know how to emit the signal.
    The code:

    import QtQuick 2.2
    
    Rectangle{
        width: 300;height:50
        color:"#787878"
    
        Rectangle{
            anchors.fill: parent
            anchors.margins: 5
            radius: 5
    
            Text{
                id:hintHere
                text:"Here is Hint"
                font.pixelSize: 22
                color:"lightgray"
                anchors{
                    left:parent.left
                    leftMargin: 5
                    verticalCenter: parent.verticalCenter
                }
                visible:true
            }
    
            TextInput{
                id:input
    
                signal thereIsAtLeastOneChar  //monitor if user has input some character(s)
                signal thereIsZeroChar //monitor if user has not input any character
    
                focus:true
                font.pixelSize: 22
                anchors{
                    fill:parent
                    left:parent.left
                    leftMargin: 5
                }
                verticalAlignment: TextInput.AlignVCenter
    
                onThereIsAtLeastOneChar: hintHere.visible=false  //if user has input some character(s) ,hint text should fade
                onThereIsZeroChar: hintHere.visible=true  //if user has not input any character,hint text should appear
    
            }
        }
    }
    

  • Moderators

    Hi @DidaHarp,
    I think what you are looking for is the onTextChanged signal handler. Therein you can check whether the text is empty.

    TextInput {
        onTextChanged: {
            if(text)
                console.log(text)
        }
    }
    


  • @p3c0 Yep!Got the function that I want ! Cool!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.