04_ A brief introduction to the compiler

introduce

Qt Quick Designer: Qt's new and recommended interface designer, which can be combined with qml to design a beautiful interface.
The interface can be designed by dragging in the designer, and all the design process will be displayed in the corresponding qml file at the same time. At the same time, you can directly modify the qml file and view the modified effect in the designer.

Instructions:

After selecting the qml file, click Design to enter the qml editor.
Common functions of the interface of the editing machine:
insert image description here

Design example:

Pick a rectangle from Library
Design the basic style of the element in the Properties on the right (design the layout style in the layout, and design the specific attributes in the backgroundform)
Such a gradient pattern can be designed

Here is the corresponding qml code:

import QtQuick 2.4


Item {
    
    
    width: 200
    height: 200
    property alias buttonColor: button.color
    property alias displayText: display.text


    Rectangle {
    
    
        id: button
        radius: width * 0.5
        anchors.fill: parent
        gradient: Gradient {
    
    
            GradientStop {
    
    
                position: 0
                color: "#970a0a"
            }


            GradientStop {
    
    
                position: 1
                color: "#000000"
            }
        }


        Text {
    
    
            id: display
            x: 60
            y: 75
            width: 80
            height: 50
            color: "#fef3f3"
            text: qsTr("Text")
            font.pixelSize: 24
            font.family: "Arial"
            font.bold: true
            minimumPixelSize: 27
            rotation: -0.595
        }
    }
    
    BackgroundForm {
    
    
        id: backgroundForm
        x: -132
        y: -91
    }
}

The rounded corners of the rectangle can be set in radius
insert image description here