Skip to content

Latest commit

 

History

History
505 lines (448 loc) · 9.73 KB

qt.md

File metadata and controls

505 lines (448 loc) · 9.73 KB
Raw

Qt

Resources

Qt Installation

Where the Qt installer can be found?
  • Open source: qt.io/download-open-source
  • Commercial: qt.io/download
chmod u+x qt*.run
./qt*.run

Resources

  • Cross-Platform Development with Qt6 and Modern C++ - Chapter 1

References

How to update Qt components after manual installation?

You can select new components to download and install or unselect them to remove them from your installation.

${QT_DIR}/MaintenanceTool.exe

Resources

  • Cross-Platform Development with Qt6 and Modern C++ - Chapter 1

References

Qt Widgets

QML

What is the interpreter of QML?

Description

A runtime called the QmlEngine which loads the initial QML code. The developer can register C++ types with the runtime to interface with the native code. The qml tool is a pre-made runtime which is used directly.

Resources

References

What is the base code for a QML app?

Description

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Sample")
}

Resources

References

Core Elements

What elements are grouped as core in QML?

Description

  • Item
  • Rectangle
  • Text
  • Image
  • MouseArea

Resources

References

Item

What element is an item?

Item is the base element for all visual elements as such all other visual elements inherits from Item. It doesn’t paint anything by itself but defines all properties which are common across all visual elements.

The Item element is often used as a container for other elements, similar to the div element in HTML.

Resources

References

What properties does an item element define inherited by all other elements?
  • Geometry: x, y, width, height, z
  • Layouts: anchors, margins
  • Keys: Key, KeyNavigation, focus
  • Transformation: scale, rotate, transform, transformOrigin
  • Visual: opacity, visible, clip, smooth
  • State: states, state, transitions

Resources

References

Window

What properties does a window element support?
  • visible
  • visibilitity
  • title

Resources

References

Changed the default size of the window? 
import QtQuick

Window {
    id: window
    width: 300
    height: 600
    visible: true
    visibility: Window.Maximized
    title: qsTr("Image Viewer")
}

Resources

References

Rectangle

What properties does a rectangle support?

Description

Rectangle extends Item and adds following properties:

  • color
  • border: border.radius, border.color
  • radius

Resources

References

Colorize the background of a window? 
import QtQuick

Rectangle {
    id: root
    width: 600
    height: 400
    color: 'lightsteelblue'
}

Resources

References

Text

Draw a text on the app? 
import QtQuick

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Image Viewer")

    Text {
        id: text
        anchors.centerIn: parent
        width: 100
        height: 30
        color: 'black'
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.family: 'Ubuntu'
        font.pixelSize: 18
        text: 'Sample Text'
        KeyNavigation.tab: other_text
        focus: true
        onHeightChanged: console.log('height: ', height)
    }
}

Resources

References

Property Alias

How does a property alias work?

The alias keyword allows us to forward a property of an object or an object itself from within the type to an outer scope. A property alias does not need a type, it uses the type of the referenced property or object.

property alias <name>: <reference>

Resources

References

Signals

How do signals work in QML?

For every property, you can provide a signal handler. This handler is called after the property changes.





Resources





References







Capture key signals in an element?



Text {
    id: label

    onTextChanged: function(text) {
        console.log("text changed to:", text)
    }

    Keys.onSpacePressed: {
        log()
    }

    Keys.onEscapePressed: {
        log()
    }

    function log() {
        console.log('key pressed')
    }
}




Resources





References






Image



Load an image into the app?



First, create a qrc resource file and add the image assets/sample.png as a
resource.


Then, modify CMakeLists.txt file to include .qrc file in your project.


qt_add_resources(RESOURCE_FILES assets.qrc)
qt_add_executable(appsample
    main.cpp
    ${RESOURCE_FILES}
)


Finally, add the image in an Image component:


import QtQuick

Window {
    id: window
    width: 680
    height: 460

    Image {
        id: image
        anchors.centerIn: parent
        source: 'qrc:/assets/sample.png'
    }
}




Resources





References







What are the properties of an image component?



Description






Resources





References






Mouse Area



Make an area of window clickable?



The mouse area is often used together with a visible item to execute commands
when the user interacts with the visual part.


import QtQuick

Rectangle {
    id: button
    width: 60
    height: 25
    color: 'lightsteelblue'
    MouseArea {
        id: clickable_area
        anchors.fill: parent
        onClicked: image.visibility = !image.visilibity
    }
}




Resources





References






Component



How many types of components are available?



Description


QML provides different ways to create components:


    

  • File-based component
    • 

  • 





Resources





References







Make a reusable element?







Resources





References







Propegate clicked signal to root level component?



Description


import QtQuick

Rectangle {
    id: root
    width: 100
    height: 300
    color: 'lightsteelblue'

    property alias text: label.text
    signal clicked

    Text {
        id: label
        anchors.centerIn: parent
        text: 'start'
    }

    MouseArea {
        anchors.fill: parent
        onClicked: { root.clicked() }
    }
}




Resources





References