es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

Tags:  , ,

Answer

  1. Avatar for 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:

    height: 50
    

    por algo más alto, por ejemplo:

    height: 150
    

    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.

    delegate: Item {
        height: 50
        Row {
            Image {
                // ...
            }
    
            Text {
                // ...
            }
        }
    }
    

Comments are closed.