Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to realize the function of fade the "HintText" automatically in my Qml project?

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

Scheduled Pinned Locked Moved General and Desktop
qmltextinputsignal & slot
3 Posts 2 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    DidaHarp
    wrote on 4 Jul 2015, 02:37 last edited by p3c0 7 Apr 2015, 04:33
    #1

    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
    
            }
        }
    }
    
    P 1 Reply Last reply 4 Jul 2015, 04:33
    0
    • D DidaHarp
      4 Jul 2015, 02:37

      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
      
              }
          }
      }
      
      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 4 Jul 2015, 04:33 last edited by
      #2

      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)
          }
      }
      

      157

      D 1 Reply Last reply 4 Jul 2015, 06:11
      1
      • P p3c0
        4 Jul 2015, 04:33

        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)
            }
        }
        
        D Offline
        D Offline
        DidaHarp
        wrote on 4 Jul 2015, 06:11 last edited by
        #3

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

        1 Reply Last reply
        0

        3/3

        4 Jul 2015, 06:11

        • Login

        • Login or register to search.
        3 out of 3
        • First post
          3/3
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved