文件查看器

上节课中学习了如何加载一个网络图片，这节课接着上节课的代码来写一个图片加载程序。

首先，可以重用上节课中的图片加载的代码。新添加的东西就是，一个button，一个Text文本标签，一个FileDialog文件对话框。

具体代码如下：

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

Window{

    visible: true;
    width: 600;
    height: 480;

    minimumWidth: 480;
    minimumHeight: 380;

    BusyIndicator{
        id:busy;
        running: true;
        anchors.centerIn: parent;
        z:2;

    }

    Text{
        id:statusLabel;
        visible: false;
        anchors.centerIn: parent;
        z:3;
    }


    Image{
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;

        onStatusChanged: {
            if(imageViewer.states === Image.Loading){
                busy.running = true;
                statusLabel.visible = false;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.running = false;
                statusLabel.visible = true;
                statusLabel.text = "ERROR";
            }
        }
    }

    Button{
        id:openFile;
        text:"Open";
        anchors.left: parent.left;
        anchors.leftMargin: 8;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 8;

        style: ButtonStyle{
            background: Rectangle{
                implicitWidth: 70;
                implicitHeight: 25;
                color:control.hovered?"#c0c0c0":"#a0a0a0";
                border.width: control.pressed ? 2 : 1;
                border.color: (control.hovered || control.pressed)? "green":"#888888";
            }
        }

        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 imageFile = new String(fileDialog.fileUrl);
            imagepath.text = imageFile.slice(8);
        }
    }


}

其中FileDialog是qml中的文件对话框，用来选择已有的文件，文件夹，支持单选多选等。
当需要多选的时候，设置以下属性就可以了。
selectMulitple：true；