Qt Quick module is a standard library for writing QML applications. While the Qt QML module provides the QML engine and language infrastructure, the Qt Quick module provides all the basic types needed to create a user interface using QML. It provides a visual canvas, including types for creating and animating visual components, receiving user input, creating data models and views, and extending object instantiation.

The Qt Quick module provides the QML API, which provides the QML types for creating user interfaces using the QML language, and the C ++ API for extending QML applications using C + + code.

Note: you can also use a set of Qt Quick based UI controls to create a user interface. For more information, see Qt Quick Controls 2.

For those new to QML and Qt Quick, refer to the QML application for an introduction to writing QML applications.

The following is a simple picture viewer made by combining some controls in Quick with simple small code

Image

Text

Button

Rectangle

FileDialog

BusyIndicator 

import QtQuick 2.9
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.3
Window{
    id:mainWindow
    width: 600
    height: 400
    visible: true
    Rectangle{
        id:view_image_rectagnle
        anchors.top:parent.top
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 60
        border.color: "#55ffff"
        border.width: 2
        radius: 5
        Image {
            id: imageView
            anchors.fill: parent
            anchors.margins: 10
            source: ""
            asynchronous: true
            cache: false
            fillMode: Image.PreserveAspectFit
            onScaleChanged: {
                if(imageView.status == Image.Loading){
                    busy.running = true
                }else if(status == Image.Ready){
                    busy.running = false
                }else if(status == Image.Error){
                    pathText.text = "Image load failed"
                }
            }
        }
    }
    Button{
        id:openBtn
        implicitWidth: 100
        implicitHeight: 20
        anchors.top: view_image_rectagnle.bottom
        anchors.topMargin: 10
        anchors.left: view_image_rectagnle.left
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        text:"Open"
        style: ButtonStyle{
            background: Rectangle{
                anchors.fill: parent
                border.color: "#55eeff"
                border.width: Control.activeFocus ? 5 : 2
            }
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                //Open file
                fileDialog.open()
            }
        }
    }
    //Show file path
    Text{
        id:pathText
        anchors.top: openBtn.top
        anchors.left: openBtn.right
        anchors.leftMargin: 10
        verticalAlignment: Text.AlignVCenter
        padding: 10
        text:"1111111111111"
    }
    //File selection box
    FileDialog{
        id:fileDialog
        title:"Please select the picture you want to show"
        nameFilters: ["Image Files(*.jpg *.png *.bmp)"]
        onAccepted: {
            console.log(fileUrl)
            pathText.text = fileUrl
            imageView.source = fileUrl
        }
        onRejected: {
            console.log("User deselected")
        }
    }
    //Busy indicator
    BusyIndicator{
        id:busy
        running: false
        z:2
    }

}

Effect: