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似乎无法识别width的真实Tumbler。

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

Answer 1

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

这有助于在这样的时间打破Rectangle：

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的{{1}}为calculated based on the width of each individual TumblerColumn。这允许您为列设置单独的宽度，这对于某些比其他更宽的场景是必需的，例如：

因此，您还应该设置列的Tumbler，或者，最好只设置列的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像素，但该列仍有其原始（更宽）的宽度。

无法定位自定义风格的Tumbler

1 个答案: