对于 QML，为什么 LayoutMirroring 在 Slider 中不起作用？

Question

今天我尝试了 QtQuick.Controls 中的滑块，我的滑块是从左到右的，我想使用 LayoutMirroring.enabled[=16 将我的滑块设置为从右到左=], 终于发现无法反转滑块

这是我的小演示代码，那么我们如何反转滑块？

Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Slider{ id:test value: 0.2 width:400 LayoutMirroring.enabled: true } }

Answer 1

如果您使用 QtQuick.Controls 2.x 中的 Slider - 至少对我来说 - 它就像一个魅力。如果您使用 QtQuick.Controls 1.x 中的 Slider，则不会。

来自documentation：

Keep in mind, however, that mirroring does not affect any positioning that is defined by the Item x coordinate value, so even with mirroring enabled, it will often be necessary to apply some layout fixes to support the desired layout direction.

然而，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}
                    }
                }
            }
        }
    }
}

如果您不想设置滑块的值，则需要在 mirroredValue 和 value 之间安装一个。

Answer 2

我遇到了类似的问题。我的滑块是垂直的，值从底部到顶部增加。我希望它们从上到下增加。我使用旋转来完成它。我认为你可以这样解决你的问题：

Slider {
    id: test
    value: 0.2
    width: 400
    rotation: 180 // This should make the slider right-to-left
}

对于 QML，为什么 LayoutMirroring 在 Slider 中不起作用？

For QML, why LayoutMirroring doesn't work in Slider?

qt

qml

qtquick2

qtquickcontrols