Question

首先让我说我对QML很新。

我有ListView（model和delegate），它在我的模型中运行正常，但我想更改color（目前为color: skin.gray当项目为currentIndex - 项目时，所选项目的其他内容。

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

从你的例子：

color: skin.gray用于Text元素，它将改变文本的颜色，而不是它的背景。我明白你想要的。

您可以在此处使用Rectangle元素作为背景组件来设置背景颜色。因此，代替委托中的Item根元素，您可以使用Rectangle。所以MenuBodyItem.qml看起来像

Rectangle {

    width: 100
    height: 50
    ...
}

现在要将背景颜色设置为Rectangle（如果它是当前颜色），您可以使用ListView.isCurrentItem进行检查。所以，

Rectangle {
    color: ListView.isCurrentItem ? "cyan" : "lightblue"
    width: 100
    height: 50
}

现在最后你必须将点击的项目设置为当前的项目，可以在委托项目的MouseArea中完成

delegate: MenuBodyItem {
    width: menuBody_listview.width
    anchors.horizontalCenter: parent.horizontalCenter
    iconLeft: itemIconLeft
    message: itemText
    iconRight: itemIconRight
    MouseArea {
        anchors.fill: parent
        onClicked: menuBody_listview.currentIndex = index
    }
}

Answer 2

使用ListView的{{3}}附加财产：

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"
    }
}

请注意，您必须为您的根代理项目提供ID才能限定上述表达式：

Item {
    id: itemDelegate

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

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

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

2 个答案: