如何折叠和展开 ListItem.Standard？

Question

对于我正在开发的应用程序，我希望有一个可以折叠或展开的部分列表。可以单击部分中的项目并打开 DefaultSheet。

因此，例如在“Ubuntu UI 工具包库”的列表项选项卡中的“GroupedList”中，我希望能够单击“水果”并折叠列表，然后再次单击它并展开列表。

我该怎么做？这可能吗？（这是针对 ListItem.ValueSelector 的，所以可能可行）

感谢您的帮助。

Answer 1

我认为你需要的是ListItem.ExpandableSDK 组件。它是在 14.10 SDK 框架中添加的，在撰写此答案时，它是一个开发框架。它提供了单击列表项时折叠和展开列表项的功能。

我建议你阅读 API 文档这里了解有关该组件的更多信息并了解如何在您的应用程序中使用它。

代码示例

下面是创建这样一个组件的小代码示例，

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem

MainView {
    id: mainView

    width: units.gu(50)
    height: units.gu(75)

    Page {
        title: "Sample Expandable App"

        Column {
            anchors { left: parent.left; right: parent.right }
            clip: true

            Repeater {
                model: 2
                ListItem.Expandable {
                    id: expandingItem1
                    expandedHeight: contentCol1.height + units.gu(1)

                    onClicked: {
                        expanded = !expanded;
                    }

                    Column {
                        id: contentCol1
                        anchors { left: parent.left; right: parent.right }
                        Item {
                            anchors { left: parent.left; right: parent.right}
                            height: expandingItem1.collapsedHeight
                            Label {
                                anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter}
                                text: "Item " + index
                            }
                        }

                        UbuntuShape {
                            anchors { left: parent.left; right: parent.right }
                            height: index % 2 == 0 ? units.gu(6) : units.gu(18)
                            color: "khaki"
                        }
                    }
                }
            }
        }
    }
}

时钟应用程序 Giff

我在下面附加了一个 gif，我们在时钟应用程序中使用它来设置闹钟持续时间。