QML Gridview overlapping cells - qt

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

Answer 1

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