时间戳

首页 > 解决方案 > 组合框元素中的白色间距

qt - 组合框元素中的白色间距

问题描述

我正在自定义组合框。这是我的代码：

import QtQuick 2.7
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2
import QtQuick.Window 2.2

ComboBox {
    property int selectionButtonWidth: 35
    property int selectionButtonHeight: 25
    property int selectionButtonFontSize: 12
    property string mainFontFamily: "Asap"
    property color mainFontColor: "red"
    property color inputHighlight: "#9C27B0"
    property color comboboxBorderColor: "#C5C1CD"
    property int comboboxBorderWidth: 1

    id: playFromHour
    width: selectionButtonWidth
    height: selectionButtonHeight

    model: 24
    currentIndex: 1

    font.family: mainFontFamily
    font.pixelSize: selectionButtonFontSize

    property bool needHighlight: false

    onNeedHighlightChanged: {
        if (needHighlight) {
            playFromHourBack.border.color = inputHighlight
        }
        else {
            playFromHourBack.border.color = comboboxBorderColor
        }
    }

    background: Rectangle {
        id: playFromHourBack
        color: "transparent"
        border.color: comboboxBorderColor
        border.width: comboboxBorderWidth
    }

    contentItem: Text {
        text: parent.displayText
        font: parent.font
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        color: mainFontColor
    }

    indicator: Canvas {
    }

    delegate: ItemDelegate {
        width: parent.width
        height: selectionButtonHeight

        contentItem: Text {
            text: modelData
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font: playFromHour.font
            color: mainFontColor
        }

        highlighted: playFromHour.highlightedIndex === index
    }

    popup: Popup {
        width: selectionButtonWidth
        height: 6 * selectionButtonHeight

        contentItem: ListView {
            clip: true
            model: playFromHour.popup.visible ? playFromHour.delegateModel : null
            currentIndex: playFromHour.highlightedIndex
        }
    }
}

但是我面对每个数字周围的大的不可定制的框架。见附图：

我需要将此框架的大小减小到零，但我只是不知道该怎么做。请问有什么想法吗？

我需要修复它，这样我才能减小组合框的宽度。因为现在宽度 < 40 像素，那些白色框架/边框占据了弹出窗口内的整个空间。

所以没有文字的地方。

标签： qtcomboboxqml

解决方案

您必须确定 ListView 占用父级的相同空间，因为它anchors.fill : parent被使用。

contentItem: ListView {
    clip: true
    model: playFromHour.popup.visible ? playFromHour.delegateModel : null
    currentIndex: playFromHour.highlightedIndex
    anchors.fill: parent
}

推荐阅读