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

Posted 2023-02-16

【中文标题】对于 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？

【参考方案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