My learning from the Udemy course: https://www.udemy.com/course/qml-for-beginners
QT Learning Progress:
Hello World
Window
Add Icon to Window
Window Type Classes
Widget:
Label
PushButton
LineEdit
HBox
VBox
GridLayout
Event handling:
Signals and Slots
RadioButtonExample
QCheckBox
QSpinBox
QLCDNumber Class
QLCD Random Number Generator
ComboBox
Slider
List WIdget
Font Combo Box
Table Widget
Calendar Widget
QInput Dialog
QColor Dialog
QFontDialog
QMessageBox
Single Signal with Multiple Slots
Single Slot with Multiple Signals
#include "widget.h"
#include<QVBoxLayout>
#include <QPushButton>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
resize(200,300);
QVBoxLayout *vbox=new QVBoxLayout(this);
lcd= new QLCDNumber();
lcd->setStyleSheet("background-color:yellow");
QPushButton *btn = new QPushButton();
btn->setText("Random Generator");
btn->setFont(QFont("Times", 14));
btn->setStyleSheet("background-color:green");
connect(btn, SIGNAL(clicked()),this, SLOT(randGenerator()));
vbox->addWidget(lcd);
vbox->addWidget(btn);
}
Widget::~Widget()
{
lcd = new QLCDNumber;
}
void Widget::randGenerator()
{
int randnumber = rand();
lcd->display(randnumber);
}
QTComboBox
main.cpp
#include “widget.h”
#include<QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
return a.exec();
}
widget.h
#ifdef WIDGET_H
#define WIDGET:H
#include<QWidget>
#include<QComboBox>
class Widget: public QWidget{
Q_OBject
public:
Widget(QWidget *parent = nullptr);
~Widget();
};
#endif //WIDGET_H
widget.cpp
#include “widget.h”
#include<QHBoxLayout>
Widget::Widget(QWidget *parent)
: QWidget(parent){
resize(100
}
Widget::~Widget(){
}
QML Learning
Qml codes for comments and structure rules which is not possible to find from the syntax error:
Regarding root id etc:
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
//Image { //there could be only one root object not two, if there is two anotjher one does not work.
// id: name
// source: "file"
//}
//ID - must be pointingDeviceUniqueId
//root object - there can be only one
Window { //parent //top level obect is the root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
id: root //every id is unique id
Image { //child , we have parent child relationship here
id: myimage
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
width: 150
height: 100
Rectangle {
color: "red"
width: parent.width
//width: parent.
height: parent.height
opacity: 0.5//50%-0.0-1.0
}
}
}
//if parent is destroyed the memory for child is also destroyedQML Objects
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
//QML Objects vy QObjects
import QtQuick
import content
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Image {
id: name
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
width: 150
height: 100
opacity: 0.25
anchors.centerIn: parent
}
TextInput {
id:myInput
text: "Hello World"
anchors.centerIn: parent
font.pixelSize: 32
}
Text {
id: myText
text: myInput.text
font.pixelSize: 25
}
}
X,Y,Z positioning: Z means layers
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
color: "red"
width: 200
height: 200
x: 50
y: 50
z: 2
opacity: 0.5
}
Rectangle {
color: "blue"
width: 200
height: 200
x: 150
y: 150
z: 1
opacity: 0.5
}
Image {
id: image
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
width: 150
height: 100
x: 100
y: 100
z: 0 //z is layering effect
}
}
Parent and child transformations:
#
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Image {
id: image
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
width: 150
height: 100
x: 100
y: 100
z: 2
Rectangle {
color: "red"
width: 50
height: 50
x: -25
y: -25
opacity: 0.5
z: 1
}
Rectangle {
color: "blue"
width: 50
height: 50
x: parent.width-50
y: parent.width-50
opacity: 0.5
z:0
}
}
}
TapHandler:
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
anchors.centerIn: parent
width: 100
height: 100
color: inputHandler.pressed? "red" : "blue"
TapHandler {
id: inputHandler
}
}
}
Itemtype:
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
id: myItem
anchors.centerIn: parent
width:100
height: 100
Rectangle {
color: "red"
anchors.fill:parent
}
}
}
Gradient
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
//Rectangle and Circle, there is no circle in QT
/*
It is just an item
*/
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: myItem
anchors.centerIn: parent
color: "red"
width: 200
height: 200
visible: true
border.color: "#000000"
border.width: 5
radius: width
gradient: Gradient {
GradientStop{
position:0.5; color:"red"
}
GradientStop{
position:1.0; color:"blue"
}
}
}
}
Image:
import QtQuick 2.15
import QtQuick.Window 2.15
//Local vs Remote graphic
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
property var middle: height/2//var type
Image {
id: localImage
source: "images/smile.jpg"
width: 300
//height: 100
fillMode: Image.PreserveAspectFit
x:300
y:middle - 100
}
Image {
id: remoteImage
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
width: 300
//height: 100
fillMode: Image.PreserveAspectFit
x:100
y:middle
onProgressChanged: console.log(remoteImage.progress)
onStateChanged: if(remoteImage.status == Image.Ready) console.log("Remote image was loaded")
}
}
//Text
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Text {
id: myText
text: qsTr("<html><b>Hello </b><i><font color='green'>World</font></i></html><br><font color='#C0C0C0'>this is a test</font><a href='http://www.google.com'>my link</a>")
anchors.centerIn: parent
font.pointSize: 35
font.bold: true
//font.italic: true
color:"red"
linkColor: "pink"
//Signal
onLinkHovered: {
console.log("Hover:"+link)
if (link) {
myText.font.bold = true
} else {
myText.font.bold = false
}
}
//Signal, from documentation signal list can be found
onLinkActivated: Qt.openUrlExternally(link)
}
}
Mouse Area:
import QtQuick 2.15
import QtQuick.Window 2.15
//Mouse Area vs TapHandlr
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle {
id: myArea
color: "blue"
width: 200
height: 200
anchors.centerIn: parent
MouseArea {
id: myMouse
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
console.log("Clicked: " + mouse.button)
if(mouse.button === Qt.LeftButton) parent.color = "green"
if(mouse.button === Qt.LeftButton) parent.color = "red"
}
onDoubleClicked: console.log("Double clicked: " + mouse.button)
onPositionChanged: console.log("Position X:"+mouseX+" Y:"+mouseY)
onEntered: parent.color="orange"
onExited: parent.color="pink"
}
}
}
//Qml Custom Component
//MyButton.qml
import QtQuick 2.0
Item {
id: root
width: 100
heigth: 100
property color color: "#C0C0C0"
property color colorClicked: "greeen"
property string title: "Click ME"
Rectangle {
id: myRec
anchors.fill:parent
color: root.color
Text {
id:display
text:root.title
achors.centerIn: parent
}
MouseArea {
id: mouseArea
onPressed: parent.color = root.coorClicked
onReleased: parentColor = root.color
}
}
}//main.qml
import QtQuick 2.21
import QtQuick.Window 2.12
//custom component
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MyButton {
}
property var middle : (height/2 )-50
MyButton {
id: butotn1
x: 100
y: middle
color: "red"
colorClicked: "orange"
title: "Button1"
}
MyButton {
id: button2
x: (parent.width/2) - (width/2)
y: middlecolor: "blue"
colorClicked: "orange"
title: "Button 3 <br> Testing!"
}
MyButton {
id: button4
x: (parent.width/2) - (width/2)
y: middle + 120
width: 500
height: 35
color: "ligtblue"
colorClicked: "orange"
title: "<b> Super </b> <i>Long</i> <u> Button> </u>"
}
}Custom Component Practice:
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
property int middle: (height/2)-50
MyButton {
id: button1
x: 100
y: middle
color: "red"
colorClicked: "orange"
title: "Button 1"
}
MyButton {
id: button2
x: (parent.width/2) - (width/2)
y: middle
color: "blue"
colorClicked: "orange"
title: "Button 2"
}
MyButton {
id: button3
x: parent.width - 200
y: middle
color: "green"
colorClicked: "orange"
title: "Button 3<br> Testing"
}
MyButton {
id: button4
x: (parent.width/2) - (width/2)
y: middle+120
width: 500
height: 35
color: "lightblue"
colorClicked: "orange"
title: "<b> Super </b> <i>LONG</i> <u> Button <u>"
}
}
myButton.qml
import QtQuick 2.15
Item {
id: root
width: 100
height: 100
property color color: "#C0C0C0"
property color colorClicked: "green"
property string title: "Click Me"
Rectangle { //object
id: myRec
anchors.fill: parent
color: root.color
Text {
id: display
text: root.title
anchors.centerIn: parent
}
MouseArea {
id: mouseArea
onPressed: parent.color = root.colorClicked
onReleased: parent.color = root.color
}
}
}
Asisgnment My Solution:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Image {
id: image
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
anchors.centerIn: parent
width: 150
height: 100
x: 100
y: 100
opacity: 0.8
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
onEntered: {
console.log("Hover entered");
cursorShape: Qt.OpenHandCursor;
onHover: color="orange"
}
onClicked: {
console.log("Image clicked");
Qt.openUrlExternally("http://qt.io")
}
}
}
}
Assignment Solution by Them:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Image {
id: myImage
source: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Qt_small.svg"
anchors.centerIn: parent
height: 200
width: 200
fillMode: Image.PreserveAspectFit
Rectangle {
id:overlayrect
visible: false
anchors.fill: parent
opacity: 0.5
color: "orange"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: overlayrect.visible = true
onExited: overlayrect.visible = false
onClicked: Qt.openUrlExternally("http://qt.io")
}
}
}Anchors in QML:
import QtQuick 2.15
Item {
id: root
property color color: "gray"
property string text: "title"
width: 100
height: 100
Rectangle {
id: myshape1
color: root.color
anchors.fill: parent
width:50
height:50
Text {
text: root.text
anchors.centerIn:parent
}
MouseArea {
anchors.fill: parent
//drag.target: root.parent
onPressed: root.z++
}
}
}
//Rectangle {
// id: myShape1
// color: "gray"
// width: 30
// height: 30
// property string text : ""
// Text {
// id: name
// text: parent.text
// }
// MouseArea {
// anchors.fill: parent
// }
//}
QML Code for Property and PreopertyAnimation:
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
id: root
Rectangle
{
id: myShape
color: "red"
width: 100
height: 100
x: 0
y: (parent.height / 2) - (height / 2)
PropertyAnimation {
id: animationRight
target: myShape
property: "x"
to: root.width - myShape.width //root always on the width from the shape width
duration: 2000
}
PropertyAnimation {
id: animationLeft
target: myShape
property: "x"
to: 0
duration: 1000
}
MouseArea {
anchors.fill: parent
onClicked: {
if (myShape.x === 0) {
animationRight.start()
} else {
animationLeft.start()
}
}
}
}
}
output:
Rotation and RotationAnimation:
/* This file is generated and only relevant for integrating the project into a Qt 6 and cmake based
C++ project. */
import QtQuick
import content
Window {
id: root
visible: true
width: 640
height: 480
title: qstr("Hello World")
Rectangle {
id: myShape
color: "red"
width: 200
height: 200
anchors.centerIn: parent
Text {
id: title
text: Math.round(parent.rotation)
anchors.centerIn: parent
font.bold: true
font.pointSize: 65
color: "darkred"
}
RotationAnimation {
id: animation1
target: myShape
loops: Animation.Infinite
from: myShape.rotation
to: 390 //-360 BAD
direction: RotationAnimation.Clockwise
duration: 3000
running: true
}
MouseArea {
id: area
anchors.fill: parent
onClicked: {
if(animation1.paused) {
animation1.resume()
} else {
animation1.pause()
}
}
}
}
}
Animation in QML:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: myShape
color: "red"
width: 200
height: 200
anchors.centerIn: parent
clip:true // to cut off
Text {
id: title
text: qsTr("SCALE")
font.bold: true
font.pointSize: 66
color: "darkred"
rotation: -45
anchors.centerIn:parent
}
}
SequentialAnimation {
id: animation
running: true
loops: Animation.Infinite
ScaleAnimator {
id: animationShrink
target: myShape //as id is there it does not need to be inside parent
from: 1
to: 0.5
duration: 2000
running: true
}
ScaleAnimator {
id: animationGrow
target: myShape
from: 0.5
to: 1
duration: 2000
running: true
}
}
}
Output:
Opacity animation:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
color: "black"
Image {
id: ghost
source: "qrc:/images/ghost.jpg"
anchors.fill: parent
opacity: 0
}
SequentialAnimation {
loops: Animation.Infinite
running: true
OpacityAnimator {
target: ghost
from: 0
to: 1
duration: 1000
}
OpacityAnimator {
target: ghost
from: 1
to: 0
duration: 5000
}
}
}
Output:
SmoothAnimation::
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent
color: "black"
focus: true
Rectangle {
width: 60
height: 60
color: "yellow"
radius: width
Behavior on x {}
}
Rectangle {
id: rect1
width: 50
height: 50
color: "red"
radius: width
x: (parent.width/2) - (width/2)
y: (parent.height/2) - (height/2)
}
}
}
Drag and Drop
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Drag and Drop Practice")
property string thekey: "special key here"
property color goalOn: "green"
property color goalOff: "red"
property color ballOn: "yellow"
property color ballOff: "orange"
DropArea {
id:dropZone
anchors.top: parent.top
anchors.right: parents.right
anchors.bottom: parent.bottom
width: 300
Drag.keys: [thekey] //it is an array [thekey,a ,b]
onDropped: {
console.log("dropped!")
goal.color = goalOn
}
Rectangle {
id: goal
anchors.fill: parent
color: goaloff
border.color: "black"
border.width: 5
}
}
Rectangle {
id: ball
width: 100
height: 100
radius: width
x: 25
y: (parent.height/2) - (height/2)
color: ballOff
border.color: "black"
border.width: 5
Drag.active: dragArea.drag.active
Drag.keys: [thekey]
Text {
id: title
anchors.centerIn: parent
text: Math.round(parent.x) + "x" + Math.round(parent.y)
}
MouseArea {
id: dragArea
anchors.fill: parent
drag.target: parent
onPressed: {parent.color = ballOn; goal.color=goalOff}
onReleased: {parent.color = ballOff; parent.Drag.drop()} // Take the drop object call drop funtion
}
}
}
States about QML:
import QtQuick 2.0
Item {
id: element
property color offColor: "red"
property color onColor: "green"
property color onColor: "gray"
Rectangle {
id: rectangle
color: "#80807f"
anchors.fill: parent
radius: width
}
states: [
State {
name: "on"
PropertyChanges {
target: rectangle
color: "#20ff00"
radius: onColor
}
},
State {
name: "State2"
PropertyChanges {
target: rectangle
color: "#ff0000"
}
}
]
}
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
MyBox {
id: myBox
x:220
y:140
width: 200
height: 200
MouseArea {
id: MouseArea
anchors.fill: parent
onClicked: {
if(parent.state === "on")
parent.state = "off"
} else {
parent.state = "on"
}
}
}
}
ComboBox
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Column {
id: column
x: 220
y: 56
width: 200
height: 264
clip: true
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Label {
id: lblFood
color: "#f23c04"
text: qsTr("Selected Item")
font.pointSize: 10
font.bold: true
}
ComboBox {
id: cmbFood
model: ['Pizza','Steak','Pasta']
onCurrentTextChanged: lblFood.text = cmbFood.currentText
}
Label {
id: lblPeople
text: qsTr("Label")
color: "#f23c04"
font.pointSize: 10
font.bold: true
}
ComboBox {
id: cmbPeople
// currentIndex: 2
editable: true
textRole: "name"
model: ListModel {
id:listModel
ListElement {name: "Bryan"; age:"45"}
ListElement {name: "Tammy"; age:"49"}
ListElement {name: "Rango"; age:"15"}
}
onCurrentIndexChanged: lblPeople.text = model.get(currentIndex).name+ "=" +model.get(currentIndex).age
onAccepted: {
if(find(editText) === -1){ // Simply did not find it
model.append({"name":editText, "age":"0"})
currentIndex = find(editText)
}
}
}
}
}delayButton
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Extras 1.4
import QtQuick.Controls 2.3
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Row {
id: row
x: 0
y: 246
width: 442
height: 49
spacing: 25
anchors.horizontalCenterOffset: 38
anchors.horizontalCenter: parent.horizontalCenter
DelayButton {
id: delayButton1
text: qsTr("Delete Everything")
delay: 1000
onProgressChanged: {
label.text = Math.round(progress * 100)
if(progress === 0) {
text = "Delete Everything"
label.text = "Status"
}
}
onActivated: {
label.text = "Done"
text = "BOOOM"
}
}
Label {
id: label
text: qsTr("Status")
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 21
font.bold: true
}
}
}
Frames and Popups QML:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("Frames and Popups")
Popup {
id: popup
anchors.centerIn: parent
width: 200
height: 200
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
Column {
anchors.fill: parent
spacing: 25
Label {
id: lblButter
text: "Butter = "+chkButter.checked
}
Label {
id: lblSyrup
text: "Syrup = "+chkSyrup.checked
}
Label {
id: lblFruit
text: "Fruit = "+chkFruit.checked
}
Button {
id: closeButton
text: "Close"
//onClicked: popup.visible = false
onClicked: popup.close()
}
}
}
Frame {
id: frame
width: 200
height: 394
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Column {
id: column
anchors.fill: parent
spacing: 25
CheckBox {
id: chkButter
text: qsTr("Butter")
}
CheckBox {
id: chkSyrup
text: qsTr("Syrup")
}
CheckBox {
id: chkFruit
text: qsTr("Fruit")
}
Button {
id: button
text: qsTr("Save")
//onClicked: popup.visible = true
onClicked: popup.open()
}
}
}
}
GroupBox and RadioButton:
import QtQuick 2.12
import QtQuick.Window 2.12
//GroupBox RadioButton and Javascript
import QtQuick.Controls 2.3
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Food and Drinks Ordering System")
property string strDrink: ""
property string strFood: ""
Grid{ //It is not on the tutorial, just checking for my curiosity :)
rows: 2
columns: 2
spacing: 20 // Set the spacing between cells to 10 pixels
//spacing make better visual origanization from different entity is equally
Rectangle { width: 50; height: 50; color: "red" }
Rectangle { width: 50; height: 50; color: "blue" }
Rectangle { width: 50; height: 50; color: "green" }
Rectangle { width: 50; height: 50; color: "yellow" }
}
Popup {
id: popup
anchors.centerIn: parent
width: 200
height: 150
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
Column {
anchors.fill: parent
spacing: 25
Label {
id: lblDetails
text: strFood + " with " + strDrink
}
Button {
id: closeButton
text: "Close"
onClicked: popup.close()
}
}
}
Row {
id: row
width: 432
height: 196
spacing: 25
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
GroupBox {
id: groupBox
width: 200
height: 190
title: qsTr("Food")
Column {
id: colFood
spacing: 5
anchors.fill: parent
RadioButton {
id: rdoFish
text: qsTr("Fish")
}
RadioButton {
id: rdoSteak
text: qsTr("Steak")
}
RadioButton {
id: rdoVegan
text: qsTr("Vegan")
}
}
}
GroupBox {
id: groupBox1
width: 200
height: 190
title: qsTr("Drinks")
Column {
id: colDrink
spacing: 5
RadioButton {
id: rdoWater
text: qsTr("Water")
}
RadioButton {
id: rdoWine
text: qsTr("Wine")
}
RadioButton {
id: rdoSoda
text: qsTr("Soda")
}
anchors.fill: parent
}
}
}
Button {
id: button
x: 270
y: 367
text: qsTr("Click Me")
anchors.horizontalCenter: parent.horizontalCenter
}
Connections {
target: button
onClicked: {
//get the food
for(var i = 0; i < colFood.children.length; i++) {
var rdoFood = colFood.children[i]
if(rdoFood.checked) strFood = rdoFood.text
}
for(var j = 0; j < colDrink.children.length; j++) {
var rdoDrink = colDrink.children[j]
if(rdoDrink.checked) strDrink = rdoDrink.text
}
popup.open()
}
}
}
Round button QML:
code:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
Window {
width: 640
height: 480
visible: true
id: root
title: qsTr("Round Button")
property int value: 0
Row {
id: row
x: 146
y: 169
width: 200
height: 400
spacing: 25
RoundButton {
id: roundButton
text: "+"
font.bold: true
font.pointSize: 15
onClicked: value++
}
RoundButton {
id: roundButton1
text: "-"
font.bold: true
font.pointSize: 15
onClicked: value--
}
Label {
id: label
text: "Value: "+root.value
font.pointSize: 25
}
}
}
output:
