在 QML tableview 中单击时复选框变大

Question

此代码确实会在表格视图中生成复选框，但是当我单击该复选框时，它会变大。我希望它保持恒定大小。

请指导。

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

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

    TableView
    {
        anchors.fill: parent

        TableViewColumn
        {
            role: "selectall"
            title: "Select All"
            width: 100

            delegate:   CheckBox
                        {
                            anchors.fill: 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
                                {
                                    height: parent.height
                                    width: parent.width
                                    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" }
                }
    }
}

Answer 1

有很多方法可以解决您的问题。但首先，让我们正确区分 Qt Qtuick 控件版本。为此，请使用此导入语句：

import QtQuick.Controls 1.4 as QC1

并分别使用所有需要QC1的组件，例如：QC1.TableView，QC1.TableViewColumn。

在您的示例中，组件重叠。为了在 QC1 方面避免它，您可以定义更高的 row delegate for your TableView。但这会丢弃默认样式。它与样式一起使用的简单示例如下：

rowDelegate: Rectangle {
  height: 30
  SystemPalette {
    id: myPalette
    colorGroup: SystemPalette.Active
  }
  color: {
    var baseColor = styleData.alternate ? myPalette.alternateBase : myPalette.base
    return styleData.selected ? myPalette.highlight : baseColor
  }
}

结果你会得到这个：

QC2的另一个选择是重新定义indicator style of CheckBox. Below you'll find an example that could possibly fit your app, based on Customizing CheckBox documentation；所以你的 CheckBox 委托将如下所示：

delegate: CheckBox {
  id: control
  anchors.fill: parent
  checked: false

  indicator: Rectangle {
    id: outer
    readonly property int size: 18
    implicitWidth: size
    implicitHeight: size
    x: control.leftPadding
    y: parent.height / 2 - height / 2
    radius: 4
    border.color: control.down ? "orangered" : "orange"

    Rectangle {
      id: inner
      anchors.centerIn: parent
      width: outer.size/2
      height: width
      radius: 3
      color: control.down ? "orangered" : "orange"
      visible: control.checked
    }
  }
}

结果你会得到这个：

在 QML tableview 中单击时复选框变大

Checkbox becomes big when clicked on in QML tableview

qt

qml

qtquick2