webentwicklung-frage-antwort-db.com.de

QML Listview markiertes Element markieren bei Klick

Hallo, ich möchte diesen Code eingeben:

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

in mouseArea in onclick-Handler:

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

Das ist alles 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
              }
}

Im Moment funktioniert Highlight nur, wenn Pfeile verwendet werden, aber dies ist eine App für Android, also muss ich bei Berührung denselben Effekt anwenden, und ZWEITE Frage ist, wie bestimmte Daten aus einem ausgewählten Element in der Listenansicht gelesen werden sollen. Name, Nachname, Nummer und Adresse . Ich möchte diese Werte in Eingabefelder eingeben.

Vielen Dank

qtlistviewqmlselecteditem
21
user123_456

Antwort von denoth : Sie müssen diese Zeile hinzufügen: 

listview1.currentIndex = index
24
Matt

Anscheinend benötigen Sie zwei Lösungen für Ihre Frage:

  1. Sie möchten das aktuelle Element der ListView festlegen können, wenn Sie darauf klicken
  2. Sie möchten wissen, wann sich die aktuelle Auswahl ändert

Die Qt5 Dokumentation sagt dies über ListView Maus- und Berührungshandhabung:

Die Ansichten behandeln das Ziehen und Wechseln des Inhalts, jedoch keine Berührungsinteraktion mit den einzelnen Delegierten. Damit die Delegierten auf Berührungseingaben reagieren können, z. Um den currentIndex festzulegen, muss der Delegat eine MouseArea mit der entsprechenden Berührungslogik bereitstellen.

Die Tasteneingabe funktioniert sofort, aber Sie müssen das mouse/touch -Ereignis des Delegaten explizit abfangen und den ListView.currentIndex-Wert basierend auf dem index-Wert des ausgewählten Delegatenelements ändern.

Hier ist ein vollständiges Beispiel:

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

Es macht die folgenden Dinge:

  • erstellt eine einfache Liste und ein Modell
  • verwendet ein MouseArea-Element innerhalb des Elementdelegaten zum Aktualisieren des list.currentIndex = index, das eine lokale Variable ist und für das ausgewählte Element eindeutig ist
  • wartet auf das Ereignis onCurrentItemChanged der Variable ListView, um anzuzeigen, wie auf die aktuellen Modellelementwerte zugegriffen werden kann
  • bindet den Textwert des aktuell ausgewählten Elements an das hervorgehobene Element, um die aktuell ausgewählten Werte an anderer Stelle anzuzeigen
23
Ali

Einfacher als je zuvor können Sie Folgendes verwenden: onCurrentItemChanged

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

ListView stellt so genannte " attached properties " bereit, d. H. Eigenschaften, die in der delegate-Liste für die Liste verfügbar sind. Unter ihnen ist Listview.view ein Verweis auf die Liste selbst. Es kann verwendet werden, um auf die Eigenschaft currentIndex zuzugreifen und diese zu aktualisieren. Um Ihr Problem zu lösen, nur:

  1. Kommentar //id: contactDelegate.
  2. Legen Sie contactDelegate.ListView.view.currentIndex = index im Evenhandler OnClick fest. 
3
S.M.Mousavi

Für diejenigen, die die Hervorhebung in einer ListView mit einer bestimmten Höhe verwenden (nicht 100% -gefüllt):

Stellen Sie sicher, dass Sie die clip - Eigenschaft der ListView aktivieren, da sonst die Hervorhebung beim Scrollen außerhalb der ListView-Grenzen sichtbar ist. 

ListView 
{
    clip: true    
}

Wie hier besprochen: Blenden Sie die Hervorhebung einer ListView beim Scrollen aus

0
Bartel