带有图像的组合框

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

还没有。

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

Answer 2

您可以通过定义自己的 ComboBoxStyle（here 文档）并使用 label 字段来实现，该字段是 Component.

Answer 3

正如 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;
                        }
                    }
                }
            }
        }

带有图像的组合框

Combobox with images

qt

qml

qtquick2