更改 ItemDelegate 的背景和文本颜色

Posted 2023-02-16

【中文标题】更改 ItemDelegate 的背景和文本颜色

【英文标题】：Changing background and text color of a ItemDelegate

【发布时间】：2017-07-03 15:26:39

【问题描述】：

我启用了材料设计（深色主题）。

一些教程告诉我使用背景属性来设置我自己的带有自定义颜色的矩形项目。就像在这个屏幕截图中一样：

但是使用这种技术，我不再有这些漂亮的涟漪效应了。我想做的只是改变所有项目的背景和文本颜色。

所以我尝试更改背景属性但没有运气。启动时调试输出告诉我背景中没有颜色属性。

所以我想出了一个使用绑定的“hacky”方式......现在属性存在！？

这是实现我的目标的最佳方式吗？点击时会出现涟漪效应，但我对此感觉不好。我不明白为什么在使用绑定时该属性存在，以及为什么在使用普通数据绑定时它们不存在。

ItemDelegate 
    width: ListView.view.width
    height: contentItem.implicitHeight + 10

    topPadding: 5
    bottomPadding: 5

    highlighted: ListView.view.currentIndex === model.index

    //background.color: highlighted ? "#81A3CF" : "#B3B2B2"
    Binding 
        target: background
        property: "color"
        value: highlighted ? "#81A3CF" : "#B3B2B2"
    

    text: model.index + (highlighted ? " [highlighted]" : "")

    //contentItem.color: "black"
    Binding 
        target: contentItem
        property: "color"
        value: "black"
    

    onClicked: 
        if(ListView.view.currentIndex === model.index)
            ListView.view.currentIndex = -1;
        else
            ListView.view.currentIndex = model.index
    

【参考方案1】：

原因很简单：

background 被声明为Item - 并且Item 没有color，因此在分配具有color 的具体Item 之前，您无法更改它。因此，当您执行QML 文件时，Rectangle 尚不可用，直到所有内容都创建完毕。这是Binding 设置颜色的时候。

如果您不需要将它绑定到任何东西，另一种解决方案是使用：

Component.onCompleted: background.color = 'green'

否则，我认为Binding-trick 没问题（但这是意见！）

【讨论】：

嗯，好的，所以我将继续使用 Binding 作为我的背景，因为它取决于突出显示。我很遗憾我自己实现了这些基本的东西，比如突出显示的含义和 onClicked 事件。我绝对认为这些东西应该留在图书馆里。

【参考方案2】：

我不确定您为什么要更改项目委托的背景颜色。在 ListView 中以可视方式突出显示所选项目的常规方法是创建一个组件（通常使用矩形）并将其分配给 ListView 的 highlight 属性，然后将 ListView 的 highlightFollowsCurrentItem 设置为 true。当 currentIndex 发生变化时，ListView 会酌情隐藏和显示高亮组件，您可以根据需要指定各种过渡效果。

【讨论】：

如果我的商品也有背景色怎么办？高亮矩形不会隐藏在项目下方吗？

是的，我相信会的。您的所有项目是否具有相同的背景颜色或它们是否不同？我一直使用 ListView 大小的矩形，作为 ListView 的子项，来提供列表的背景，在这种情况下，高亮矩形出现在背景上方。但是如果你需要不同颜色的行，那就不行了。