QML TableView点击复选框后尺寸变大的问题解决请求

问题原因 #

你当前给CheckBox设置了anchors.fill: parent，而Qt Quick Controls的CheckBox在交互状态（比如点击、悬停）下，组件自身的默认尺寸会发生变化，它会撑满整个父单元格，所以看起来就出现了点击时尺寸变大的现象。另外你的代码同时导入了QtQuick.Controls 1.4和QtQuick.Controls 2.1，两个版本的组件可能存在冲突，也会间接导致样式异常。

解决方案 #

要让CheckBox保持固定尺寸，你需要做这两步：

• 给CheckBox设置固定的width和height，直接限制它的整体尺寸范围
• 使用anchors.centerIn: parent让它在单元格内居中显示，替代填充整个单元格的布局方式

同时建议统一使用QtQuick.Controls 2.x版本，移除旧的1.4导入，避免版本冲突。

修改后的完整代码 #

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1

Rectangle {
    id: rightside
    anchors.fill: parent
    width: 1500

    TableView {
        anchors.fill: parent
        TableViewColumn {
            role: "selectall"
            title: "Select All"
            width: 100
            delegate: CheckBox {
                // 固定CheckBox的整体尺寸
                width: 20
                height: 20
                // 让CheckBox在单元格中居中，避免撑满父项
                anchors.centerIn: parent
                checked: false
            }
        }
        TableViewColumn {
            role: "size"
            title: "Size"
            width: 100
        }
        TableViewColumn {
            role: "last_updated"
            title: "Last Updated"
            width: 100
            delegate: Component {
                Rectangle {
                    height: 100
                    width: 120
                    id: head
                    RowLayout {
                        anchors.fill: parent
                        Rectangle {
                            height: 20
                            width: 20
                            color: "red"
                            border.color: "black"
                            radius: 100
                            MouseArea {
                                anchors.fill: parent
                                onClicked: parent.color = "grey"
                            }
                        }
                    }
                }
            }
        }
        model: ListModel {
            id: mymodel
            ListElement {
                text: "Banana"
            }
            ListElement {
                text: "Apple"
            }
            ListElement {
                text: "Coconut"
            }
        }
    }
}

额外优化（可选） #

如果想要自定义CheckBox的勾选样式，同时保持尺寸稳定，可以通过修改CheckBox::indicator来调整内部勾选框的样式，不会影响CheckBox的整体尺寸，示例如下：

CheckBox {
    width: 20
    height: 20
    anchors.centerIn: parent
    checked: false

    indicator: Rectangle {
        width: 16
        height: 16
        anchors.centerIn: parent
        color: control.checked ? "#2196F3" : "#FFFFFF"
        border.color: "#000000"
        border.width: 1
        radius: 2

        // 自定义勾选标记
        Rectangle {
            visible: control.checked
            width: 10
            height: 10
            anchors.centerIn: parent
            color: "#FFFFFF"
            rotation: 45
            width: 6
            height: 12
            border.width: 2
            border.color: "#2196F3"
            border.top: 0
            border.left: 0
        }
    }
}

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