In today’s exercise, let’s do a design. In our ListView’s list, its items can expand when we want to click on them. This is unusual for some of our designs. For example, we don’t want to open another page, but we can show more information about our current item. We can use Expandable provided by Ubuntu SDK. The picture of this design is:
\
\
We can use this method to display the content of each of our items if there is not much detail about each item. The specific code is:
\
Main.qml
\
Import QtQuick 2.4 import 1.3 import Ubuntu.Com Ubuntu.Com ponents ponents. 1.3 as ListItem ListItems MainView {/ / objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "expandable.liu-xiao-guo" width: units.gu(60) height: units.gu(85) ListModel { id: listmodel ListElement { name: "image1.jpg" } ListElement { name: "image2.jpg" } ListElement { name: "image3.jpg" } ListElement { name: "image4.jpg" } ListElement { name: "image5.jpg" } ListElement { name: "image6.jpg" } ListElement { name: "image7.jpg" } ListElement { name: "image8.jpg" } ListElement { name: "image9.jpg" } ListElement { name: "image10.jpg" } ListElement { name: "image11.jpg" } } Page { header: PageHeader { id: pageHeader title: i18n.tr("expandable") } Item { anchors { left: parent.left right: parent.right bottom: parent.bottom top: pageHeader.bottom } UbuntuListView { id: listview anchors.fill: parent height: units.gu(24) model: listmodel delegate: ListItem.Expandable { id: exp expandedHeight: units.gu(15) expanded: listview.currentIndex == index Row { id: top height: collapsedHeight spacing: units.gu(2) Image { height: parent.height width: height source: "images/" + name } Label { text: "This is the text on the right" } } Label { anchors.top: top.bottom anchors.topMargin: Unit.gu (0.5) text: "This is the detail"} onClicked: {// expanded = true; listview.currentIndex = index } } } } } }Copy the code\
The source of the whole project is: github.com/liu-xiao-gu…
\