QML Gridview重叠单元格

Question

在 QmL GridView 中，当应用不同的单元格宽度值时，单元格会重叠。

我的要求是第一列单元格宽度应该是 150 其余列的单元格宽度值应为 100。

我们如何实现相同的功能？

这里我需要 150 的单元格宽度用于列 标题。如何才能做到这一点？ 我不能使用简单的网格，因为我需要此应用程序的 highlight 和 model 属性。

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，但正如您指出缺少突出显示和模型功能一样，您可以使用 Repeater 和矩形来实现，如下所示：

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