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. How to wrap text around box / square ?
Forum Updated to NodeBB v4.3 + New Features

How to wrap text around box / square ?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 920 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.
  • 3 Offline
    3 Offline
    3rdnu883
    wrote on last edited by
    #1

    How can I wrap text around box / square like in the image ?

    0_1554828431214_textwrapimage.png

    This is what I have:

    Item { id: cbox
    x: Theme.horizontalPageMargin
    width: parent.width - 2*Theme.horizontalPageMargin
    height: childrenRect.height

       Label { id: cbody
               text: 'Montes auctor porttitor taciti ut facilisis penatibus massa. Mollis. Netus penatibus montes eleifend. Volutpat dis. Magna magna neque curabitur. Ipsum lacinia. Cubilia nulla eros felis viverra pharetra netus laoreet fames. Montes auctor porttitor taciti ut facilisis penatibus massa. Mollis. Netus penatibus montes eleifend. Volutpat dis. Magna magna neque curabitur. Ipsum lacinia. Cubilia nulla eros felis viverra pharetra netus laoreet fames.'
    
               font.pixelSize: Theme.fontSizeSmall
               color: Theme.secondaryColor
               wrapMode: Text.WordWrap
               anchors { top: cbox.top
                         left: cbox.left
                         right: cbox.right
                         rightMargin: Theme.paddingSmall
               }
       }
    
       Label { id: clogo
               horizontalAlignment: cbox.AlignRight
               anchors { top: cbox.top
                         right: cbox.right
                         rightMargin: Theme.paddingSmall
               }
    
               BackgroundItem {
    
                                Image { id: cimage
                                        width: cbox.width / 3
                                        fillMode: Image.PreserveAspectFit
                                        source: "../images/lcimage.png"
                                }
               }
       }
    

    }

    1 Reply Last reply
    0
    • GrecKoG Offline
      GrecKoG Offline
      GrecKo
      Qt Champions 2018
      wrote on last edited by
      #2

      You can use Text's lineLaidOut signal :

      import QtQuick 2.9
      import QtQuick.Window 2.2
      import QtQuick.Controls 2.2
      
      Window {
          visible: true
          width: 500
          height: 400
      
      
          Label {
              anchors.fill: parent
              text: 'Montes auctor porttitor taciti ut facilisis penatibus massa. Mollis. Netus penatibus montes eleifend. Volutpat dis. Magna magna neque curabitur. Ipsum lacinia. Cubilia nulla eros felis viverra pharetra netus laoreet fames. Montes auctor porttitor taciti ut facilisis penatibus massa. Mollis. Netus penatibus montes eleifend. Volutpat dis. Magna magna neque curabitur. Ipsum lacinia. Cubilia nulla eros felis viverra pharetra netus laoreet fames.'
              wrapMode: Text.WordWrap
              font.pixelSize: 20
              padding: 16
              onLineLaidOut: {
                  if (line.y + topPadding <= rect.y + rect.height)
                      line.width = rect.x - leftPadding - rightPadding;
              }
      
          }
          Rectangle {
              id: rect
              color: "grey"
              anchors {
                  top: parent.top
                  right: parent.right
                  margins: 16
              }
              height: 200
              width: 200
          }
      }
      

      lineLaidOut

      3 1 Reply Last reply
      8
      • GrecKoG GrecKo

        You can use Text's lineLaidOut signal :

        import QtQuick 2.9
        import QtQuick.Window 2.2
        import QtQuick.Controls 2.2
        
        Window {
            visible: true
            width: 500
            height: 400
        
        
            Label {
                anchors.fill: parent
                text: 'Montes auctor porttitor taciti ut facilisis penatibus massa. Mollis. Netus penatibus montes eleifend. Volutpat dis. Magna magna neque curabitur. Ipsum lacinia. Cubilia nulla eros felis viverra pharetra netus laoreet fames. Montes auctor porttitor taciti ut facilisis penatibus massa. Mollis. Netus penatibus montes eleifend. Volutpat dis. Magna magna neque curabitur. Ipsum lacinia. Cubilia nulla eros felis viverra pharetra netus laoreet fames.'
                wrapMode: Text.WordWrap
                font.pixelSize: 20
                padding: 16
                onLineLaidOut: {
                    if (line.y + topPadding <= rect.y + rect.height)
                        line.width = rect.x - leftPadding - rightPadding;
                }
        
            }
            Rectangle {
                id: rect
                color: "grey"
                anchors {
                    top: parent.top
                    right: parent.right
                    margins: 16
                }
                height: 200
                width: 200
            }
        }
        

        lineLaidOut

        3 Offline
        3 Offline
        3rdnu883
        wrote on last edited by
        #3

        @GrecKo Yes thank you very much that helped a lot !

        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