La ventana QML rebota al cambiar de tamaño y posició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).
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.
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:
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 elementoApplicationWindow
y configúralo enScreen.width - width
. Esto asegurará que tu ventana esté pegada a la alineación derecha de la pantalla durante el redimensionamiento.Paso 3: Usar NumberAnimation para redimensionar
Utiliza el elemento
NumberAnimation
para redimensionar tu ventana durante la animación o el redimensionamiento explícito. La propiedadeasing.type
deNumberAnimation
puede configurarse enEasing.InOutQuad
para proporcionar una transición suave entre diferentes tamaños.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 elementoButton
para alternar el valor de esta propiedad al hacer clic. Esto cambiará el tamaño de la ventana según el elementoNumberAnimation
.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.