无法定位自定义样式的 Tumbler

Question

我正在尝试 Tumbler 我自己的风格。我这样声明 Tumbler：

Tumbler {
    style: MyTumblerStyle {}
    height: UIConstants.smallFontSize * 10
    width: UIConstants.smallFontSize * 3

    TumblerColumn {
        model: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
    }
}

其中 MyTymblerStyle 定义如下：

TumblerStyle {
    id: root
    visibleItemCount: 5
    background: Rectangle {}
    foreground: Item {}

    frame: Item {}

    highlight: Item {}
    delegate: Item {
        id: delRoot
        implicitHeight: (control.height) / root.visibleItemCount
        Item {
            anchors.fill: parent

            Text {
                text: styleData.value
                font.pixelSize: UIConstants.smallFontSize
                font.family: UIConstants.robotoregular
                anchors.centerIn: parent
                scale: 1.0 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
                color: styleData.current?UIConstants.color:"black"
                opacity: 1 - Math.abs(styleData.displacement/(root.visibleItemCount-3))
            }
        }
    }

}

我像这样在 Row 中使用它：

Row {
    MyTumbler {}
    StandardText {
        color: UIConstants.color
        text: "Uhr"
    }
}

现在，结果如下所示：

如您所见，"Uhr" 文本中心与 Tumbler 的顶部对齐。此外 Row 似乎无法识别 Tumbler.

的真实 width

为什么？当我不使用 MyTumblerStyle.

时它确实有效

Answer 1

问题不在于你的风格，而是width作业。

它有助于像这样一次打破 Rectangles:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3

ApplicationWindow {
    title: qsTr("Hello World")
    width: 300
    height: 600
    visible: true

    Column {
        anchors.centerIn: parent

        Tumbler {
            id: tumbler
            width: 30

            TumblerColumn {
                model: 25
            }

            Component.onCompleted: print(width, height, implicitWidth, implicitHeight)
        }

        Rectangle {
            width: tumbler.implicitWidth
            height: tumbler.implicitHeight
            color: "transparent"    
            border.color: "blue"

            Text {
                text: "Tumbler implicit size"
                anchors.fill: parent
                wrapMode: Text.Wrap
            }
        }

        Rectangle {
            width: tumbler.width
            height: tumbler.height
            color: "transparent"
            border.color: "blue"

            Text {
                text: "The size you gave"
                anchors.fill: parent
                wrapMode: Text.Wrap
            }
        }
    }
}

（我没有权限访问 UIConstants，所以我猜你设置的是 width）

Tumbler的implicitWidth是calculated based on the width of each individual TumblerColumn。这允许您为列设置单独的宽度，这对于某些列比其他列宽的情况是必要的，例如：

因此，您还应该设置列的 width，或者最好仅设置列的 width，而不是整个 Tumbler:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3

ApplicationWindow {
    width: 300
    height: 600
    visible: true

    Row {
        anchors.centerIn: parent

        Tumbler {
            id: tumbler

            TumblerColumn {
                model: 25
                width: 30
            }
        }
        Text {
            text: "Uhr"
        }
    }
}

这也解释了为什么 Text 的位置很奇怪； Row 看到 30 像素，但该列仍具有其原始（更宽）的宽度。

无法定位自定义样式的 Tumbler

Unable to position custom styled Tumbler

qml

qt5

qtquick2

qtquickcontrols

qtquickextras