QML：调整复选框大小答案

【问题标题】：QML: Resize CheckBoxQML：调整复选框大小
【发布时间】：2017-04-15 10:21:10
【问题描述】：

我有我自己的委托的 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 的宽度和高度值 - 没有帮助。

是否可以在不自定义的情况下使其更小？

【问题讨论】：

标签： qt qml qtquickcontrols2

【解决方案1】：

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

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 图像。

【讨论】：

【解决方案2】：

恐怕你需要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 中，而不是委托中。否则无效。

【讨论】：

对我来说，颜色必须声明为 "grey" 而不是 "#grey"