QML Tumbler style and wrapmode

[J.Hilk]

Hello everyone,

currently I try to implement the Tumbler item and I have some issues, hopefully soemone can help me out here.

What I want to create:

A single column Tumbler that ranges from min to max with an initial item anywhere in between.
I want to highlight the currentIndex/Item with a Border and paint the whole tumbler in a 3d-ish way.
A cpp-backend generates the model and the current index.

What I tried:

I tried it with the import QtQuick.Controls 2.2 Tumbler

Tumbler{
            id:tumblerItem
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: header.bottom
            anchors.bottom: parent.bottom

            wrap: false

            font.pixelSize: 18

            property bool bModelChanged: true

            model: TumblerBackend.model
            onModelChanged: if(init){
                                root.visible = true
                                bModelChanged = true
                            }

            currentIndex: TumblerBackend.currentIndex
            onCurrentIndexChanged:{
                if(!init && !bModelChanged)
                    TumblerBackend.valueFromIndex(currentIndex)
                else
                    bModelChanged = false
            }
        }

The problem with this one, I'm not sure how to style the tumbler. But more importantly when I show the Tumbler, it starts spinning from 0 to the current index. It does not get initalized with the currentIndex!!!

So I tried import QtQuick.Controls 1.4 with import QtQuick.Controls.Styles 1.4

Tumbler{
            id:tumblerItem
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: header.bottom
            anchors.bottom: parent.bottom

            TumblerColumn {
                id:valueColumn
                model: TumblerBackend.model
                width: parent.width-12

            }
            style: TumblerStyle {
                        id: tumblerStyle
                        visibleItemCount: 5

                        delegate: Item {
                            implicitHeight: (tumblerItem.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount

                            Rectangle{
                                anchors.fill: parent
                                anchors.margins: 1
                                border.color:styleData.current ? "black" : "transparent"
                                border.width: 3
                                color: "transparent"
                            }

                            Text {
                                id: label
                                text: styleData.value
                                font.pixelSize: 18
                                color: styleData.current ? "black" : "#666666"
                                opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
                                anchors.centerIn: parent
                            }
                        }
                    }
        }

This one gets initialized with the currentIndex shown(no initial spinning) It gets drawn in the 3d-is way and has the highlight frame. But I don't see how I can disable wraping.

Question:
Does anyone know a way to modify either of the Tumblers to fit my wishes?

Edit:
I should add how I calculate the current index and the model:

void createModel()
{
    for(double i(from()); i < to(); i+=stepRange()){
        list.append(QString::number(i));
    }

    createIndexFromDouble(list);
    setModel(list);
}

void createIndexFromDouble(QStringList &list)
{
    bool ok = false;
    double index= 0;
    for(int i(0); i < list.size();i++){
        index = list.at(i).toDouble(&ok);
        if(ok){
            if(index == value()){
                setCurrentIndex(i);
                return;
            }
        }
    }
}

[J.Hilk]

OK, I managed a workaround to with the import QtQuick.Extras 1.4 - Tumbler, however I'm not satisfied with it, because it (feels like it)is really hackish.

I added 2 empty elements to the beginning and the end of my list and a Timer that sets the index to the last valid index when one scrolls outside the valid items

Timer{
            id:tReset
            interval: 0
            repeat: false
            running: false
            onTriggered: if(valueColumn.currentIndex < 3)
                             tumblerItem.setCurrentIndexAt(0,2)
                         else if(valueColumn.currentIndex > TumblerBackend.currentIndexCount()-3)
                             tumblerItem.setCurrentIndexAt(0,TumblerBackend.currentIndexCount()-3)
        }

Tumbler{
            id:tumblerItem
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: header.bottom
            anchors.bottom: parent.bottom


            TumblerColumn {
                id:valueColumn
                model: TumblerBackend.model
                onModelChanged:{
                    root.visible = true
                }
                width: parent.width-12

                onCurrentIndexChanged: {
                    if(currentIndex < 3)
                        tReset.start()
                    else if(currentIndex > TumblerBackend.currentIndexCount()-3)
                        tReset.start()
                }

            }
            style: TumblerStyle {
                        id: tumblerStyle
                        visibleItemCount: 5

                        delegate: Item {
                            implicitHeight: (tumblerItem.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount

                            Rectangle{
                                anchors.fill: parent
                                anchors.margins: 1
                                border.color:styleData.current ? "black" : "transparent"
                                border.width: 3
                                color: "transparent"
                            }

                            Text {
                                id: label
                                text: styleData.value
                                font.pixelSize: 18
                                color: styleData.current ? "black" : "#666666"
                                opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
                                anchors.centerIn: parent
                            }
                        }
                    }
        }