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. [Solved]ScrollView and Flickable don't respect Image.PreserveAspectFit
Forum Updated to NodeBB v4.3 + New Features

[Solved]ScrollView and Flickable don't respect Image.PreserveAspectFit

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 3 Posters 2.5k Views 1 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.
  • S Offline
    S Offline
    stereomatching
    wrote on last edited by
    #1

    @
    import QtQuick 2.1
    import QtQuick.Controls 1.0

    Rectangle {
    id: root
    width: 1200
    height: 600

    Row{
        Rectangle{
            height:root.height
            width: root.width / 3
            color: "black"
            z: 1
        }
    
        Flickable{
            height:root.height
            width: root.width / 3
            contentHeight: image.height
            contentWidth: image.width
            Image{
                id: image
    
                source: "file:///Users/yyyy/Downloads/1359170070532.jpg"
                fillMode: Image.PreserveAspectFit
                smooth: true
            }
        }
    
        ScrollView{
            height:root.height
            width: root.width / 3
    
            Image{
    
                source: "file:///Users/yyyy/Downloads/1359170070532.jpg"
                fillMode: Image.PreserveAspectFit
                smooth: true
            }
        }
    }
    

    }
    @

    What I want to do is, change the fillMode of the image dynamically, when the image is too large
    I want them become filckable or scrollable, but neither Flickable nor ScrollView respect Image.PreserveAspectFit, how could I make them respect the fillMode of the Image?

    1 Reply Last reply
    0
    • C Offline
      C Offline
      chrisadams
      wrote on last edited by
      #2

      Hi,

      I don't really know how ScrollView works, but your Flickable has its contentWidth and contentHeight bound to the width/height of the image, so the fillMode of the Image probably won't have any effect, I guess. (Although, it's early and my brain hasn't switched on yet, so maybe I'm misunderstanding something).

      Cheers,
      Chris.

      1 Reply Last reply
      0
      • J Offline
        J Offline
        Jens
        wrote on last edited by
        #3

        chris is right. I don't understand what you are trying to achieve by setting the PreserveAspectFit mode. The image is never stretched to an incorrect aspect ratio so the flag will do nothing unless you constrain either the width or the height but that is pointless when you have a scrollable view.

        If you are trying to implicitly center the image when it is not being scrolled, you could try something like this though:

        @
        ScrollView {
        id: scrollview
        height:root.height
        width: root.width
        Item {
        id: container
        width: Math.max(img.implicitWidth, root.width - 20)
        height: Math.max(img.implicitHeight, root.height - 20)
        Image{
        id: img
        anchors.centerIn: parent
        source: "file:///Users/yyyy/Downloads/1359170070532.jpg"
        smooth: true
        }
        }
        }
        }
        @

        1 Reply Last reply
        0
        • S Offline
          S Offline
          stereomatching
          wrote on last edited by
          #4

          Thanks to both of you and sorry that I haven't mentioned my intentions clearly.

          when the image is too large,I want to handle the view with two ways

          1: when the fillMode is Pad, I could use the
          scrollView or flickable to view the whole image

          2: when the fillMode is PreserveAspectFit, the image will
          shrink to appropriate size

          Since it is impossible to do it with Flickable or ScrollView, I would find
          another solutions, like

          create a new component, with two Images, when the fillMode is
          PreserveAspectFit, I show the Image with ScrollView or Flickable;
          change it back to normal Image when it is other fillMode

          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