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

【问题标题】：For QML, why LayoutMirroring doesn't work in Slider?对于 QML，为什么 LayoutMirroring 在 Slider 中不起作用？
【发布时间】：2017-06-19 08:53:14
【问题描述】：

今天我尝试了QtQuick.Controls中的Slider，我的滑块是从左到右的，我想通过LayoutMirroring.enabled将我的滑块设置为从右到左，最后我发现我不能'不反转滑块。

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

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

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

【问题讨论】：

您使用哪个Slider？来自QtQuick.Controls 1.x 或QtQuick.Controls 2.0？

标签： qt qml qtquick2 qtquickcontrols

【解决方案1】：

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

来自documentation：

但是请记住，镜像不会影响由 Item x 坐标值定义的任何定位，因此即使启用了镜像，通常也需要应用一些布局修复来支持所需的布局方向。

QtQuick.Controls 1.x-Slider 使用一个很大程度上基于坐标的implementation，并且没有进一步的预防措施来支持LayoutMirroring。

但是Sliders 布局通常是对称的，所以您需要做的就是将值从 (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 之间安装bidirectional binding。

【讨论】：

我使用的是 QtQuick.Controls 1.3，如果是，我如何在 QtQuick.Controls 1.x 中做到这一点？
我添加了一个示例，关于如何镜像值和样式。

【解决方案2】：

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

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

【讨论】：