qt - QML Listview elemento seleccionado resaltado al hacer clic

selecteditem

Question

Hola quiero poner este código:

highlight: Rectangle {
    color: "black"
    radius: 5 
    opacity: 0.7
    focus: true
}

en mouseArea en el controlador onclick:

MouseArea {
    id: mouse_area1
    z: 1
    hoverEnabled: false
    anchors.fill: parent
    onClicked: {
    }

Esto es todo listView:

ListView {
         id: listview1
         x: 0
         y: 82
        // width: 574
        // height: 967
         width: window.width
         height: window.height
         visible: true
         keyNavigationWraps: false
         boundsBehavior: Flickable.DragAndOvershootBounds
         opacity: 1
         maximumFlickVelocity: 2500
         anchors.leftMargin: 0
         highlightMoveSpeed: 489
         contentWidth: 0
         preferredHighlightEnd: 2
         spacing: 5
         highlightRangeMode: ListView.NoHighlightRange
         snapMode: ListView.SnapToItem
         anchors.bottomMargin: 0
         anchors.rightMargin: 0
         anchors.topMargin: 82
              anchors.fill: parent
              model: myModel
              delegate:Component {
                  //id: contactDelegate
                  Item {
                      property variant myData: model
                      width: 574; height: 90
                      Column {
                          x: 12
                          y: 0
                          width: 562
                          height: 90
                          anchors.rightMargin: 0
                          anchors.bottomMargin: 0
                          anchors.leftMargin: 12
                          anchors.topMargin: 0
                          anchors.fill: parent
                          spacing: 2
                          Text { text: ''<b>ID: </b> '' + id_user ; verticalAlignment: Text.AlignTop; wrapMode: Text.NoWrap; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
                          Text { text: ''<b>Name: </b> '' + user_name; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
                          Text { text: ''<b>Lastname: </b> '' + user_lastname; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
                          Text { height: 16; text: ''<b>Tel number: </b> '' + user_number; verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
                          Text { text: ''<b>Address: </b> '' + user address; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }

                          MouseArea {
                              id: mouse_area1
                              z: 1
                              hoverEnabled: false
                              anchors.fill: parent
                              onClicked: 
                                  Item
                              {

                                }

                          }
                      }
                      }
              }

              //delegate: contactDelegate
              highlight: Rectangle
              {
                   color:"black"
                   radius: 5
                   opacity: 0.7
                   focus: true
              }
}

Por ahora, el resaltado funciona solo cuando se usan flechas, pero esta será la aplicación para Android, así que necesito un toque con el mismo efecto, y la segunda pregunta es ¿cómo leer ciertos datos de un elemento seleccionado en la vista de lista? Dentro tengo como id, nombre, apellido, número y dirección. Quiero poner esos valores en cuadros text_input.

Gracias

Answer 1

Más simple que nunca, puedes usar: onCurrentItemChanged

ListView{
    id: listViewMainMenu
    signal Myselect(int playmode)
    onCurrentItemChanged: Myselect(listViewMainMenu.currentIndex)
    // ...
}

Answer 2

Para aquellos que utilizan el resaltado en un ListView con una altura específica (que no están rellenados al 100%):

Asegúrese de habilitar la propiedad de clip de ListView, ya que, de lo contrario, el resaltado seguirá visible fuera de los bordes de ListView mientras se desplaza.

ListView 
{
    clip: true    
}   

Como se discutió aquí: oculte lo más destacado de un ListView mientras se desplaza

Answer 3

Parece que necesitas dos soluciones a tu pregunta:

1. Desea poder configurar el elemento actual de ListView cuando se hace clic
2. Quieres saber cuándo cambia la selección actual

La documentation Qt5 dice esto sobre el manejo del mouse y el tacto de ListView :

Las vistas manejan arrastrar y mover su contenido, sin embargo, no manejan la interacción táctil con los delegados individuales. Para que los delegados reaccionen a la entrada táctil, por ejemplo, para establecer el CurrentIndex, el delegado debe proporcionar una MouseArea con la lógica de manejo táctil adecuada.

La entrada clave funcionará de manera inmediata, pero deberá capturar explícitamente el evento mouse / touch en el delegado y cambiar el valor ListView.currentIndex función del valor de index del elemento delegado seleccionado.

Aquí hay un ejemplo completo:

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    width: 640
    height: 480
    visible: true

    ListModel {
        id: model
        ListElement {
            name:''abc''
            number:''123''
        }
        ListElement {
            name:''efg''
            number:''456''
        }
        ListElement {
            name:''xyz''
            number:''789''
        }
    }

    ListView {
        id: list
        anchors.fill: parent
        model: model
        delegate: Component {
            Item {
                width: parent.width
                height: 40
                Column {
                    Text { text: ''Name:'' + name }
                    Text { text: ''Number:'' + number }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: list.currentIndex = index
                }
            }
        }
        highlight: Rectangle {
            color: ''grey''
            Text {
                anchors.centerIn: parent
                text: ''Hello '' + model.get(list.currentIndex).name
                color: ''white''
            }
        }
        focus: true
        onCurrentItemChanged: console.log(model.get(list.currentIndex).name + '' selected'')
    }
}

Hace las siguientes cosas:

• crea una lista simple y modelo
• utiliza un elemento MouseArea dentro del delegado del elemento para actualizar la lista list.currentIndex = index que es una var local y única para el elemento seleccionado
• escucha el evento onCurrentItemChanged de ListView para mostrar cómo acceder a los valores del elemento del modelo actual
• vincula el valor de texto del elemento seleccionado actualmente al elemento resaltado para mostrar usando los valores seleccionados actualmente en otro lugar

Answer 4

Respuesta proporcionada por denoth : es necesario agregar esta línea:

listview1.currentIndex = index 

Answer 5

ListView proporciona las llamadas " propiedades adjuntas ", es decir, las propiedades disponibles en el delegate para la lista. Entre ellos Listview.view es una referencia a la lista en sí. Se puede usar para acceder a la propiedad currentIndex y actualizarla. Por lo tanto, para resolver su problema solo:

1. Uncomment //id: contactDelegate .
2. Establezca contactDelegate.ListView.view.currentIndex = index en el controlador de OnClick even.