QML：调整复选框大小

Question

我有 ListView 和我自己的委托。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ItemDelegate
{
    height: 40

    Row
    {
        spacing: 10
        anchors.verticalCenter: parent.verticalCenter

        CheckBox
        {

        }
    }
}

问题是尽管 ItemDelegate 的高度，复选框不会调整大小。

我得到这个高度 = 40:

我得到这个高度 = 10:

我试过使用 CheckBox 的宽度和高度值 - 没有帮助。

是否可以在不定制的情况下将其缩小？

Answer 1

恐怕您需要 customize 您的复选框以获得不同的尺寸。

示例：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQml 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component {
        id: contactDelegate

        ItemDelegate
        {
            id: item
            width: 40
            height: 40

            CheckBox
            {
                id: control
                text: name

                indicator: Rectangle {
                    implicitWidth: item.width
                    implicitHeight: item.height
                    x: control.leftPadding
                    y: parent.height / 2 - height / 2
                    border.color: control.down ? "#dark" : "#grey"

                    Rectangle {
                        width: 25
                        height: 25
                        x: 7
                        y: 7
                        color: control.down ? "#dark" : "#grey"
                        visible: control.checked
                    }
                }
            }
        }
    }

    ListView {
        width: 180;
        height: 200;
        spacing: 10

        model: ContactModel {}
        delegate: contactDelegate
    }
}

顺便说一下，spacing 属性应该设置在您的 ListView 中，而不是委托中。否则无效。

Answer 2

理论上，您可以增加指示器的大小，但不会增加复选标记图像的大小：

CheckBox {
    text: "CheckBox"
    anchors.centerIn: parent
    checked: true

    indicator.width: 64
    indicator.height: 64
}

图像未缩放的原因有几个。首先，如果放大，复选标记会变得模糊。更重要的是，保持最佳性能。 Qt Quick Controls 2 不是像 Qt Quick Controls 1 那样计算所有相对于彼此的大小以及创建大量绑定的方式，而是将其可扩展性基于 Qt 5.6 中引入的自动高 DPI 缩放系统。当运行比例因子 N.

时，您会得到一个不同的 @Nx 图像

QML：调整复选框大小

QML: Resize CheckBox

qt

qml

qtquickcontrols2