QML GridView实现不等宽键盘：如何指定按键起始列位置

问题背景 #

我要实现一个简易键盘，除Shift、空格和Delete键外所有按键宽度一致。采用基于QAbstractListModel的ListModel和QML委托，通过单元格内容动态计算按键宽度（基本可用但不完善）。目前仅Shift键能正常显示对应宽度，当前布局与预期不符——预期最后一行中，空格键从第3列开始、Delete键从第9列开始，且空格为黄色、Delete为绿色。

现有代码 #

KeyboardDelegate.qml #

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts  

Item { id: item 
    property real p_height
    property real p_width
    property string p_selectedButton
    property string p_selectedBorder
    property string p_releasedButton
    property string p_releasedBorder
    property bool v_selected: grid.currentIndex == index
    property real v_cellwidth: r_text == "#space" ? p_width * 6 : r_text == "#shift" || r_text == "#delete" ? p_width * 2 : p_width 

    Rectangle { height: p_height - 2; width: v_cellwidth - 2; radius: 4
        color: v_selected ? p_selectedButton : p_releasedButton
        border.color: v_selected ? p_selectedBorder : p_releasedBorder
        
        Label { anchors.centerIn: parent; text: r_text }

        MouseArea { anchors.fill: parent; onClicked: function(mouse) { grid.currentIndex = index }}
    }

    Component.onCompleted: {
        console.log("Keyboarddelegate " + r_text + " x " + v_dnywidth)
    }
}

Keyboard.qml #

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import System.ColorsEnum 1.0
import System.SizesEnum 1.0

Rectangle { id: keyboard; 
    property string v_selectedButton: cp_display.getColor(Colors.ButtonSelected)
    property string v_selectedBorder: cp_display.getColor(Colors.ButtonSelectedBorder)
    property string v_releasedButton: cp_display.getColor(Colors.ButtonReleased)
    property string v_releasedBorder: cp_display.getColor(Colors.ButtonReleasedBorder)

    GridView { id: grid; width: parent.width; height: parent.height; flow: GridView.FlowLeftToRight
        model: cp_screen.keyboardListModel
        cellWidth: parent.width / 10
        cellHeight: (parent.height / 5) - 5
        delegate: KeyboardDelegate { p_height: grid.cellHeight; p_width: grid.cellWidth; p_selectedButton: v_selectedButton; p_selectedBorder: v_selectedBorder; p_releasedButton: v_releasedButton; p_releasedBorder: v_releasedBorder }
    }
}

解决方案 #

核心问题分析 #

当前使用的GridView是固定单元格布局组件，每个委托项默认占据一个单元格位置，即使手动修改委托宽度，也会导致后续项布局错位（因为GridView仍按单单元格顺序排列）。要实现精确的行列跨度控制，推荐改用GridLayout组件。

具体修改步骤 #

1. 扩展Model数据

在QAbstractListModel中新增三个角色：

• rowIndex: 按键所在行号
• columnIndex: 按键起始列号
• columnSpan: 按键占据的列数

最后一行的按键数据示例：

• 空格：rowIndex=4，columnIndex=2，columnSpan=6（从第3列开始，占6列）
• Delete：rowIndex=4，columnIndex=8，columnSpan=2（从第9列开始，占2列）

2. 替换GridView为GridLayout

修改Keyboard.qml，用GridLayout替代GridView，通过Repeater加载委托：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import System.ColorsEnum 1.0
import System.SizesEnum 1.0

Rectangle { id: keyboard; 
    property string v_selectedButton: cp_display.getColor(Colors.ButtonSelected)
    property string v_selectedBorder: cp_display.getColor(Colors.ButtonSelectedBorder)
    property string v_releasedButton: cp_display.getColor(Colors.ButtonReleased)
    property string v_releasedBorder: cp_display.getColor(Colors.ButtonReleasedBorder)

    GridLayout { 
        id: grid; 
        anchors.fill: parent;
        columns: 10; // 总列数固定为10
        rowSpacing: 5;
        columnSpacing: 0;

        Repeater {
            model: cp_screen.keyboardListModel
            delegate: KeyboardDelegate { 
                // 绑定布局属性
                Layout.row: model.rowIndex
                Layout.column: model.columnIndex
                Layout.columnSpan: model.columnSpan
                Layout.fillHeight: true

                p_height: grid.height / 5 - 5;
                p_width: grid.width / 10;
                p_selectedButton: v_selectedButton; 
                p_selectedBorder: v_selectedBorder; 
                p_releasedButton: v_releasedButton; 
                p_releasedBorder: v_releasedBorder;
                v_selected: grid.currentIndex == index
            }
        }

        property int currentIndex: -1 // 维护选中状态索引
    }
}

3. 调整委托逻辑

修改KeyboardDelegate.qml，根据columnSpan计算宽度，并添加颜色设置：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts  

Item { id: item 
    property real p_height
    property real p_width
    property string p_selectedButton
    property string p_selectedBorder
    property string p_releasedButton
    property string p_releasedBorder
    property bool v_selected: false
    // 由列跨度计算实际宽度
    property real v_cellwidth: p_width * model.columnSpan - 2

    Rectangle { 
        height: p_height - 2; 
        width: v_cellwidth; 
        radius: 4
        // 设置预期颜色
        color: {
            if (r_text == "#space") return "yellow";
            if (r_text == "#delete") return "green";
            return v_selected ? p_selectedButton : p_releasedButton;
        }
        border.color: v_selected ? p_selectedBorder : p_releasedBorder
        
        Label { anchors.centerIn: parent; text: r_text }

        MouseArea { 
            anchors.fill: parent; 
            onClicked: grid.currentIndex = index;
        }
    }
}

效果说明 #

• GridLayout通过columnSpan直接控制每个按键的列占比，不会出现布局错位问题
• 空格和Delete键的位置通过columnIndex精确指定，符合预期要求
• 直接在委托中判断按键类型设置颜色，实现黄色空格、绿色Delete的效果

内容的提问来源于stack exchange，提问作者user2377283