___ tag123applicationdevelopment ___ Escrevendo aplicativos para o Ubuntu (incluindo o Ubuntu Touch) e perguntas sobre o processo de envio de aplicativos para o Ubuntu Software Center. Isso abrange aplicativos comerciais e de código aberto. ___ tag123ubuntusdk ___ O Ubuntu SDK é o seu ambiente de desenvolvimento integrado completo (baseado no QtCreator) para escrever aplicações Ubuntu / Ubuntu Touch (QML ou HTML5) ___ qstntxt ___ Para o aplicativo que estou desenvolvendo, gostaria de ter uma lista com seções que eu possa recolher ou expandir. O item nas seções pode ser clicado e abrir uma DefaultSheet. Assim, por exemplo, na "Galeria de ferramentas do UI do Ubuntu" na guia Itens da lista, em "GroupedList", eu gostaria de poder clicar em "fruit" e recolher a lista, e clicar novamente nela e expandir a lista. Como posso fazer isso? Isso é possível? (É para ListItem.ValueSelector, então pode ser possível) Obrigado pela sua ajuda. Como reduzir e expandir um ListItem.Standard? ___ tag123qml ___ Questões relacionadas ao desenvolvimento de aplicações QML no ambiente Ubuntu. ___ answer516618 ___ Acho que você precisa do componente SDK ListItem.Expandable . Foi adicionado no 14.10 SDK Framework, que é no momento de escrever esta resposta é uma estrutura de desenvolvimento. Ele fornece a capacidade de reduzir e expandir o listitem ao clicar nele. Recomendamos que você leia a documentação da API aqui para aprenda mais sobre o componente e veja como usá-lo em seu aplicativo. Exemplo de código Aqui está um pequeno exemplo de código que cria esse componente, %pre% Giff do aplicativo de relógio Anexei um gif abaixo onde usamos no aplicativo de relógio para definir a duração do alarme. ___

Question

Para o aplicativo que estou desenvolvendo, gostaria de ter uma lista com seções que eu possa recolher ou expandir. O item nas seções pode ser clicado e abrir uma DefaultSheet.

Assim, por exemplo, na "Galeria de ferramentas do UI do Ubuntu" na guia Itens da lista, em "GroupedList", eu gostaria de poder clicar em "fruit" e recolher a lista, e clicar novamente nela e expandir a lista.

Como posso fazer isso? Isso é possível? (É para ListItem.ValueSelector, então pode ser possível)

Obrigado pela sua ajuda.

    

Como reduzir e expandir um ListItem.Standard?

Answer 1

Acho que você precisa do componente SDK ListItem.Expandable . Foi adicionado no 14.10 SDK Framework, que é no momento de escrever esta resposta é uma estrutura de desenvolvimento. Ele fornece a capacidade de reduzir e expandir o listitem ao clicar nele.

Recomendamos que você leia a documentação da API aqui para aprenda mais sobre o componente e veja como usá-lo em seu aplicativo.

Exemplo de código

Aqui está um pequeno exemplo de código que cria esse componente,

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 do aplicativo de relógio

Anexei um gif abaixo onde usamos no aplicativo de relógio para definir a duração do alarme.