Pour QML, pourquoi LayoutMirroring ne fonctionne pas dans Slider?

Question

Aujourd'hui, j'ai essayé le curseur dans QtQuick.Controls, mon curseur est de gauche à droite, je veux définir mon curseur de droite à gauche en utilisant LayoutMirroring.enabled, enfin, je ne pouvais pas inversé le curseur.

Voici mon petit code de démonstration, alors comment pouvons-nous inverser un curseur?

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 

    Slider{ 
     id:test 
     value: 0.2 
     width:400 
     LayoutMirroring.enabled: true 
    } 
} 

Answer 1

Si vous utilisez le Slider de QtQuick.Controls 2.x - au moins pour moi - cela fonctionne comme un charme. Si vous utilisez le Slider de QtQuick.Controls 1.x ce n'est pas le cas.

De l'documentation:

Gardez à l'esprit, cependant, que la mise en miroir n'affecte pas le positionnement défini par l'article coordonnée x la valeur, de sorte que même avec la fonction miroir est activé, il sera souvent nécessaire d'appliquer certaines corrections de mise en page pour prendre en charge la direction de mise en page souhaitée.

Le QtQuick.Controls 1.x - Slider utilise cependant une coordonnée en grande partie basée implementation et n'a pas d'autres précautions pour soutenir le LayoutMirroring.

Cependant, la disposition Slider s est généralement symétrique, il suffit donc de mapper les valeurs de (0,1) à (1,0). Cela devrait être une tâche facile pour un développeur.

import QtQuick.Controls 1.3 
import QtQuick.Controls.Layouts 1.3 
import QtQuick.Controls.Private 1.3 // Needed for a mysterious value from the original, now mirrored style. 
Slider { 
    y: 40 
    id: sli 
    width: parent.width 
    minimumValue: 50 
    maximumValue: 100 

    property real mirroredValue: maximumValue - value + minimumValue 

    // Invert style 
    style: SliderStyle { 
     groove: Item { 
      property color fillColor: "#49d" 
      anchors.verticalCenter: parent.verticalCenter 
      // Whatever TextSingleton is. You need to import QtQuick.Controls.Private 1.x for it. 
      implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5) 
      implicitHeight: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.3)) 
      Rectangle { 
       radius: height/2 
       anchors.fill: parent 
       border.width: 1 
       border.color: "#888" 
       gradient: Gradient { 
        GradientStop { color: "#bbb" ; position: 0 } 
        GradientStop { color: "#ccc" ; position: 0.6 } 
        GradientStop { color: "#ccc" ; position: 1 } 
       } 
      } 
      Item { 
       clip: true 
       x: styleData.handlePosition // let the fill-stuff start at the handle position... 
       width: parent.width - styleData.handlePosition // and end at the end of the groove. 
       height: parent.height 
       Rectangle { 
        anchors.fill: parent 
        border.color: Qt.darker(fillColor, 1.2) 
        radius: height/2 
        gradient: Gradient { 
         GradientStop {color: Qt.lighter(fillColor, 1.3) ; position: 0} 
         GradientStop {color: fillColor ; position: 1.4} 
        } 
       } 
      } 
     } 
    } 
} 

Si vous wan't pour définir la valeur de votre curseur, vous devez installer un bidirectional binding entre mirroredValue et value.