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
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
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
What is the base code for a QML app?
Description
import QtQuick Window { width: 640 height: 480 visible: true title: qsTr("Sample") }
Resources
What elements are grouped as core in QML?
Description
Item
Rectangle
Text
Image
MouseArea
Resources
What element is an item?
Item
is the base element for all visual elements as such all other visual elements inherits fromItem
. 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 thediv
element in HTML.
Resources
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-core-elements
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
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-core-elements
What properties does a window element support?
visible
visibilitity
title
Resources
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
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-core-elements
What properties does a rectangle support?
Description
Rectangle
extendsItem
and adds following properties:
color
border
:border.radius
,border.color
radius
Resources
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-core-elements
Colorize the background of a window?
import QtQuick Rectangle { id: root width: 600 height: 400 color: 'lightsteelblue' }
Resources
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
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
How do signals work in QML?
For every property, you can provide a signal handler. This handler is called after the property changes.
Resources
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
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
What are the properties of an image component?
Description
Resources
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
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-core-elements
How many types of components are available?
Description
QML provides different ways to create components:
- File-based component
Resources
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-components
Make a reusable element?
Resources
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-components
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
- https://www.qt.io - https: - https://www.qt.io - https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-components