首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在QML中改变弹出contentItem中的Listview背景色

如何在QML中改变弹出contentItem中的Listview背景色
EN

Stack Overflow用户
提问于 2022-01-04 19:54:40
回答 1查看 365关注 0票数 0

我正在使用QML网站中关于如何自定义ComboBox的示例,如下所示:

#Combo.qml

代码语言:javascript
复制
import QtQuick 2.12
import QtQuick.Controls 2.12

ComboBox {
    id: control
    model: ["First", "Second", "Third"]

    delegate: ItemDelegate {
        width: control.width
        contentItem: Text {
            text: modelData
            color: "#21be2b"
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
    }

    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
            target: control
            function onPressedChanged() { canvas.requestPaint(); }
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
            context.fill();
        }
    }

    contentItem: Text {
        leftPadding: 0
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "#17a81a" : "#21be2b"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        border.color: control.pressed ? "#17a81a" : "#21be2b"
        border.width: control.visualFocus ? 2 : 1
        radius: 2
    }

    popup: Popup {
        y: control.height - 1
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex
            // ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
            delegate: Rectangle {
                color: "#080808"
                Text {
                    anchors.fill: parent
                    text: modelData
                }
             }
             ///////////////////////////////////////////////////

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: "#080808"
            radius: 2
        }
    }
}

#main.qml

代码语言:javascript
复制
import QtQuick 2.15
import QtQuick.Window 2.15

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


    Combo {
        width: 200
        height: 40
        anchors.centerIn: parent
    }
}

我向Combo.qml添加了一些新代码,如上面所示,将ListView项的背景颜色转换为更深的颜色,以与Popup本身的背景色相匹配,但是没有什么变化。项目的ListView背景色总是白色的。我很感激你能帮我弄清楚这件事。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-04 20:55:25

有两个问题正在进行中。首先,ComboBox上的委托:显然优先于ListView上的委托:。其次,ItemDelegate有一些非常特殊的突出显示行为,因此您需要覆盖它的背景和着色行为,如下所示:

代码语言:javascript
复制
import QtQuick 2.12
import QtQuick.Controls 2.12

ComboBox {
    id: control
    model: ["First", "Second", "Third"]

    delegate: ItemDelegate {
        id: itemDelegate
        width: control.width
        background: Rectangle {
            visible: itemDelegate.down || itemDelegate.highlighted || itemDelegate.visualFocus
            color: itemDelegate.highlighted ? "#808080" : "#080808"
            implicitWidth: 100
            implicitHeight: 40
        }

        contentItem: Text {
            text: modelData
            color: "#21be2b"
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
    }

    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
            target: control
            function onPressedChanged() { canvas.requestPaint(); }
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
            context.fill();
        }
    }

    contentItem: Text {
        leftPadding: 0
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "#17a81a" : "#21be2b"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        border.color: control.pressed ? "#17a81a" : "#21be2b"
        border.width: control.visualFocus ? 2 : 1
        radius: 2
    }

    popup: Popup {
        y: control.height - 1
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex
            // ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
//            delegate: Rectangle {
//                width: parent.width
//                height: 40
//                color: "#080808"
//                Text {
//                    anchors.fill: parent
//                    text: modelData
//                }
//             }
             ///////////////////////////////////////////////////

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: "#080808"
            radius: 2
        }
    }

}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70584348

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档