Important: Please read the Qt Code of Conduct -

QML Tumbler horizontally align visible items separately

  • Hi I am using a QML Tumbler item with Qt5.5 and have a tumbler showing three visible elements and am trying to have the delegate above the current item aligned to the top of the tumbler and the delegate below the current item to align to the bottom - just to set some space between the three elements and fill the tumbler.

                id: tumblerStyle
                visibleItemCount: 3
                background: Item{
                    id: background_tmblr
                    visible: false
                foreground: Item{
                    id: foreground_tmblr
                    visible: false
                delegate: Item {
                    id: delegate_style
                    implicitHeight: (parent.height - - padding.bottom) / tumblerStyle.visibleItemCount
                    implicitWidth: (parent.width - - padding.bottom)
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    anchors.centerIn: parent
                        ColumnLayout {
                            id: metadata_tmbler
                            anchors.fill: parent
                            spacing: 10
                            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                            Text {
                                verticalAlignment: styleData.current? Text.AlignVCenter : styleData.displacement > 0? Text.AlignBottom : Text.AlignTop
                                horizontalAlignment: Text.AlignHCenter
                                Layout.preferredWidth: 300
                                Layout.preferredHeight: 40
                        }//Column Layout
                }//delegate Item

    but I can't seem to get the vertical alignment to accurately show this.
    Top Item - aligned to top of tumbler
    Middle Item - aligned to center of tumbler
    Bottom Item - aligned to bottom of tumbler