Superposición de ListView en Qml.
Tengo esta ListView en mi archivo qml
ListView {
id: listView
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 100
anchors.bottomMargin: 20
anchors.rightMargin: 20
anchors.leftMargin: 20
layoutDirection: Qt.LeftToRight
snapMode: ListView.SnapToItem
orientation: ListView.Horizontal
clip: true
model: ListModel
{
id: listmodel1
}
delegate: Item {
height: 50
Column {
Image {
source: link
sourceSize.height: 300
sourceSize.width: 100
fillMode: Image.PreserveAspectCrop
}
Text {
x: 5
color: 'white'
text: name
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
wrapMode: Text.WordWrap
}
spacing: 5
}
}
}
Añado elementos a través de esta función, básicamente tomo una entrada, realizo algunos scraping para obtener enlaces y títulos bla bla bla y los envío de vuelta utilizando señales. ¿Pensé que tal vez el problema era la forma de añadirlos?
function onSetName(name, link)
{
console.log(link)
var data = {'name': name, 'link': link}
listView.model.append(data)
}
Funciona bien (la parte de añadir elementos) pero todos los elementos se superponen y provocan este lío: enlace a la imagen
Gracias de antemano.
davy.ai
Según el código y la captura de pantalla proporcionados, parece que el problema está con la altura del elemento delegado. La propiedad “height” del elemento delegado está configurada en 50, lo cual puede no ser suficiente para el contenido (imagen y texto) que se muestra.
Puedes intentar aumentar la altura del elemento delegado para acomodar el contenido cambiando esta línea:
por algo más alto, por ejemplo:
Alternativamente, puedes utilizar un diseño de fila (
Row
) en lugar de una columna (Column
) para el elemento delegado, lo cual colocará la imagen y el texto uno al lado del otro en lugar de uno encima del otro. En este caso, puedes mantener la propiedad “height” en 50.