qml-------------实现一个简单的图片加载程序

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

首先，可以重用上节课中的图片加载的代码。新添加的东西就是，一个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；