es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Creando un diálogo QML redimensionable

Estoy intentando hacer un diálogo redimensionable:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.12

ApplicationWindow {
width: 640
height: 480
visible: true
title: qsTr(“Test”)

Dialog {
    id: dlg
    x: 10
    y: 10
    width: 100
    height: 100
    visible: true

    Rectangle {
        anchors.fill: parent
        color: "blue"
    }

    MouseArea {
        height: 40
        width: 40
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        Rectangle {
            anchors.fill: parent
            color: "red"
        }

        property real startX: 0
        property real startY: 0
        property real startWidth: 0
        property real startHeight: 0

        onPressed: {
            startX = mouseX;
            startY = mouseY;

            startWidth = dlg.width;
            startHeight = dlg.height;
        }

        function fnc_updatePos() {
            if (pressed) {
                var deltaX = mouseX-startX;
                var deltaY = mouseY-startY;
                dlg.width = startWidth + deltaX;
                dlg.height = startHeight + deltaY;
            }
        }

        onPositionChanged: fnc_updatePos()
    }
}

}

El código redimensiona el diálogo, pero el diálogo parpadea durante el arrastre. El problema es que el área del mouse forma parte del diálogo. ¿Cómo se puede mejorar el código para lograr un escalado adecuado del diálogo emergente?

Saludos

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Como has identificado correctamente, el parpadeo se debe a que el MouseArea forma parte del Diálogo. Para solucionar este problema, debes separar el MouseArea del Diálogo y utilizarlo para capturar eventos del mouse (es decir, hacer clic y arrastrar) para redimensionar el Diálogo. Aquí tienes un código actualizado para lograr esto:

    “`import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Window 2.12

    ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr(“Test”)

    Dialog {
        id: dlg
        x: 10
        y: 10
        width: 100
        height: 100
        visible: true
    
        Rectangle {
            anchors.fill: parent
            color: "blue"
        }
    }
    
    MouseArea {
        height: 40
        width: 40
        anchors.right: dlg.right
        anchors.bottom: dlg.bottom
    
        Rectangle {
            anchors.fill: parent
            color: "red"
        }
    
        property real startX: 0
        property real startY: 0
        property real startWidth: 0
        property real startHeight: 0
    
        onPressed: {
            startX = mouseX;
            startY = mouseY;
    
            startWidth = dlg.width;
            startHeight = dlg.height;
        }
    
        function fnc_updatePos() {
            if (pressed) {
                var deltaX = mouseX-startX;
                var deltaY = mouseY-startY;
                dlg.width = startWidth + deltaX;
                dlg.height = startHeight + deltaY;
            }
        }
    
        onPositionChanged: fnc_updatePos()
    }
    

    }“`

    En este código actualizado, el MouseArea se coloca fuera del Diálogo y se ancla a su esquina inferior derecha. La función fnc_updatePos() del MouseArea se utiliza para calcular el cambio en la posición del mouse y actualizar el ancho y alto del Diálogo en consecuencia. Este enfoque debería eliminar el problema de parpadeo que estabas experimentando.

Comments are closed.