在 QML 中设置 ListElement 的图标颜色

Posted

技术标签:

【中文标题】在 QML 中设置 ListElement 的图标颜色【英文标题】:Setting the icon color of a ListElement in QML 【发布时间】:2019-05-22 00:33:23 【问题描述】:

我有一个 ListModal 如下:

ListModel 
                ListElement  icon: "qrc:/icons/gallery/20x20/profile.png"; icon.color: "transparent"; title: "Profile"; source: "qrc:/src/qml/pages/Profile.qml" 
                ListElement  icon: "qrc:/icons/gallery/20x20/lock.png"; icon.color: "transparent"; title: "Connect"; source: "qrc:/src/qml/pages/Connect.qml" 
            

当我的应用程序使用风格的深色主题(即通用)时,我的图标很难看到。我希望它们具有透明颜色,以便在主题更改时反转颜色,类似于以下代码:

ListView 
    id: listView

    focus: true
    currentIndex: -1
    anchors.fill: parent

    delegate: ItemDelegate 
        width: parent.width
        text: model.title
        icon.source: model.icon
        icon.height: 20
        icon.width: 20
        icon.color: "transparent"
        highlighted: ListView.isCurrentItem
        onClicked: 
            listView.currentIndex = index
            stackView.push(model.source)
            drawer.close()
        
    

有没有办法让我轻松做到这一点?

【问题讨论】:

do this easily 是什么意思?这看起来并不太复杂。或者将ItemDelegate 替换为Image ......这很容易。 【参考方案1】:

我没有过多使用主题或样式,但我相信您可以根据当前使用的主题与三元运算符一起指定图标的颜色:

icon.color: (Material.theme === Material.Dark) ? "white" : "black"

【讨论】:

以上是关于在 QML 中设置 ListElement 的图标颜色的主要内容,如果未能解决你的问题,请参考以下文章

QML - 将 ListView 与动态生成的 ListElement 一起使用

QML ListElement 传递字符串列表

QML程序实现动态切换多语言(ListModel/ListElement中的文本的多语言处理)

QML程序实现动态切换多语言(ListModel/ListElement中的文本的多语言处理)

如何在 QML 中设置鼠标光标位置

在 QML 中设置子项属性的正确方法