代码如下
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Dialogs 1.1
Window {
visible: true
width: 960
height: 680
title: "图片查看器"
BusyIndicator {
id: busy
running: false
anchors.centerIn: parent
z: 2
}
//文字
Text {
id: statusLable
anchors.centerIn: parent
visible: false
}
Text {
id: path
anchors.left: openButton.right
anchors.leftMargin: 40
//水平对齐
anchors.verticalCenter: openButton.verticalCenter
visible: true
color: "black"
font.pixelSize: 20
z: 5
}
//按钮
Button {
id: openButton
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
isDefault: true
Text {
id: textButton
text: "打开图片"
anchors.centerIn: parent
}
//ButtonStyle 有background,control,label三个属性
//background,label属性类型为component
//当background为rectangle时
//按钮就按照rectangle的构造来了
//control属性可以访问按钮的各个状态
style: ButtonStyle {
background: Rectangle {
//这样不好用,直接implicitwidth
// width: 700
// height: 250
implicitWidth: 70
implicitHeight: 25
radius: 4
//填充颜色
color: control.hovered ? "#7D7D7D" : "#D2D2D2"
//边框宽度
border.width: control.pressed ? 4 : 2
//边框颜色
border.color: (control.pressed || control.hovered) ? "black" : "#4C4C4C"
}
}
onClicked: {
fileDialog.open()
}
z: 5
}
//图片
Image {
id: imageView
anchors.rightMargin: 0
anchors.bottomMargin: 42
anchors.leftMargin: 0
anchors.topMargin: 22
//Image默认阻塞式的加载图片
//网络资源默认异步加载
//开启异步加载模式
asynchronous: true
//缓存
cache: false
//填充模式fillMode
//包括Image.Stretch(拉伸)
//Image.PreserveAspectFit(等比缩放)
//Image.Preservespectrop(等比缩放,最大化填充,必要时裁剪)
//Image.Tile(水平与垂直平铺)
//Image.TileVertically Image.TileHorizontally(垂直,水平平铺)
//Image.Pad(保持原样)
fillMode: Image.PreserveAspectFit
anchors.fill: parent
//onStatusChanged信号处理器
//Image的status属性变化会发射statusChanged()信号
//属性变化触发的信号对应的信号处理格式为on<Property>Changed
onStatusChanged: {
if (imageView.status == Image.Loading) {
busy.running = true
statusLable.visible = false
}
else if (mageView.status == Image.Ready) {
busy.running = false
statusLable.visible = false
}
else {
busy.running = false
statusLable.visible = true
statusLable.text = "打开图片出错"
}
}
}
//文件
//FileDalog是平台相关的
//visible默认false
//显示对话框调用open方法或者visible设置为true
//selectExisting 默认true 选择已有文件或文件夹
//false 供用户创建文件或文件夹的名字
//selectFold 默认false 表示选择文件, true 选择文件夹
//selectMultiple 默认false 单选, true 多选
//FileDialog 支持名字过滤
//nameFilters设定一个过滤器列表
//selectedNameFilter保存用户选择的过滤器或者用来设置初始的过滤器
//modality 默认为Qt.WindowModal fileUrl保存文件的路径
//fileUrls为一个列表,保存用户选择的所有路径
//folder 存放用户选择的(文件所在)文件夹的位置
FileDialog {
id: fileDialog
title: "打开图片文件"
//名称过滤
nameFilters: [ "Image Files (*.jpg *.png *.gif)",
"Bitmap Files (*.bmp)",
"* (*.*)"]
//默认显示哪一个
select<pre name="code" class="plain">import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Dialogs 1.1
edNameFilter: "Bitmap Files (*.bmp)"
//多选
selectMultiple: true
onAccepted: {
imageView.source = fileDialog.fileUrls[2]
//var imageFile = new string(fileDialog.fileUrl)
path.text = imageView.source.toString()
}
}
}