基于QML的图片浏览器

演示截图

工程演示中会看到的两个窗体分别是一个文件选择对话框和一个图片浏览器窗体。

1、文件选择对话框界面如下：

因为博主是在window下运行的代码，所以Qt Quick默认就适用了Windows系统的对话框（风格）。不同的操作系统上会有不同的原生文件选择对话框，如果没有的话Qt Quick会使用默认的QML文件对话框。

2、图片浏览器也是我们使用QML代码实现的图片浏览器窗体如下：

工程代码

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.2

//主窗体
Window {
    visible: true;
    width: 600;
    height: 480;
    minimumWidth: 480;
    minimumHeight: 380;
    title: "图片浏览器";

    //等待提示图元
    BusyIndicator {
        id: busyIndicator;
        running: false;
        anchors.centerIn: parent;
        z: 2;
    }

    //状态文本标签
    Text {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z: 3;
    }

    //图片
    Image {
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.centerIn: parent;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged: {
            if(imageViewer.status == Image.Loading) {
                busyIndicator.running = true;
                stateLabel.visible = false;
            }
            else if(imageViewer.status == Image.Ready) {
                busyIndicator.running = false;
            }
            else if(imageViewer.status == Image.Error) {
                busyIndicator.running = false;
                stateLabel.visible = true;
                stateLabel.text = "ERROR";
            }
        }
    }

    //按钮
    Button {
        id: openFile;
        text: "Open";
        anchors.left: parent.left;
        anchors.leftMargin: 8;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 8;
        onClicked: fileDialog.open();
        z: 4;
    }

    //图片路径文本
    Text {
        id: imagePath;
        anchors.left: openFile.right;
        anchors.leftMargin: 8;
        anchors.verticalCenter: openFile.verticalCenter;
        font.pixelSize: 18;
    }

    //文件对话框
    FileDialog {
        id: fileDialog;
        title: "Please choose a file";
        nameFilters: ["Image Files (*.jpg *.png *.gif)",
                      "Bitmap Files (*.bmp)", "* (*.*)"];
        selectMultiple: true;
        onAccepted: {
            imageViewer.source = fileDialog.fileUrls[0];
            var imageFile = new String(fileDialog.fileUrls[0]);
            imagePath.text = imageFile.slice(8);
        }
    }
}

代码比较简单直观，主要是使用了Button、Image、Text、BusyIndicator、FileDialog等基本的Qt Quick元素。通过使用这些基本元素的属性以及信号处理器我们只用了不到100行代码就实现了一个简单的图片浏览器APP，可见Qt Quick是如此方便。