1. 程式人生 > >QML建立一個帶多個下拉輸入框的視窗(ComboBox)

QML建立一個帶多個下拉輸入框的視窗(ComboBox)

在網上搜了很多資料,用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  //控制元件所在的列號
            }
        }
    }
}