QML Gridview overlapping cells

Question

In QmL GridView when applying different values for cellwidth, the cells are getting overlapped.

My requirement is first column cellwidth should be 150 and the rest of the columns cell width value should be 100.

How can we implement the same?

here i need a cellwidth of 150 for the column headings. how can this be done? i can't use the simple grid as i need the highlight and model property for this application.

import QtQuick 2.12
import QtQuick.Window 2.12
Window 
{
    id: parent_win
    visible: true
    width: 800
    height: 400
    property int cur_row: 0
    property int cur_col: 0
    property int col_count: 0
    property int row_count: 0
    Rectangle {
        id: modelrect
        anchors.left: row_header.right
        width: 600; height: 400
        color: "white"
        border.color: "red"
        ListModel 
{
            id: appModel
            ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
            ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
            ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
            ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
            ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
            ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
            ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
            ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
            ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
            ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
            ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
            ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
            ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
            ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
            ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
            ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
            ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
            ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
            ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
            ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
            ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
            ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
            ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
            ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
        }
        GridView {
            id : test
            anchors.fill: parent
            cellWidth:  100
            cellHeight: 100
            focus: true
            model: appModel

            highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }
            delegate: Item {
                width: test.cellWidth
                height: test.cellHeight
                    Image {
                        id: myIcon
                        y: 20; anchors.horizontalCenter: parent.horizontalCenter
                        //source: icon
                    }
                    Text {
                        anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
                        text: name
                        color: (name === "Heading") ? "blue" : "black"
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: parent.GridView.view.currentIndex = index
                    }
            }
        }
    }
}

output of the current code

eyllanesc eyllanesc · Accepted Answer · 2020-01-07T05:42:19

GridView is designed so that all items are the same size. Instead you should use Grid but as you point out the lack of highlighting and model functionality but that you can achieve using a Repeater and a rectangle as I show below:

import QtQuick 2.12
import QtQuick.Window 2.12

Window
{
    id: parent_win
    visible: true
    width: 800
    height: 400

    ListModel
    {
        id: appModel
        ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
        ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
        ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
        ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
        ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
        ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
        ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
        ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
    }

    Rectangle {
        id: modelrect
        anchors.fill: grid
        width: 650; height: 400
        color: "white"
        border.color: "red"
    }

    Grid{
        id : grid
        property int currentIndex: 0
        columns: 6
        focus: true
        Repeater{
            id: repeater
            model: appModel
            Rectangle{
                width: col == 0 ? 150 : 100
                height: 100
                property int row: index / grid.columns
                property int col: index % grid.columns
                focus: index == grid.currentIndex
                color: focus ? "lightsteelblue": "transparent"
                Keys.onPressed: {
                    var tmp_index = grid.currentIndex
                    if (event.key === Qt.Key_Down) {
                        tmp_index += grid.columns
                    }
                    else if (event.key === Qt.Key_Up) {
                        tmp_index -= grid.columns
                    }
                    else if (event.key === Qt.Key_Left) {
                        tmp_index -= 1
                    }
                    else if (event.key === Qt.Key_Right) {
                        tmp_index += 1
                    }
                    grid.currentIndex = Math.min(repeater.count - 1, Math.max(0, tmp_index))
                }
                Image {
                    id: myIcon
                    y: 20; anchors.horizontalCenter: parent.horizontalCenter
                    //source: icon
                }
                Text {
                    anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
                    text: name
                    color: (name === "Heading") ? "blue" : "black"
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: grid.currentIndex = index
                }
            }
        }
    }
}

QML Gridview overlapping cells

1 Answers