web-dev-qa-db-fra.com

QML Listview élément sélectionné mettre en évidence sur le clic

Salut je veux mettre ce code:

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

dans mouseArea dans le gestionnaire onclick:

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

C'est tout 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
              }
}

Pour le moment, le surlignage ne fonctionne que lorsque vous utilisez des flèches, mais ce sera une application pour Android, donc j'ai besoin de toucher le même effet, et la SECOND question est de savoir comment lire certaines données de l'élément sélectionné dans Listview nom, nom de famille, numéro et adresse . Je veux mettre ces valeurs dans les boîtes d'entrée de texte.

Je vous remercie

qtlistviewqmlselecteditem
21
user123_456

Réponse fournie par denoth : Vous devez ajouter cette ligne: 

listview1.currentIndex = index
24
Matt

Il semble que vous ayez besoin de deux solutions à votre question:

  1. Vous voulez pouvoir définir l'élément actuel de la ListView lorsque vous cliquez dessus
  2. Vous voulez pouvoir savoir quand la sélection en cours change

Le Qt5 documentation dit ceci à propos de ListView manipulation de la souris et du toucher:

Les vues gèrent le glissement et le glissement de leur contenu, mais elles ne gèrent pas les interactions tactiles avec les délégués individuels. Pour que les délégués réagissent à la saisie tactile, par exemple pour définir le currentIndex, un délégué MouseArea avec la logique de traitement tactile appropriée doit être fourni.

Les entrées de clé fonctionnent immédiatement, mais vous devez capturer explicitement l'événement souris/contact sur le délégué et modifier la valeur ListView.currentIndex en fonction de la valeur index de l'élément délégué sélectionné.

Voici un exemple complet:

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')
    }
}

Il fait les choses suivantes:

  • crée une liste simple et un modèle
  • utilise un élément MouseArea dans le délégué d'élément pour mettre à jour, définissez le list.currentIndex = index qui est une variable locale et unique pour l'élément sélectionné
  • écoute l'événement onCurrentItemChanged de la ListView pour montrer comment accéder aux valeurs de l'élément de modèle actuel
  • lie la valeur textuelle de l'élément actuellement sélectionné à l'élément en surbrillance pour l'afficher à l'aide des valeurs sélectionnées ailleurs
23
Ali

Plus simple que jamais, vous pouvez utiliser: onCurrentItemChanged

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

ListView fournit les propriétés dites " attachées ", c'est-à-dire disponibles dans la liste delegate. Parmi eux, Listview.view est une référence à la liste elle-même. Il peut être utilisé pour accéder à la propriété currentIndex et la mettre à jour. Par conséquent, pour résoudre votre problème, il suffit de:

  1. Décommenter //id: contactDelegate.
  2. Définissez contactDelegate.ListView.view.currentIndex = index dans le gestionnaire de variable OnClick. 
3
S.M.Mousavi

Pour ceux qui utilisent la surbrillance sur un ListView avec une hauteur spécifique (étant: non rempli à 100%):

Veillez à activer la propriété clip de ListView, sinon la surbrillance sera toujours visible en dehors des bordures de ListView lors du défilement. 

ListView 
{
    clip: true    
}

Comme discuté ici: Masquer la surbrillance d’un ListView lors du défilement

0
Bartel