自定义ComboBox

Question

解决：

编辑：正如derM所述，设置anchors.fill：parent并删除其他锚值修复了第二个问题。

Edit2：错误的宽度是由于customcombobox中的宽度设置为iterations.width而不是parent.width

我写了一个组合框样式，我有几个问题。

第一个是，对于我的一个组合框，突出显示＆＃34;效果＆＃34; （颜色的变化）不适用于整个项目。它确实适用于我的其他组合框。见图：

网格代码：

GridLayout
{
    id: grid

    columns: 3

    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.margins: 10

    height: 80

    Label
    {
        font.pointSize: 12
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        Layout.fillWidth: true
        text: "Shuffle Type"
    }

    Label
    {
        font.pointSize: 12
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        Layout.fillWidth: true
        text: "Iterations"
    }

    Label
    {
        font.pointSize: 12
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        Layout.fillWidth: true
        text: "Launch Test"
    }

    CustomComboBox
    {
        id: shuffleType

        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.minimumWidth: 150

        property string value: shuffleType.currentText

        model: ["RandomIndex", "KnuthShuffle"]

        dropDownText: shuffleType.displayText
    }

    CustomComboBox
    {
        id: iterations

        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.minimumWidth: 150

        property int value: Number(iterations.currentText)

        currentIndex: 2

        model: [1, 10, 100, 1000, 10000, 100000]

        dropDownText: iterations.displayText
    }

    Button
    {
        id: goButton

        enabled: guiEnabled

        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.minimumWidth: 150

        text: "Go"

        contentItem: Text
        {
            text: goButton.text

            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            font.pointSize: 15

            opacity: enabled ? 1.0: 0.3
        }

        onClicked: 
        {
            testShuffle(shuffleType.value, iterations.value)
        }
    }
}

组合框代码：

// CustomComboBox.qml

ComboBox
{
    property alias dropDownText: dropDown.text

    enabled: guiEnabled

    delegate: ItemDelegate
    {
        id: item

        width: iterations.width

        contentItem: Text
        {
            text: modelData
            font.pointSize: 15
        }

        MouseArea
        {
            anchors.fill: parent

            hoverEnabled: true
            propagateComposedEvents: true

            onClicked: mouse.accepted = false
            onPressed: mouse.accepted = false
            onReleased: mouse.accepted = false
            onDoubleClicked: mouse.accepted = false
            onPositionChanged: mouse.accepted = false
            onPressAndHold: mouse.accepted = false

            onEntered:
            {
                item.highlighted = true
            }

            onExited:
            {
                item.highlighted = false
            }
        }
    }

    contentItem: Text
    {
        id: dropDown

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter

        font.pointSize: 15
        opacity: enabled ? 1.0: 0.3
    }
}

第二个是为了使我的文本正确居中，我必须引起一个绑定循环：

QML CustomComboBox: Binding loop detected for property "baselineOffset"

这是导致绑定循环的代码：

contentItem: Text
{
    id: dropDown

    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter

    font.pointSize: 15
    opacity: enabled ? 1.0: 0.3
}

如果只设置锚点，我会得到这个：

如果我只是设置对齐方式，我会得到这个：

这有点难以辨别，但在第二个问题上并没有完全集中。

以下是设置两个值时的样子：

我想我得到了一个绑定循环，因为我不应该同时设置它们，也许它们相互依赖？我不确定如何在没有它的情况下正确居中我的文本。