Combobox与图像

Question

是否可以使用图片而不是字符串创建ComboBox？它不支持delegate：

ComboBox {
        currentIndex: 2
        model: ListModel {
            id: cbItems
            ListElement { imageHeight: 280; imageSource: "../images/tee3.png"  }
            ListElement { imageHeight: 300; imageSource: "../images/tee5.png"  }
            ListElement { imageHeight: 218; imageSource: "../images/tee1.png"  }
        }
        delegate: Image {
            height: imageHeight
            fillMode: Image.PreserveAspectFit
            source: imageSource
        }
        width: 200
    }

Answer 1

您可以通过定义自己的ComboBoxStyle（here文档）并使用label字段Component来进行操作。

Answer 2

正如 skypjack 所说，使用带信号的ComboBoxStyle完成

    ComboBox {
            id : cBox4
            height: 20
            width: 100

            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: parent.bottom
            anchors.topMargin: 10

            model : ListModel {
                id: cbItems
                ListElement { text: "type A"; imageHeight: 218; imageSource: "../images/teeA.png"  }
                ListElement { text: "type B"; imageHeight: 200; imageSource: "../images/teeB.png"  }
                ListElement { text: "type V"; imageHeight: 280; imageSource: "../images/teeV.png"  }
                ListElement { text: "type G"; imageHeight: 350; imageSource: "../images/teeG.png"  }
                ListElement { text: "type D"; imageHeight: 300; imageSource: "../images/teeD.png"  }
            }

            style: ComboBoxStyle {
                id: comStyle

                label: Item {
                    Text {
                        id: lblText
                        text: control.editText
                        font.pixelSize: p.pixelSize();

                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }

                    Image {
                        anchors.right: lblText.left
                        anchors.rightMargin: 10
                        anchors.top: lblText.top
                        anchors.topMargin: 10

                        id: img
                        height: 280
                        fillMode: Image.PreserveAspectFit
                        source: "../images/teeA.png"

                        Component.onCompleted: {
                            cBox4.currentIndexChanged.connect(changeImage)
                        }

                        function changeImage() {
                            img.source = cbItems.get(cBox4.currentIndex).imageSource;
                            img.height = cbItems.get(cBox4.currentIndex).imageHeight;
                        }
                    }
                }
            }
        }

Answer 3

还没有。

但是，它使用MenuItem作为元素，可以有图标。因此，如果您修补ComboBox.qml以使用模型中的图标，则应显示它。