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

stereomatching

@
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?

chrisadams

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.

Jens

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

stereomatching

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