04_ Una breve introducción al compilador

introducir

Qt Quick Designer: el nuevo y recomendado diseñador de interfaz de Qt, que se puede combinar con qml para diseñar una hermosa interfaz.
La interfaz se puede diseñar arrastrando el diseñador, y todo el proceso de diseño se mostrará en el archivo qml correspondiente al mismo tiempo. Al mismo tiempo, puede modificar directamente el archivo qml y ver el efecto modificado en el diseñador.

Instrucciones:

Después de seleccionar el archivo qml, haga clic en Diseño para ingresar al editor qml.
Funciones comunes de la interfaz de la máquina de edición:

Ejemplo de diseño:

1. Elija un rectángulo de la biblioteca
2. Diseñe el estilo básico del elemento en las Propiedades a la derecha (diseñe el estilo de diseño en el diseño y diseñe los atributos específicos en el formulario de fondo)
3. Tal patrón de gradiente se puede diseñar
   

Aquí está el código qml correspondiente:

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
    }
}

Las esquinas redondeadas del rectángulo se pueden establecer en radio