初学qt 用qt做的图片查看器超级简陋（按照《Qt quick核心编程》一书敲的）

代码如下

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()
        }
    }
}