2013-10-16 11 views
7

私は、リストビューコントロールを持つタッチスクリーンアプリケーションを作成します。私の問題は、コンテンツがリストビュー自体よりも長い/高い場合は、スクロールしようとするとコンテンツがビューから出てくることです。QT/QMLタッチスクリーンアプリケーションのスクロール可能なListViewまたはtableViewを作成したい

enter image description here

これは私の現在のコードです。私は、リストビュー内でスクロールするだけで、その境界線をオーバーフローさせないようにするための解決策が必要です。

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 


     } 


    } 

答えて

11

listView exceedes表示するには、あまりにも多くの要素があるのでRectangle親。

これで問題はありません。あなたのRectangleオブジェクトでclip: trueを回すだけです。こうすることで、リストの内容は四角形のビューポートからのみ表示されます。

編集(プロティップ):リストビューの高さは、囲む親長方形より小さい場合、ユーザビリティの懸念のためにあなたがスクロール動作を無効にする必要があります。

ListView.visibleArea.yPosition 

%にY位置を与える:あなたが使用することができ、スクロールインデックスのようないろいろ書いを実装するには)

+0

ありがとうございます;-) –

+0

あなたは歓迎です:)もし誰かがここでぶつかったら、それはあなたが知っていると思います。 – Polentino

0

を、いくつかの簡単なチェックを実行するQml Flickable API(特にinteractivecontentWidth/Height)を見てください。

関連する問題