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

原创 2015年07月09日 17:24:55

代码如下

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




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Qt Quick综合实例之文件查看器

使用ApplicationWindow、MediaPlayer、XMLHttpRequest、TextArea、MenuBar、ToolBar、Action、Image、动态创建组件等等特性的综合实例...
  • foruok
  • foruok
  • 2014-09-02 15:49
  • 14092

Qt Quick综合实例之文件查看器

在此感谢斑竹的 如果你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window。这次我...

Qt项目实战2:图片查看器QImageViewer

在博文Qt学习笔记2:QMainWindow和QWidget的区别中介绍了使用空的Qt项目创建带有菜单栏、工具栏的界面。 这里,使用一个简单的图片查看器项目,来熟悉一下Qt的图片显示和基本操作。 ...

QT 自定义窗口形状的图片查看器

程序界面如下所示,ctrl+o打开图片选择窗口,ctrl+q退出程序,右键弹出同样操作菜单(open/quit)选择好一个图片之后用dialog显示,dialog窗口大小随图片大小变化

Qt Quick核心编程

Qt Quick核心编程

  • 2016-12-13 15:11
  • 68.05MB
  • 下载

Qt 插件综合编程-基于插件的OpenStreetMap瓦片查看器客户端(0)-引子

OpenStreetMap一般是使用Web服务发布瓦片和矢量数据的。本系列博文主要演示如何使用Qt 搭建一个简单的OpenStreetMap瓦片客户端,实现以下功能: 1、OpenStreetMap...

Qt Quick核心编程1.part2

  • 2016-06-06 17:46
  • 19.56MB
  • 下载

Qt 插件综合编程-基于插件的OpenStreetMap瓦片查看器客户端(2)架构设计

(相关的代码可以从https://github.com/goldenhawking/mercator.qtviewer.git直接克隆)     本文的前序章节介绍了坐标系的基础知识。在这一章,我们将...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)