Перекрывающиеся ячейки QML Gridview

Question

В QmL GridView при применении различных значений для ширины ячейки ячейки перекрываются.

Мое требование: ширина ячейки первого столбца должна быть 150, а ширина ячейки остальных столбцов должна быть 100.

Как мы можем реализовать то же самое?

здесь мне нужна ширина ячейки 150 для столбца заголовков . Как это может быть сделано? я не могу использовать простую сетку, так как мне нужно выделение и свойство модели для этого приложения.

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

вывод текущего кода

Answer 1

GridView разработан таким образом, что все элементы имеют одинаковый размер. Вместо этого вы должны использовать Grid, но, как вы указали, отсутствие подсветки и функциональности модели, но вы можете добиться этого с помощью повторителя и прямоугольника, как показано ниже:

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