Ich möchte eine scrollbare ListView oder TableView für eine QT/QML Touchscreen-Anwendung erstellen

Question

Ich werde eine Touchscreen-Anwendung schreiben, die ein bewegliches ListView-Steuerelement hat. Momentan besteht mein Problem darin, dass der Inhalt aus der Ansicht herauskommt, wenn der Inhalt länger/höher ist als der listView selbst, wenn ich scrolle.

Dies ist mein aktueller Code. Ich brauche nur eine Lösung, um innerhalb der Listenansicht zu blättern und den Rahmen nicht zu überlaufen.

ListModel { 
     id: listModle 
     ListElement { 
      name: "Bill Smith" 
      number: "555 3264" 
     } 
     ListElement { 
      name: "John Brown" 
      number: "555 8426" 
     } 
     ListElement { 
      name: "Sam Wise" 
      number: "555 0473" 
     } 
     ListElement { 
      name: "Bill Smith" 
      number: "555 3264" 
     } 
     ListElement { 
      name: "John Brown" 
      number: "555 8426" 
     } 
     ListElement { 
      name: "Sam Wise" 
      number: "555 0473" 
     } 
    } 

    Rectangle { 
     x: 100 
     y: 100 
     width: 180; height: 200 

     Component { 
      id: contactDelegate 
      Item { 
       width: 180; height: 40 
       Column { 
        Text { text: '<b>Name:</b> ' + name } 
        Text { text: '<b>Number:</b> ' + number } 
       } 
      } 
     } 

     ListView { 
      id: listView 
      anchors.fill: parent 
      model: listModle 
      delegate: contactDelegate 
      //highlight: Rectangle { color: "lightsteelblue"; radius: 5 } 
      focus: true 
      contentHeight: 150 


     } 


    } 

Answer 1

listView exceedes die Rectangle Elternteil, weil es zu viele Elemente angezeigt werden soll.

Das ist völlig in Ordnung, Sie müssen einfach clip: true auf Ihrem Rectangle-Objekt drehen. Auf diese Weise ist der Inhalt Ihrer Liste nur im Ansichtsfenster Rechteck sichtbar.

Edit (pro-Spitze):, wenn die Listenansicht Höhe weniger als ist das einschließende Eltern Rechteck, für die Benutzerfreundlichkeit betrifft, sollten Sie das Scroll-Verhalten deaktivieren. Schauen Sie sich Qml Flickable API (vor allem interactive und contentWidth/Height) einige einfache Prüfung durchzuführen;)

Answer 2

Um someting wie ein Scroll-Index zu implementieren können Sie:

ListView.visibleArea.yPosition 

, die die Y-Position in Prozent gibt.