Multiple gridviews inside scrollview QML

Question

I have a scrollview in which I want to place two gridviews with the same delegate, but with different models. However, I want them to "share" the highlighting feature, although I want the models to be highlighted differently. Is this possible? Right now the gridviews overlap inside the scrollview.

    ScrollView {
    anchors.fill: parent
    GridView{
        id: grid
        anchors.fill: parent
        cellHeight: 30
        cellWidth: parent.width
        model: model1
        delegate: delegate
        highlight: Rectangle {
            color: "red";
            radius: 5
            focus:true
        }
    }


    GridView {
        focus: true
        model: model2
        delegate: delegate
    }

You say that "I want them to "share" the highlighting feature, although I want the models to be highlighted differently". What does it mean exactly? — skypjack
I want some of the rows in the gridview to be highlighted in one color, some in another — sondrewb
So, as an example, you want to highlight items having an odd index with a red background, otherwise the background must be green. Does it make sense? — skypjack
Kinda. The highlighting color depends on the text color of the entry. The text color is more or less "random". Also, I want the text color to be changed to a given color when highlighted. — sondrewb
I'm still not sure about what you want to achieve, anyway it looks like you can use color: model.get(grid.currentIndex).your_field_here === your_condition_here ? "red" : "yellow"; within the highlight component. You can do the same with the delegate, so that you can change the text color, even though from within the delegate you have access to the whole item, so you don't need such a reference to the grid element. — skypjack

grillvott grillvott · Accepted Answer · 2015-06-17T10:24:41

You can use the KeyNavigation attached property to override the up/down buttons when you are on the last item of the first model and first item of the last model.

An example using ListViews:

Column {
    anchors.fill: parent
    ListView{
        id: list1
        focus: true
        onFocusChanged: focus ? currentIndex = model1.count-1 : currentIndex = -1
        height: contentHeight
        width: parent.width
        model: model1
        delegate: Text { text: name }

        highlight: Rectangle { color: "red"; radius: 5 }
        KeyNavigation.down: list2
        onCurrentIndexChanged: {
            if (currentIndex == model1.count-1)
                KeyNavigation.priority=KeyNavigation.BeforeItem
            else
                KeyNavigation.priority=KeyNavigation.AfterItem
        }
    }
    ListView {
        id:list2
        focus: false
        onFocusChanged: focus ? currentIndex = 0 : currentIndex = -1
        currentIndex: -1
        model: model2
        height: contentHeight
        width: parent.width
        delegate: Text { text: name }
        highlight: Rectangle { color: "blue"; radius: 5 }
        KeyNavigation.up: list1
        onKeyNavigationWrapsChanged: console.log("k")
        onCurrentIndexChanged: {
            if (currentIndex == 0)
                KeyNavigation.priority=KeyNavigation.BeforeItem
            else
                KeyNavigation.priority=KeyNavigation.AfterItem
        }
    }
}

In this example, it will seem like this is one single model, but they will use different highlighters.

Multiple gridviews inside scrollview QML

1 Answers