qt - 更改 ListView 中所选项目的文本颜色

Question

首先让我说我是 QML 的新手。

我有一个 ListView(带有 model 和 delegate)，它在我的模型中工作正常，但我想更改 color(当前 color: skin.gray)当项目是 currentIndex-item 时，选择项目的其他内容。

ListView {
    id: menuBody_listview
    width: parent.width
    height: parent.height
    currentIndex: 0
    clip: true

    highlight: highlighter
    highlightFollowsCurrentItem: true

    Behavior on opacity {
        NumberAnimation { property: "opacity"; duration: 300; easing.type: Easing.InOutQuad }
    }

    anchors {
        top: menuHeader_listview.bottom
        bottom: parent.bottom
    }
    model: ListModel {
        ListElement {
            itemIconLeft: 'images/icons/menu/pause.png'
            itemText: "Cancel"
            itemIconRight: 'images/icons/menu/take-me-home.png'
        }
        ListElement {
            itemIconLeft: 'images/icons/menu/pause.png'
            itemText: "Mute"
            itemIconRight: 'images/nill.png'
        }
        ListElement {
            itemIconLeft: 'images/icons/menu/repeat.png'
            itemText: "Repeate"
            itemIconRight: 'images/nill.png'
        }
    }
    delegate: MenuBodyItem {
        width: menuBody_listview.width
        anchors.horizontalCenter: parent.horizontalCenter
        iconLeft: itemIconLeft
        message: itemText
        iconRight: itemIconRight
    }
}

以下是正在填充的项目的代码，ManuBodyItem.qml。

项目{

width: 100
height: 50
property alias iconLeft: menuitem_icon_start.source
property alias message: menuitem_text.text
property alias iconRight: menuitem_icon_end.source

RowLayout {
    spacing: 20
    anchors.fill: parent

    Image {
        id: menuitem_icon_start
        fillMode: Image.PreserveAspectCrop
        anchors {
            left: parent.left
            verticalCenter: parent.verticalCenter
        }
    }

    Text {
        id: menuitem_text

        anchors {
            left: menuitem_icon_start.right
            verticalCenter: parent.verticalCenter
            verticalCenterOffset: -2
            leftMargin: 20
        }

        color: skin.gray
        font {
            family: "TBD"
        }
    }

    Image {
        id: menuitem_icon_end
        fillMode: Image.PreserveAspectCrop
        source: iconRight
        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
        }

    }
}

Answer 1

使用 ListView 的 isCurrentItem附加属性:

Text {
    id: menuitem_text

    anchors {
        left: menuitem_icon_start.right
        verticalCenter: parent.verticalCenter
        verticalCenterOffset: -2
        leftMargin: 20
    }

    color: itemDelegate.ListView.isCurrentItem ? "red" : skin.gray
    font {
        family: "TBD"
    }
}

请注意，您必须为根委托(delegate)项提供一个 ID 才能限定上面的表达式:

Item {
    id: itemDelegate

    RowLayout {
        // ...
    }
    // ...
}

您可以看到我链接到的示例中使用的相同方法。