Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Conditional alignment in a delegate based on text width?
Forum Updated to NodeBB v4.3 + New Features

Conditional alignment in a delegate based on text width?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
8 Posts 3 Posters 1.8k Views 2 Watching
  • 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.
  • V Offline
    V Offline
    VRHans
    wrote on last edited by
    #1

    I have a listview that works great, and when a name that is very long is displayed, it is clipped properly.

    My problem is that if the text fits inside the width of the text control I would like it to be horizontally centered. If the text is too long and will be clipped, I want it aligned to the left so that you can read the start of the 'name' and the excessive portion is clipped only on the right.

    Text {
    	id: textName
    	x: 18
    	y: 6
    	width: 392
    	height: 28
    	color: "#ffffff"
    	text: ""
    	font.bold: true
    	font.pixelSize: 22
    	style: Text.Outline
    	clip: true
    	wrapMode: Text.NoWrap
    	verticalAlignment: Text.AlignVCenter				
    	horizontalAlignment: ( text.paintedWidth > width ) ? Text.AlignLeft : Text.AlignHCenter
    }
    

    This text declaration is inside of my delegate declaration like this:

    delegate:  Rectangle {
        ...some values
        Text {
            ...the text declaration shown above.
        }
    }
    

    I was expecting the conditional I placed in the horizontalAlignment property to get evaluated at least everytime the value of Text.text changed. Unfortunately, it never evaluates as anything other than false (and therefore always horizontally centering the text.)

    Event if I set the default value of text to some really long string, it acts as if text.paintedWidth is always less than the width.

    If I force the evaluation to be 'true' I get left justified text, e.g.:

    horizontalAlignment: ( true ) ? Text.AlignLeft : Text.AlignHCenter
    

    Is there something I'm missing?

    Thanks :)

    1 Reply Last reply
    0
    • V Offline
      V Offline
      VRHans
      wrote on last edited by
      #2

      I was misusing things... Here's how to do this (at least how I just found how to do this - I am interested in other solutions as well)

      Text {
      	id: textName
      	x: 18
      	y: nTextStartingY
      	width: 392
      	height: 28
      	color: "#ffffff"
      	text: name
      	font.bold: true
      	font.pixelSize: 22
      	style: Text.Outline
      	clip: true
      	wrapMode: Text.NoWrap
      	verticalAlignment: Text.AlignVCenter
      
      	FontMetrics {
      		id: textNameFontMetrics
      		font: textName.font
      	}
      
      	horizontalAlignment: ( textNameFontMetrics.boundingRect( textName.text ).width >= textName.width ) ? Text.AlignLeft : Text.AlignHCenter
      }
      

      Works nicely for me.

      1 Reply Last reply
      0
      • L Offline
        L Offline
        literA2
        wrote on last edited by literA2
        #3

        You can simply compare the text implicitWidth to its parent's width which serves as its holder.

        Item {
             x: 18
             y: nTextStartingY
             width: 392
             height: 28
        
            Text  {
                anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
                horizontalAlignment: implicitWidth >= parent.width ? Text.AlignLeft : Text.AlignHCenter
             }
          }
        

        Hope this helps.

        1 Reply Last reply
        0
        • V Offline
          V Offline
          VRHans
          wrote on last edited by
          #4

          I will give that a try, thanks! It would be much less brute force than my current solution.

          L 1 Reply Last reply
          0
          • V VRHans

            I will give that a try, thanks! It would be much less brute force than my current solution.

            L Offline
            L Offline
            literA2
            wrote on last edited by literA2
            #5

            @VRHans I just modified my answer because i noticed that you have a specific width set on the Text component. As you noticed, I created an Item which serves as the holder/container and anchored the Text to it.

            1 Reply Last reply
            0
            • ? Offline
              ? Offline
              A Former User
              wrote on last edited by
              #6

              Hi! You can also use contentWidth:

              horizontalAlignment: ( contentWidth > width ) ? Text.AlignLeft : Text.AlignHCenter
              
              1 Reply Last reply
              1
              • V Offline
                V Offline
                VRHans
                wrote on last edited by
                #7

                @Wieland - For some reason I can't mark your reply as the answer/solution, the option isn't available.

                ? 1 Reply Last reply
                0
                • V VRHans

                  @Wieland - For some reason I can't mark your reply as the answer/solution, the option isn't available.

                  ? Offline
                  ? Offline
                  A Former User
                  wrote on last edited by
                  #8

                  @VRHans Yes, the new forum (it's actually not that new anymore :)) doesn't support this. Voting good answer up with the thump up button is the way to go.

                  1 Reply Last reply
                  0

                  • Login

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