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



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



  • 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.



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



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.