如何将图像放在ListView项目上并动态更改？

Question

我正在尝试用QML制作颜色选择器。颜色细节存储在ListModel中，我试图创建一个水平的颜色行供选择。 像这样的东西：

问题是，我无法在所选单元格上添加按钮图像。我想通过将图像放在该单元格的中心来突出显示用户选择的单元格。 以下是我编写的代码片段

ListView{
    id: list
    height: 30
    width: 500

    anchors.bottom: main.bottom
    anchors.horizontalCenter: main.horizontalCenter
    anchors.bottomMargin: 40

    orientation: ListView.Horizontal

    model: myModel
    delegate:
        Item {
        id: cell
        property alias cellColor: rectangle.color
        signal clicked(color cellColor)

        width: 500/myModel.count; height: 25

        Rectangle {
            id: rectangle
            color: clr
            anchors.fill: parent
        }

        onClicked:{
            dynamicRect.color=cellColor
            list.currentIndex=index
            console.log(list.currentIndex)
        }

        MouseArea {
            anchors.fill: parent
            z: 1
            onClicked: {
                cell.clicked(cell.cellColor)
            }
        }
    }

    highlight:
        Image {
        id: button
        height: 20
        width: 20
        source: "button.png"
        anchors.horizontalCenter: list.currentItem.horizontalCenter
    }

}

任何帮助都将受到高度赞赏。

谢谢！