关闭

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

657人阅读 评论(0) 收藏 举报
分类:

代码如下

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




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4207次
    • 积分:82
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:10篇
    • 译文:0篇
    • 评论:4条
    文章存档