QML beginner

One 、 New projects

1. choice Qt Quick Application Empty

2. Name it QmlDemoa, Then all for the next step

3. At this point, the project directory and demonstration effect

Two 、 Create another component

1. choice QtQuick UI File

Wrong English type here ：component1

2. The structure of the current project

3. Design new qml We can directly use qml.ui Drag and drop design
In this demonstration, I will add it in the form of code .
Generated in the project directory component.qml and component1.ui.qml In fact, both can be used ,qml You can call ui Any element in , If you are directly in ui Drag and drop , Will automatically generate code in ui.qml. Of course, our code can be written in any file , It's all about personal preference .

3、 ... and 、 Code

component1.qml

import QtQuick 2.4

Rectangle {
    
    property alias mouseArea:mouseArea
    property alias topRect:topRect//define the property name
    width: 360
    height: 360//set form's width and height
    MouseArea{
    
        id:mouseArea//name
        anchors.fill: parent
    }
    //the first rectangle
    Rectangle{
    
        rotation:45//define the rotation angle
        //set the position,size and color
        x:40
        y:50
        width: 100
        height: 100
        color: "blue"
    }
    //the second rectangle
    Rectangle{
    
        id:topRect//id
        opacity: 0.5
        scale: 0.8 //scale the size
        x:135
        y:60
        width: 100
        height: 100
        radius: 8
        gradient: Gradient{
    
            GradientStop{
    position: 0.0;color:"yellow"}
            GradientStop{
    position:1.0;color: "red"}
        }
        border{
    width: 3;color: "green"}
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

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

    }
}

Four 、 summary

such , A simple qml Application setup is complete , Component development is now a popular way of Internet , Once learned VUE3 Large scale application , The advantage is better coupling , It is convenient for later code maintenance , After all, the declaration cycle of a software program ,20% Time in development ,80% Time for maintenance .

5、 ... and 、 design sketch

demo Download address ：https://download.csdn.net/download/qq_38491692/85448974