利用Expandable创建一个可以扩展的列表

我们可以通过利用Ubuntu.Components.ListItems 中的Expandable来创建一个可以扩展的List列表．在有些列表应用中这个是非常有用的．它可以让我们展示更多的内容．在先前的例程＂如何在QML中设计一个expandable ListView＂中，我有一个类似的设计．开发者也可以参阅那个例程来做自己的设计．

我们还是来看一个简单的例程：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.ListItems 1.3 as ListItem

/*!
    \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: "expandablescolumn.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("expandablescolumn")

        ListModel {
            id: mymodel
            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" }
        }

        ListItem.ExpandablesColumn {
            anchors.fill: parent
            Repeater {
                model: mymodel
                ListItem.Expandable {
                    id: exp
                    expandedHeight: units.gu(30)
                    collapsedHeight: units.gu(12)

                    Image {
                        height: exp.height
                        width: height
                        source: "images/" + name
                    }

                    Label {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: index
                    }

                    onClicked: {
                        expanded = true;
                    }
                }
            }
        }
    }
}

在这里，我们使用了一个而 ExpandablesColumn来设计我们的一个类似ListView的列表．在我们的设计中，我们也可以采用 UbuntuListView来完成我们的设计．具体代码可以参阅UbuntuListView中的设计．

如上面的ListItem.Expandable显示的那样，我们可以把它看成一个容器．在它里面我们可以画我们任何喜欢的界面．当点击的时候，我们可以通过如下的方法：

                    onClicked: {
                        expanded = true;
                    }

把该项打开，当然，我们也可以参考在UbuntuListView中的设计：

        delegate: ListItem.Expandable {
            id: expandingItem
            expandedHeight: units.gu(30)
            onClicked: {
                ubuntuListView.expandedIndex = index;
            }
        }

在上面的设计中，我们把UbuntuListView中的expandedIndex设为当前的index从而达到expand当前项的目的．

运行我们的例程：

    

当我们打开我们的列表中的项的时候，该项被自动expand．当然我们也可以加入一些自己喜欢的动画效果．点击任何其它的区域将使得该项又回到以前的位置．

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