QML first day

Catalog

Create a demo:

open VS2022

Select your own storage path and project name :

Next configure Qt

Choose the compilation environment :

Run it :

QML knowledge :

Be careful : Use VS2022 Development QML When I write the wrong attribute VS There's no mistake , But the software just doesn't work . So use vs Development qml Must pay attention to qml The properties of must be checked for correctness .

stay QML Signal slots are defined in :

---

establish QML, The environment I use is win10 System ,VS2022+Qt6.2 Study QML.

Let's not talk about the environment , Actually, it's very good to build. There are many ways to build on the Internet .

Create a demo:

open VS2022

 

Select your own storage path and project name :

Next configure Qt

Choose the compilation environment :

I choose vs2019 debug Version of

Run it :

The basic has been created .

Next learn QML Knowledge in . I have seen a little before , Personally, I think it is similar to WPF similar . I feel quite friendly . I don't know whether it will be easy to learn in the future .

QML knowledge :

import QtQuick 2.9
import QtQuick.Window 2.2

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

This is QML The default code when creating

This one in the code Window It is the window after running , There are several properties .

The first attribute is the visible attribute , visible If set to true Is visible ,false Even if the code is running, there will be no window .

height and width Is to set the height and width of the window .

title Property is used to set the title of the window .

import QtQuick 2.9
import QtQuick.Window 2.2

Window {//root  Control , Equivalent to the main interface 
    visible: true
    width: 640
    height: 480
    x:50
    y:60    // Relative to the parent control 
    title: qsTr("My QML")
}

In the code snippet x and y Property is used to set where the software displays . Now the software is from (50,60) This coordinate starts to show . be relative to window This control ,window Is the display coordinates .

If it's in another space x and y Is the position relative to other controls .

The display coordinates are based on the upper left corner , It looks something like this .

Limit window size

    minimumWidth: 400
    minimumHeight: 300
    maximumWidth: 800
    maximumHeight: 500

Be careful : Use VS2022 Development QML When I write the wrong attribute VS There's no mistake , But the software just doesn't work . So use vs Development qml Must pay attention to qml The properties of must be checked for correctness .

    color:"#FF00FF"
    opacity:0.5

color Is to set the color of the form

opacity Is to set the transparency of the form

stay QML Signal slots are defined in :

stay qml Custom signals in :signal mySig()

This is a signal ,mySig It's a signal ;

Slot function :

    onMySig:{
    
    }

In front of them on and M Be sure to capitalize .

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400
    minimumWidth: 400
    minimumHeight: 300
    maximumWidth: 800
    maximumHeight: 500
    color:"#FF00FF"
    opacity:0.5
    title: qsTr("My QML")

    signal mySig()





    onMySig:{
    
    }
}

    Button{
        id:btn1
        width:50
        height:50
        focus:true
        objectName:"btn1"
        background:Rectangle{
            border.color:btn1.focus?"blue":"black"
        }
        onClicked:{
            console.log("btn1 clicked")
        }
        Keys.onRightPressed:{
            btn2.foucs = true
        }
    }
    Button{
        id:btn2
        width:50
        height:50
        x: 100
        objectName:"btn2"
        background:Rectangle{
            border.color:btn2.focus?"blue":"black"
        }
        onClicked:{
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed:{
            btn1.foucs = true
        }

    }

This is the addition of button Space :import QtQuick.Controls 2.3 Need to add

        onClicked:{
            console.log("btn1 clicked")
        }

This is the system slot function .