對於QML，爲什麼LayoutMirroring在Slider中不起作用？

Question

今天我試了QtQuick.Controls中的滑塊，我的滑塊從左到右，我想通過使用LayoutMirroring.enabled從右到左設置我的滑塊，最後我發現我不能倒置滑塊。

這是我的小演示代碼，所以我們如何反轉滑塊？

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

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

Answer 1

如果使用Slider從QtQuick.Controls 2.x - 至少對我來說 - 它就像一個魅力。如果您使用QtQuick.Controls 1.x中的Slider，則不會。

從documentation：

請記住，但是，鏡像不會影響由項目x座標值定義的任何位置，所以即使使用鏡像功能已啓用，它往往需要申請一些佈局修復，以支持所需的佈局方向。

的QtQuick.Controls 1.x - 然而Slider使用基於implementation很大程度上協調，並沒有進一步的預防措施，以支持LayoutMirroring。

但是Slider的佈局通常是對稱的，所以您只需將值從（0,1）映射到（1,0）即可。這對開發者來說應該是一件容易的事情。

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

如果您wan't來設置滑塊的值，你需要安裝一個bidirectional bindingmirroredValue和value之間。