Vistas de lista

Una vista de lista le puede ayudar a mostrar fácilmente muchos componentes de forma dinámica.

Las vistas de lista le pueden ayudar a mostrar los objetos de un modelo de una forma atractiva. Para usar una vista de lista, debe seguir la pista de tres cosas:

  1. El modelo, que contiene los datos que quiere que muestre la vista de lista
  2. El delegado, que define cómo se muestran los elementos del modelo
  3. La vista de lista, propiamente dicha, que mostrará la información del modelo como indica el delegado

Si necesita más aclaraciones, la documentación de Qt tiene una página informativa sobre este tema.

Creación de una vista de lista básica

Una vista de lista tiene dos propiedades esenciales a las que debemos prestar atención:

  • model, que acepta los datos o el id del objeto que contiene los datos
  • delegate, que acepta el componente que usaremos para mostrar los datos del modelo
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {

  ListView {
    id: myList

    // Si proporciona un número para la propiedad del modelo se generará dicho número de entradas de
    // datos, empezando por 0.
    model: 200

    delegate: Kirigami.BasicListItem {
      label: "Item " + modelData
    }
  }

}
Una vista de lista simple

En los casos donde los datos del modelo solo contienen un único dato, como en el ejemplo anterior, puede tomar los datos del modelo haciendo referencia a modelData.

Una nota sobre los delegados: si el modelo contiene objetos con datos en propiedades con nombre, el nombre de estas propiedades se expondrá automáticamente al delegado y solo necesitará usar dichos nombres en el delegado.

ListModel {
  id: myModel
  ListElement { type: "Item"; number: 0 }
  ListElement { type: "Item"; number: 1 }
  ListElement { type: "Item"; number: 2 }
  ListElement { type: "Item"; number: 3 }
}

ListView {
  id: myList

  model: myModel

  delegate: Kirigami.BasicListItem {
    label: type + " " + number
  }
}

Kirigami ofrece cierto número de componentes que se han diseñado para usar específicamente en las vista de lista, como Kirigami.BasicListItem, Kirigami.CheckableListItem y Kirigami.SwipeListItem, que se construyen todos sobre Kirigami.AbstractListItem. También están Kirigami.CheckDelegate, Kirigami.RadioDelegate y Kirigami.SwitchDelegate, que están diseñados para sacar partido de esos controles específicos.

Sin embargo, no está limitado al uso de estos componentes y puede elegir los que desee, aunque esto puede significar que deba hacer algunos ajustes en el diseño.

Mensajes de relleno

En algunos casos, es posible que quiera usar una vista de lista que esté vacía hasta que el usuario haga algo. En estas situaciones, el uso de un Kirigami.PlaceholderMessage puede ser una forma atractiva de indicarle al usuario que la lista está vacía y que puede hacer algo al respecto.

Por lo general, querrá colocar un PlaceholderMessage en el centro de la ListView, aunque no deseará que abarque todo el ancho de la ListView. Obviamente, también querrá que deje de estar visible en cuanto el modelo de la ListView contenga datos. Afortunadamente, las ListViews disponen de una propiedad llamada count que facilita bastante este comportamiento.

Es posible que también quiera añadir una acción útil al mensaje de relleno. Puede hacerlo adjuntando una acción a la propiedad helpfulAction de Kirigami.Placeholder.Message.

ListView {
  id: myList

  model: ListModel { id: myModel }

  delegate: Kirigami.BasicListItem {
    label: text
  }

  Kirigami.PlaceholderMessage {
    anchors.centerIn: parent
    width: parent.width - (Kirigami.Units.largeSpacing * 4)

    visible: myList.count === 0
    text: "Add something to me!"
    helpfulAction: Kirigami.Action {
      icon.name: "list-add"
      text: "Add"
      onTriggered: myModel.append({"text": "Hello!!"})
    }
  }
}
Una vista de lista con un mensaje de relleno

Cabeceras de listas

Las ListViews también permiten componentes de cabecera usando la propiedad header, y Kirigami proporciona un atractivo componente para este propósito: Kirigami.ItemViewHeader. Le proporcionamos a este componente un texto en la propiedad title y la ubicación de una imagen en la propiedad backgroundImage.source y ya estamos listos.

Una propiedad interesante de las vista de lista es headerPositioning, que afecta al modo en que la cabecera se moverá cuando interactuemos con una lista larga que se expanda más allá de la altura de la página. Puede definir tres preferencias distintas de headerPositioning:

  • ListView.OverlayHeader: en esta preferencia, la cabecera se contraerá en cuanto empecemos a desplazarnos hacia abajo, aunque permanecerá visible en un estado más compacto.
  • ListView.PullBackHeader: la cabecera desaparecerá cuando nos desplacemos hacia abajo, pero volverá a aparecer cuando volvamos hacia arriba, incluso aunque no hayamos alcanzado la parte superior de la lista.
  • ListView.InlineHeader: la cabecera se comportará como si fuera parte de la lista y permanecerá en la parte superior de la vista de lista.
ListView {
  id: myList

  headerPositioning: ListView.OverlayHeader
  header: Kirigami.ItemViewHeader {
  backgroundImage.source: "../banner.jpg"
    title: "LongListView"
  }

  model: 200

  delegate: Kirigami.BasicListItem {
    label: "Item " + modelData
  }
}
Una vista de lista con una cabecera