QML picture preview

preview

Item{
    
    id: img_preview
    anchors.fill: parent
    property var srcs: []
    property int srcIndex: 0
    M.View{
    
        anchors.fill: parent
        elevation: 1
        MouseArea{
    
            anchors.fill: parent
            onWheel: {
    
// if(wheel.angleDelta.y > 0){
    
// preview_img.scaled += 0.1
// }else{
    
// preview_img.scaled -= 0.1
// }
            }
        }
        Flickable{
    
            id: flick_img
            anchors.fill: parent
            contentHeight: preview_img.height + preview_img_funcBar.height
            contentWidth: preview_img.width
            onContentXChanged: {
    
                if(contentWidth < width){
    
                    contentX = preview_img.width / 2 - width / 2
                }
            }

            Image{
    
                id: preview_img
                width: flick_img.width
                horizontalAlignment: Image.AligdnHCenter
                property real scaled: 1
                property real widthBak: 0
                property real heightBak: 0
                onScaledChanged: {
    
                    width = widthBak * scaled
                    height = heightBak * scaled
                    flick_img.contentX = width / 2 - flick_img.width / 2
                    if(scaled <= 0)scaled = 0
                }
                source: img_preview.srcs[img_preview.srcIndex]
                fillMode: Image.PreserveAspectFit
                onStatusChanged: {
    
                    if(status == Image.Ready){
    
                        widthBak = width
                        heightBak = height
                    }
                }
                onSourceChanged: {
    
                    flick_img.contentY = 0
                }
            }
        }
        M.View{
    
            id: preview_img_funcBar
            width: parent.width - M.Units.dp(20)
            height: M.Units.dp(60)
            anchors.bottom: parent.bottom
            anchors.bottomMargin: M.Units.dp(20)
            anchors.horizontalCenter: parent.horizontalCenter
            elevation: 1
            radius: M.Units.dp(20)
            backgroundColor: "#20ffffff"
            Row{
    
                anchors.horizontalCenter: parent.horizontalCenter
                height: parent.height
                spacing: M.Units.dp(20)
                M.View{
    
                    width: M.Units.dp(40)
                    height: width
                    elevation: 1
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    visible: img_preview.srcs.length>1
                    M.Icon{
    
                        width: parent.width / 2
                        height: width
                        anchors.centerIn: parent
                        source: "icon://av/skip_previous"
                        enabled: img_preview.srcIndex > 0
                    }
                    M.Ink{
    
                        anchors.fill: parent
                        circular: true
                        onClicked: {
    
                            if(img_preview.srcIndex > 0){
    
                                img_preview.srcIndex--
                            }else{
    
                                snackbar.info(" Already on the first page ")
                            }
                        }
                    }
                }
                M.Label{
    
                    anchors.verticalCenter: parent.verticalCenter
                    visible: img_preview.srcs.length > 1
                    text: "%1/%2".arg(img_preview.srcIndex+1).arg(img_preview.srcs.length)
                }

                M.View{
    
                    width: M.Units.dp(40)
                    height: width
                    elevation: 1
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    visible: img_preview.srcs.length > 1
                    M.Icon{
    
                        width: parent.width / 2
                        height: width
                        anchors.centerIn: parent
                        source: "icon://av/skip_next"
                        enabled: img_preview.srcIndex < img_preview.srcs.length - 1
                    }
                    M.Ink{
    
                        anchors.fill: parent
                        circular: true
                        onClicked: {
    
                            if(img_preview.srcIndex < img_preview.srcs.length - 1){
    
                                img_preview.srcIndex++
                            }else{
    
                                snackbar.info(" It's the last page ")
                            }
                        }
                    }
                }
                M.View{
    
                    width: M.Units.dp(40)
                    height: width
                    elevation: 1
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    M.Icon{
    
                        width: parent.width / 2
                        height: width
                        anchors.centerIn: parent
                        source: "icon://action/zoom_out"
                    }
                    M.Ink{
    
                        anchors.fill: parent
                        circular: true
                        onClicked: {
    
                            preview_img.scaled -= 0.1
                        }
                    }
                }
                M.View{
    
                    width: M.Units.dp(40)
                    height: width
                    elevation: 1
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    M.Icon{
    
                        width: parent.width / 2
                        height: width
                        anchors.centerIn: parent
                        source: "icon://action/youtube_searched_for"
                    }
                    M.Ink{
    
                        anchors.fill: parent
                        circular: true
                        onClicked: {
    
                            preview_img.scaled = 1
                        }
                    }
                }

                M.View{
    
                    width: M.Units.dp(40)
                    height: width
                    elevation: 1
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    M.Icon{
    
                        width: parent.width / 2
                        height: width
                        anchors.centerIn: parent
                        source: "icon://action/zoom_in"
                    }
                    M.Ink{
    
                        anchors.fill: parent
                        circular: true
                        onClicked: {
    
                            preview_img.scaled += 0.1
                        }
                    }
                }
                M.View{
    
                    width: M.Units.dp(40)
                    height: width
                    elevation: 1
                    radius: width / 2
                    anchors.verticalCenter: parent.verticalCenter
                    M.Icon{
    
                        width: parent.width / 2
                        height: width
                        anchors.centerIn: parent
                        source: "icon://content/clear"
                    }
                    M.Ink{
    
                        anchors.fill: parent
                        circular: true
                        onClicked: {
    
                            img_preview.visible = false
                        }
                        onWheel: {
    
                            console.log("on wheel ", wheel.angleDelta.y)
                            if(wheel.angleDelta.y > 0){
    
                                preview_img.scaled += 0.1
                            }else{
    
                                preview_img.scaled -= 0.1
                            }
                        }
                    }
                }
            }
        }
    }
    function previewImage(imgs, idx){
    
        img_preview.srcs = (imgs instanceof Array)? imgs: [imgs]
        img_preview.srcIndex = (idx >= 0 && idx < img_preview.srcs.length)? idx: 0
        preview_img.scaled = 1
        img_preview.visible = true
    }
}