QML Tumbler style and wrapmode



  • 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;
                }
            }
        }
    }
    


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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.