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.

La ventana QML rebota al cambiar de tamaño y posición.

13 Jul, 2023 Programación

Mi objetivo es pegar la ventana alineada a la derecha de la pantalla mientras se redimensiona.
Durante la animación (o el cambio explícito) del ancho de la ventana y x (vinculado al ancho), ApplicationWindow se desplaza hacia la izquierda (parpadeando al cambiar explícitamente).

Ventana QML que se desplaza/parpadea

Ya estuve buscando una solución, pero nada está funcionando para mí.
Añadir el atributo:

QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);

ayudó mucho, pero la ventana aún se desplaza hacia la izquierda y hacia la derecha.

main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15

ApplicationWindow {
    id: root
    height: 300
    width: 300
    visible: true
    flags: Qt.FramelessWindowHint
    x: Screen.width - width

    Material.theme: Material.Dark

    NumberAnimation on width {
        id: animation
        easing.type: Easing.InOutQuad
    }

    property var lowerSize: true

    Rectangle {
        anchors.fill: parent

        Button { 
            anchors.centerIn: parent

            enabled: !animation.running
            text: lowerSize ? 'Agrandar' : 'Reducir'
            onClicked: { 
                animation.from = lowerSize ? 300 : 600
                animation.to = lowerSize ? 600 : 300
                animation.start()
                lowerSize = !lowerSize
            }
        }
    }
}

He creado un código de ejemplo para reproducir el problema en GitHub qml-flickering-example.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para pegar la ventana a la alineación derecha y reducir el rebote/parpadeo en QML

    Si te enfrentas a un problema en el que tu ventana de QML rebota/parpadea en la pantalla durante la animación o el redimensionamiento explícito, y quieres pegar la ventana a la alineación derecha de la pantalla durante el redimensionamiento, puedes seguir estos pasos para resolver este problema:

    Paso 1: Agregar atributo Qt

    Agrega el siguiente atributo Qt en tu código QML:

    QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);

    Este atributo ayudará a reducir el parpadeo de la ventana durante la animación o el redimensionamiento explícito.

    Paso 2: Modificar el código QML

    Modifica tu código QML agregando la propiedad x en el elemento ApplicationWindow y configúralo en Screen.width - width. Esto asegurará que tu ventana esté pegada a la alineación derecha de la pantalla durante el redimensionamiento.

    ApplicationWindow {
    id: root
    height: 300
    width: 300
    visible: true
    flags: Qt.FramelessWindowHint
    x: Screen.width - width

    /*Resto del código*/
}

    Paso 3: Usar NumberAnimation para redimensionar

    Utiliza el elemento NumberAnimation para redimensionar tu ventana durante la animación o el redimensionamiento explícito. La propiedad easing.type de NumberAnimation puede configurarse en Easing.InOutQuad para proporcionar una transición suave entre diferentes tamaños.

    NumberAnimation on width {
    id: animation
    easing.type: Easing.InOutQuad
}

    Paso 4: Actualizar la propiedad para cambiar el tamaño

    Utiliza una propiedad para cambiar el tamaño de la ventana durante la animación o el redimensionamiento explícito. En el elemento Rectangle, utiliza un elemento Button para alternar el valor de esta propiedad al hacer clic. Esto cambiará el tamaño de la ventana según el elemento NumberAnimation.

    Rectangle {
    anchors.fill: parent

    Button { 
        anchors.centerIn: parent

        enabled: !animation.running
        text: lowerSize ? 'Agrandar' : 'Reducir'
        onClicked: { 
            animation.from = lowerSize ? 300 : 600
            animation.to = lowerSize ? 600 : 300
            animation.start()
            lowerSize = !lowerSize
        }
    }
}

    Estos pasos te ayudarán a pegar tu ventana a la alineación derecha de la pantalla durante el redimensionamiento y a reducir el problema de rebote/parpadeo durante la animación o el redimensionamiento explícito. También puedes consultar el código de ejemplo proporcionado en el repositorio de Github qml-flickering-example para una mejor comprensión.

Comments are closed.