如何使用中继器制作不同的按钮？

Question

我正在尝试使用以下代码在 qml 中使用转发器设置不同的按钮（不同的文本和图标）： 当我尝试在 ListElement 中添加图像属性时，我发现我不能

Main.qml 

    
    //green text for my group members
    
    
    ApplicationWindow{
        id: applicationWindow
        property string displayedButton: ""
        width: 800
        height: 380
        visible: true
     Page {
        anchors.fill: parent
        id:page
        ListModel{
               id: fruitModel
    
               ListElement {
    
                   name: "CLIM"
    
               }
               ListElement {
                   name: "Kiwi"
                   colorValue: "sienna"
               }
               ListElement {
                   name: "Banana"
                   colorValue: "gold"
               }
           }
    
        GridLayout {
            id:rec
            anchors.fill: parent
    
    
           ColumnLayout {
    
                anchors.topMargin: 20
                y:10
                id: leftMenuBar
                Layout.preferredWidth: 90
                Layout.fillHeight: true
    
                clip: true
                spacing: 10
                Repeater{
                    model: fruitModel
                    delegate: Button{
                        implicitHeight: 90
                        implicitWidth: 90
    
                        onClicked: displayedButton = text
                        id: delegateRoot
    
                                       required property string name
                                       required property color colorValue
    
                                       text: delegateRoot.name
    
    
    
    
    
                        Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
                    }
                }
    
                Layout.alignment: Qt.AlignLeft
                Layout.leftMargin: 13
            }
    
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: 12
                    border.width: 2
                    border.color: "lightgray"
                    radius: 35
    
                    Text {
                        anchors.centerIn: parent
                        text: "Selected Button: " + displayedButton
                        font.pixelSize: 20
                    }
                }
            }
    
            // Placeholder item to align footer buttons
    
        }
    
    //footerbutton
        footer:RowLayout {
            width: 500
            spacing:12
            Item {
            implicitWidth: 3
            }
    
            Repeater {
                Item {
    
                }
                model: 8
    
                delegate: Button{
                    implicitHeight: 90
                    implicitWidth: 90
                    text: "Button " + (index + 1)
                    onClicked: displayedButton = text
    
                    Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
                }
            }
        }
    }
    }

/////////////////////////////////////////////// ///////////////////////

我正在使用 stackoverflow 学习 qml，您的建议对我很有帮助

Answer 1

我没有做任何特别的事情我只是删除中继器（它是一个很好的工具但同时也是一个问题）并且我为每个按钮做了一个图标和带有显示的图标下的文本：AbstractButton.TextUnderIcon

但我对你的好建议很感兴趣