qml - 无法定位自定义样式的不倒翁

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

whereMyTymblerStyle定义如下：

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好像不认真本width了Tumbler。

为什么？当我不使用它时它确实有效MyTumblerStyle。

Answer 1

问题不在于你的风格，而在于width任务。

Rectangle它有助于像这样一次打破s：

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你设置）

的implicitWidth是根据每个个体的宽度计算Tumbler的。这允许您为列设置单独的宽度，这对于某些比其他更宽的场景是必要的，例如：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列仍然具有其原始（更宽）宽度。