预览
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("已在第一页")
}
}
}
}
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("已是最后一页")
}
}
}
}
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
}
}