QtQuick实现图片查看器

QtQuick实现图片查看器

介绍

图片查看器是非常值得新手入门QtQuick的项目，通过该项目，用户可以很快熟悉QML语法和资源文件存储，还可以使用通过操作文件夹实现多图像查看。

实战

首先打开QtCreator，创建QtQuick项目，我使用的是Qt6.5版本，但是其他版本应该也可以。

我们先新建一个QML文件，命名为ImageView.qml,代码如下:

copy
import QtQuick
import QtQuick.Controls
 
Item {
    Image{
        id: image_view
        source: "图片路径"
        anchors.fill: parent
    }
}
 

然后我们在Main文件中引用它:

copy
import QtQuick 2.12
import QtQuick.Window 2.12
 
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageViewer")
 
    ImageView {
        anchors.fill: parent
    }
}
 

此时我们发现，图片被拉伸填充满整个画面，这使得原图变得失真，我们可以通过设置Image的fillModel来改变图片的填充显示格式，可取值如下:

Model	作用
Image.Stretch	图片拉伸自适应；（默认的）
Image.PreserveAspectFit	按比例缩放，不裁剪
Image.PreserveAspectCrop	均匀缩放，必要时裁剪
Image.Tile	像贴瓷砖一样
Image.TileVertically	水平拉伸，垂直平铺
Image.TileHorizontally	垂直拉伸，水平平铺
Image.Pad	原始图像不做处理

我们将图像的fillMode值设置为 Image.PressveAspectFit,这样图像就能按比例适应窗口了。

ImageView.qml

copy
import QtQuick 2.12
 
Item {
    Image {
        id: image_view
        source: "图片路径"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit //设置图片填充模式
    }
}

但是我们只能静态地显示图片，不能在运行后动态的更改图片，这时，我们可以添加事件，打开文件窗口来选择我们要显示的图片。

首先我们定义一个文件对话框FileDiaolg

copy
FileDialog {
        id: image_dialog
        nameFilters: ["(*.jpg)","(*.png)"]
        onAccepted: {
            image_view.source = selectedFile
        }
    }

它可以打开文件系统选择文件，nameFilters属性用于指定文件系统中显示的文件类型，当用户点击文件后，会触发Accepted事件，通过处理这个事件，我们将选定的文件地址(selecteFile)赋值给image_view的source，这样image_view的图片源就会改变。

我们创建一个菜单组件，添加MenuItem用于打开这个文件对话框,添加鼠标右击事件来弹出这个对话框

copy
Menu {
        id: image_menu
 
        MenuItem{
            text: "打开图片"
            onTriggered: {
                image_dialog.open() // 触发打开文件对话框事件
            }
        }
    }
 
MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton; //允许接收左键和右键
        onClicked: function(mouse){
            if(mouse.button === Qt.RightButton){ // 如果按下右键，触发事件
                image_menu.popup()
            }
        }
    }

这样，一个基本的图片查看器就完成了，不过这样还不够，我们还能添加一些简单的图片编辑功能，比如放大、缩小.
后续更新...

所有代码:

ImageView.qml

copy
import QtQuick 2.12
import QtQuick.Dialogs
import QtQuick.Controls
Item {
 
    property alias source: image_view.source
    Image {
        id: image_view
        source: "图片路径"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    }
 
 
 
    FileDialog {
        id: image_dialog
        nameFilters: ["(*.jpg)","(*.png)"] //指定显示的文件类型
        onAccepted: {
            image_view.source = selectedFile
        }
    }
 
    Menu {
        id: image_menu
        // visible: false
        MenuItem{
            text: "打开图片"
            onTriggered: {
                image_dialog.open() // 触发打开文件对话框事件
            }
        }
 
        MenuItem{
            text: "放大"
            onTriggered: {
 
            }
        }
    }
 
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton; //允许接收左键和右键
        onClicked: function(mouse){
            if(mouse.button === Qt.RightButton){ // 如果按下右键，触发事件
                image_menu.popup()
            }
        }
    }
 
}
 

Main.qml

copy
import QtQuick 2.12
import QtQuick.Window 2.12
 
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageViewer")
 
    ImageView {
        anchors.fill: parent
    }
}