20--Qt基本元素初体验--简单图片浏览器

标签（空格分隔）： Qt

---

我们先看一下界面效果

图片浏览器.png

界面比较简单，左下角放了一个open按钮，点击会调用FileDialog让用户选择图片文件，如果用户选择了文件，就用Image显示出来，同时在Open按钮右侧显示图片路径。
在Open按钮的onClicked信号处理器中，调用FileDialog对象的open()方法让用户选择文件。当用户选择文件后会触发FileDialog的accepted信号，我为它创建了onAccepted信号处理器，在信号处理器内设置imageViewer的source属性来显示照片，同时设置imagePath的text属性来展示图片文件的路径，

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2


Rectangle {
    visible: true;
    width: 600;
    height: 480;
    BusyIndicator {
        id:busy;
        running: false;
        anchors.centerIn: parent;
        z:2;
    }
    Text {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z:3;
    }
    Image {
        id:imageViewer;
        height: 400;
        width: 600;
        anchors.centerIn: parent;
        asynchronous: true;
        cache: false;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged: {
            if(imageViewer.status === Image.Loading){
                busy.running = true;
                stateLabel.visible = false;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.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)"];
        onAccepted: {
            imageViewer.source = fileDialog.fileUrl;
            var iamgeFile = new String(fileDialog.fileUrl);
            console.log("iamgeFile====",JSON.stringify(iamgeFile))
            imagePath.text = iamgeFile.slice(8);
        }
    }

}