QML创建一个带多个下拉输入框的窗口（ComboBox）

最新推荐文章于 2025-04-06 20:46:47 发布

ClearWatch

最新推荐文章于 2025-04-06 20:46:47 发布

阅读量5.6k

点赞数 3

分类专栏： QML Qt

本文链接：https://blog.csdn.net/ClearWatch/article/details/68946241

版权

Qt 同时被 2 个专栏收录

5 篇文章

订阅专栏

QML

2 篇文章

订阅专栏

本文介绍了一种简单有效的QML下拉框实现方法，利用ComboBox组件创建了可复用的下拉选择框，展示了具体的代码示例及运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上搜了很多资料，用QML怎么实现下拉框的方法很少，并且都很复杂，我按照他们的方法实现的下拉框效果并不是很好，在问了公司的老司机后，他告诉我一个很好用的QML类：ComboBox，下面直接看代码和效果图

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4  //使用 Button 控件必须包含
import QtQuick.Layouts 1.1  //使用 GridLayout 控件必须包含

Window {
    visible: true
    width: 610
    height: 75
    title: qsTr("ComboBox")

    GridLayout {  //使其内部的所有控件以表格形式排列
        Repeater {  //复制控件，model 为复制的控件数
            id: repeater
            model: 3
            Item {
                width: 200
                ComboBox {
                    id:combox
                    currentIndex: 2
                    model: ListModel {
                        id: cbItems
                        ListElement { text: "Banana"; color: "Yellow" }
                        ListElement { text: "Apple"; color: "Green" }
                        ListElement { text: "Coconut"; color: "Brown" }
                    }
                    width: 200
                    onCurrentIndexChanged: {
                        console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
                    }
                }
                Layout.row: 1  //控件所在的行号
                Layout.column: index  //控件所在的列号
            }
        }
    }
}