利用ListItem.Expandable来显示一个可以扩展的列表

来源：互联网发布：网络教学的缺点编辑：程序博客网时间：2024/05/16 19:41

在今天的练习中，我们来做一个设计．在我们的ListView的列表中，我们想点击它的项时，它的项能够展开．这对于我们的有些设计是非常用的．比如我们不希望打开另外一个页面，但是我们可以展示我们当前项的更多的信息．我们可以使用Ubuntu SDK提供的Expandable．这个设计的图片为：

如果每个项的详细信息并不多的时候，我们可以利用这种方法来展示我们的每个项的内容．具体的代码为：

Main.qml

import QtQuick 2.4import Ubuntu.Components 1.3import Ubuntu.Components.ListItems 1.3 as ListItemMainView {    // 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: units.gu(0.5)                        text: "This is the detail"                    }                    onClicked: {//                        expanded = true;                        listview.currentIndex = index                    }                }            }        }    }}

整个项目的源码为：https://github.com/liu-xiao-guo/expandable

0 0