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.