On many other platforms we can use ComboButton to implement a drop-down option. In Ubuntu.Com Ponents version 1.3, we have something similar, although in my previous routine, we implemented a ComboBox of our own.

\

Let’s start with a simple example:

\

Main.qml

\

Import QtQuick 2.4 import Ubuntu.Com ponents import 1.3 Ubuntu.Com ponents. 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; } } } } } } }Copy the code

\

To run our routine:

\

  

As you can see from the above, we can select the options we need in a drop-down list. Of course, we can also update the content of our ComboButton text.

\

Project source at: github.com/liu-xiao-gu…

\