QML

From Lost In Wonderlands
Jump to: navigation, search

QML

See also



File:Http://codereview.qt-project.org/static/logo qt.png

QML / Qt Quick

QML



QtQuick


QML and C++ interractions


other

QML Topics

A

antialiasing in QML

B

C

Changing QML view clicking a button


Coding Styles

Controls

D

E

F

G

Gradients

H

I

Imports

  • until QT6 imports are versioned
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

in Qt6 versioning will disappear

J

K

L

M

N

O

P

Properties

setting

Binding

Q

R

S

scalability/ screen size and orientation


import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12


ApplicationWindow {
   width: 480
   height: 640
   visible: true
   title: qsTr("@hello, Trilda")
   GridLayout {
        anchors.fill: parent
        flow:  width > height ? GridLayout.LeftToRight : GridLayout.TopToBottom
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 20
            Image {
                id: trildaLogo
                fillMode: Image.PreserveAspectFit
                source: "Images/trida-gray-flower+trilda-comics-sans-ms.png"
                Layout.alignment: Qt.AlignCenter
                Layout.fillWidth:  true
                Layout.preferredWidth: 150
                Layout.preferredHeight: 250
                Rectangle {
                    id: trildaLogoHighlight
                    anchors.fill: parent
                    opacity: 0.3
                    visible: false
                    radius: height
                    gradient: Gradient {
                        GradientStop {
                           position: 0.000
                           color: Qt.rgba(1, 0, 0, 1)
                        }
                        GradientStop {
                           position: 0.167
                           color: Qt.rgba(1, 1, 0, 1)
                        }
                        GradientStop {
                           position: 0.333
                           color: Qt.rgba(0, 1, 0, 1)
                        }
                        GradientStop {
                           position: 0.500
                           color: Qt.rgba(0, 1, 1, 1)
                        }
                        GradientStop {
                           position: 0.667
                           color: Qt.rgba(0, 0, 1, 1)
                        }
                        GradientStop {
                           position: 0.833
                           color: Qt.rgba(1, 0, 1, 1)
                        }
                        GradientStop {
                           position: 1.000
                           color: Qt.rgba(1, 0, 0, 1)
                         }
                    }
                }
                MouseArea {
                    id: trildaLogoMouseArea
                    anchors.fill: parent
                    enabled: true
                    hoverEnabled: true
                    preventStealing: true
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onClicked: {
                        console.log("trilda  logo was clicked")
                        console.log("technoverse.free.fr")
                        Qt.openUrlExternally("http://technoverse.free.fr/index.php?title=Trilda")
                    }
                    onDoubleClicked: {
                        console.log("trilda  logo was double clicked")
                    }
                    onEntered:{
                        console.log("mouse entered trilda logo ")
                        trildaLogoHighlight.visible = true
                    }
                    onExited:{
                        console.log("mouse exited trilda logo")
                        trildaLogoHighlight.visible = false
                    }
                    onPositionChanged: {
                        console.log("mouse (x: " +mouseX + " y: " +mouseX + ")")
                    }
                }
            }
            Text {
                id: trildaDescription
                text: qsTr("a multipurpose<br>software development<br>company")
                font.italic: true
                horizontalAlignment: Text.AlignHCenter
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignCenter
            }
        }
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Text {
                id: trildaDescriptionQt
                text: qsTr("<b>Qt</b>,<br>QML, C++11/14/17/20/21...")
                font.italic: true
                horizontalAlignment: Text.AlignHCenter
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignCenter
            }
            Text {
                id: trildaDescriptionGoogleDroid
                text: qsTr("<b>Android</b>,<br>Android Studio, Java, Kotlin,<br>JetPack, Architecture Component")
                font.italic: true
                horizontalAlignment: Text.AlignHCenter
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignCenter
            }
            Text {
                id: trildaDescriptionApple
                text: qsTr("<b>Apple Platforms</b><br>macOS, iPadOS, iOS, tvOS, WatchOS,<br>xCode, obj-C/C++, Swift, SwiftUI<br>Cocoa, AppKit, UIKit")
                font.italic: true
                horizontalAlignment: Text.AlignHCenter
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignCenter
            }
            Text {
                id: trildaCopyrightDates
                text: qsTr("© 2009-2021")
                font.italic: true
                horizontalAlignment: Text.AlignHCenter
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignCenter
            }
        }
    }
}


Signals and Slots

T

Testing


U

V

W

X

Y

Z

QML on iOS

  • require Xcode
  • better to use Qt 5.15.x
  • it generates an Xcode Project
  • in the Xcode project you can find the launchScreen.storyboard that is shown when application starts
    • by default it shows the Qt Application name ( the project file indeed)
    • , this is of course not the usage for Apple of that lauchscreen a
    • you need to change it
  • in the Xcode Project you will find the icons required by Apple to support many devices
    • you will need to add them particularly the 1024 pixels wide icon for the App Store
  • in xCode Project you will also find the info.plist for the generated App
    • in this info .plist file you need to add many stuff , user authorization grants, many settings
  • in the Xcode file you might find localization for the lauchnscreen if it is required
    • ( this is not recommended by Apple and could lead to a reject form the App Store, at least a request for required change)


  • with Qt6.x.x I have an issue :
    • on installing it on a Mac mini M1,
    • the maintenance tool seems to not be able to install every packages required
    • it does not even propose them in the install list of modules

QML on Android

  • on a Mac mini M1 I did not yet succeed to lauch it either on a simulator or a connected device
    • but this is not an ended story
    • the issue is that the simulator ran in troubles about the M1 mini , should it an as an HAXM x86 simulator with an x86 rom or as another configuration ???
    • I Guess it fails to run it because of this
    • note it succeed from android studio...
      • so the solution may be is in an option in the command line use to start it from Qt Creator

QML on WebOS


QML on sailfish OS

tutorials

samples

open source code









test

extentions for IDE

Articles

Trainings

Blogs

Tools link

Books

  • PacktPublishing Qt related books source code on GitHub

https://github.com/search?q=org%3APacktPublishing+Qt


Retrieved from "http://technoverse.free.fr/index.php?title=QML&oldid=2105"