Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved Text flow around image possible?

    QML and Qt Quick
    4
    10
    306
    Loading More Posts
    • 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.
    • SeDi
      SeDi last edited by

      I'd like to have a combination of image and text where the image is several lines high and the text flows around the image like this:

      IMGIMGIMGIMG     This text is floating around 
      IMGIMGIMGIMG     its image, perhaps it's e-
      IMGIMGIMGIMG     ven wrappable. Then, when
      IMGIMGIMGIMG     the bottom of the image has
                       finally been reached, the text
      shall continue beneath it in full available width
      and tell the whole story. Ideally, resizing the 
      element would dynamically re-flow the text.
      

      I have not found anything about such a (dtp-like) feature in the docs or in the Text example.

      • is that possible out "of the box"?

      • if not: what would be a good way to achieve this?

      J.Hilk 1 Reply Last reply Reply Quote 0
      • J.Hilk
        J.Hilk Moderators @SeDi last edited by

        @SeDi not that I ever did it myself, but I think you can archive that with A FLOW item in qml:
        https://doc.qt.io/qt-5/qml-qtquick-flow.html

        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

        Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


        Q: What's that?
        A: It's blue light.
        Q: What does it do?
        A: It turns blue.

        1 Reply Last reply Reply Quote 0
        • SeDi
          SeDi last edited by SeDi

          Thank you, @J-Hilk! I've tried to do that, but I only achieve this:

          IMGIMGIMGIMG    This text is not floating around its image, 
          IMGIMGIMGIMG    
          IMGIMGIMGIMG    
          IMGIMGIMGIMG    
              
          unfortunately it's continuing beneath the image. It should, though,
          continue on the image's side, until the bottom of the image has finally 
          been reached. Also, of course, there's no word wrap implemented. At 
          least, resizing the  element dynamically re-flows the text. But it's not 
          usable for me :-(.
          

          Heres my (test) code for TextFlow.qml:

          Rectangle {
              property string text: "<IMG>qrc:/icon_calendar.png This text is not floating around its image, unfortunately it's continuing beneath the image. It should, though, continue on the image's side, until the bottom of the image has finally been reached. Also, of course, there's no word wrap implemented. At least, resizing the  element dynamically re-flows the text. But it's not usable for me :-(."
          
              property variant stringList: text.split(' ')
          
              Flow {
                  anchors.fill: parent
                  Repeater{
                      id: flowRepeater
                      model: stringList.length
          
          
          
                      Loader {
                          id: flowLoader
                          property string current: stringList[index]
                          sourceComponent: stringList[index].substring(0,5) === "<IMG>" ? imageComponent : textComponent
          
                          Component {
                              id:  textComponent
                              Text {
                                  height: contentHeight
                                  width: contentWidth
                                  text: index === 0 ? stringList[index] : " "+stringList[index]
                              }
                          }
                          Component {
                              id:  imageComponent
                              Image {
                                  id: image
                                  height: 240
                                  width: 140
                                  source: stringList[index].substring(5,500)
                              }
                          }
                      }
                  }
              }
          }
          

          Is it possible to connect / concatenate two or more Flow items? I can't seem to find that possibility in the docs. Also, I am missing a possibility to know if everything fits into the Flow's boundaries - or better a List of all the Items that don't fit in, so that we could use that as a repeater model for a second flow. Without such an API I have no idea. This use case, though, doesn't seem that far off to me...

          J.Hilk 1 Reply Last reply Reply Quote 0
          • J.Hilk
            J.Hilk Moderators @SeDi last edited by J.Hilk

            @SeDi You're right, this is not what I expected.

            Other approach suggestion:

            Since Text component in QML accepts rich/html text, have you tried it that way ?

            IIRC there are "easy" ways to make text flow around an image in html

            it html support is limited, so I might not be possible, just a suggestion

            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

            Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            SeDi 1 Reply Last reply Reply Quote 1
            • Markkyboy
              Markkyboy last edited by

              This has already been posted/solved elsewhere in the forum; https://forum.qt.io/topic/101610/how-to-wrap-text-around-box-square/2

              Don't just sit there standing around, pick up a shovel and sweep up!

              I live by the sea, not in it.

              SeDi 1 Reply Last reply Reply Quote 4
              • GrecKo
                GrecKo Qt Champions 2018 last edited by GrecKo

                You can do that by modifying the line object sent in the lineLaidOut signal. I may have written an example somewhere.

                EDIT: thanks @Markkyboy for finding it :P

                Markkyboy SeDi 2 Replies Last reply Reply Quote 5
                • Markkyboy
                  Markkyboy @GrecKo last edited by

                  @GrecKo said in Text flow around image possible?:

                  You can do that by modifying the line object sent in the lineLaidOut signal. I may have written an example somewhere.

                  Lol, yes!, it was your answer I've just posted! :D

                  Don't just sit there standing around, pick up a shovel and sweep up!

                  I live by the sea, not in it.

                  1 Reply Last reply Reply Quote 2
                  • SeDi
                    SeDi @GrecKo last edited by

                    @GrecKo Wow. Great idea. Thanks - that's brilliant!

                    1 Reply Last reply Reply Quote 0
                    • SeDi
                      SeDi @Markkyboy last edited by

                      @Markkyboy Thanks so much for digging that out - works perfectly.

                      1 Reply Last reply Reply Quote 0
                      • SeDi
                        SeDi @J.Hilk last edited by

                        @J-Hilk For now, I'll go for Grecko's straightforward alternative, because it does the job I am needing it for. But the idea of using html (if subset allows) is enticing! I will keep it in mind for more complicated situations. Thank you!

                        1 Reply Last reply Reply Quote 1
                        • First post
                          Last post