利用ComboButton来做一个下拉的选项

来源：互联网发布：淘宝返利官网编辑：程序博客网时间：2024/06/06 05:16

在其它的很多平台上我们可以使用ComboButton来实现我们一个下拉（drop-down）的选项．在Ubuntu.Components 1.3版本中，我们也有类似的东西，虽然在我之前的例程中，我们也实现了一个自己的ComboBox．

我们还是先来看一下一个简单的例子：

Main.qml

import QtQuick 2.4import Ubuntu.Components 1.3import Ubuntu.Components.ListItems 1.3/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "combobutton.liu-xiao-guo"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("combobutton")        Column {            anchors.fill: parent            spacing: units.gu(2)            ComboButton {                text: "smaller content"                Rectangle {                    height: units.gu(5) // smaller than the default expandedHeight                    color: "blue"                }            }            ComboButton {                id: combo                text: "long scrolled content"                ListView {                    model: 10                    delegate: Standard {                        text: "Item #" + modelData                        onClicked: {                            console.log("item: " + index + " clicked")                            combo.expanded = false;                        }                    }                }            }        }    }}

运行我们的例程：

从上面可以看出来我们可以在一个drop-down的列表中选择我们所需要的选项．当然，我们也可以更新我们的ComboButton的text的内容．

项目的源码在：https://github.com/liu-xiao-guo/combobutton

0 0