QML Listview wybrany kulminacyjnym punktem click

Question

Hi chcę umieścić ten kod:

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

do mouseArea w onclick Handler:

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

To wszystko 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 
       } 
} 

Na razie highlight działa tylko przy użyciu strzałek, ale to będzie aplikacja dla Androida, więc potrzebuję dotknięcia tego samego efektu, a DRUGIE pytanie i s jak odczytać określone dane z wybranego elementu w widoku listy? Wewnątrz mam jak id, imię, nazwisko, numer i adres. Chcę umieścić te wartości w polach text_input.

Dziękuję

Answer 1

odpowiedzi udzielonej przez denoth: Trzeba dodać linię:

listview1.currentIndex = index 

Answer 2

ListView zapewnia tak zwane "attached properties", czyli właściwości dostępne w delegate do listy. Wśród nich Listview.view jest odniesienie do samej listy. Można go użyć, aby uzyskać dostęp do właściwości currentIndex i zaktualizować ją. W związku z tym, aby rozwiązać problem, wystarczy:

1. Uncomment //id: contactDelegate.
2. Zestaw contactDelegate.ListView.view.currentIndex = index w nawet uchwyt.

Answer 3

Najprostszy niż kiedykolwiek, można użyć: onCurrentItemChanged

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

Answer 4

Wydaje się, potrzebne są dwa rozwiązania zapytanie:

1. Chcesz być w stanie ustawić aktualną pozycję w ListView po kliknięciu
2. Chcesz wiedzieć, kiedy zmieni się bieżący wybór

Qt5 documentation mówi to o ListView mysz i dotyk obsługa:

Widoki uchwyt przeciągania i cofnięcie ich treści, jednak nie obsługiwać dotykowy interakcję z poszczególnych delegatów. Aby delegaci reagowali na dane dotykowe, np. aby ustawić currentIndex, uczestnik musi posiadać MouseArea z odpowiednią logiką obsługi dotykowej.

wejście Klucz będzie działać out-of-the-box, ale trzeba wyraźnie złapać mysz/dotknąć zdarzenie na delegata i zmienić wartość ListView.currentIndex na podstawie wartości index wybranego elementu delegata.

Oto pełny przykład:

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

To ma następujące rzeczy:

• tworzy prostą listę i model
• używa MouseArea pozycję w delegata poz Aby zaktualizować ustaw list.currentIndex = index który jest lokalnym var i unikalny dla wybranego elementu
• nasłuchuje zdarzenia z ListView, aby pokazać, jak uzyskać dostęp obecna pozycja modelu wartości
• wiąże wartość tekstową aktualnie wybranej pozycji do pozycji podświetlenia pokazać za pomocą aktualnie wybranych wartości gdzie indziej

Answer 5

Dla tych, którzy wykorzystują podświetlenie ListView z konkretna wysokość (jako: nie wypełniona w 100% wysokość):

Pamiętaj, aby włączyć właściwość clip ListView, ponieważ podświetlenie będzie nadal widoczne poza granicami listy ListView podczas przewijania.

ListView 
{ 
    clip: true  
} 

Jak omówiono tutaj: Hide the highlight of a ListView while scrolling