滾動型屏幕的QML

Question

左邊，我試圖把滾動型到ListView的萊夫特賽德在QML

import QtQuick 2.0 
import QtQuick.Controls 1.4 

Item { 

    width: 1580 
    height: 687 

    Rectangle 
    { 
     anchors.fill: parent 
     color: "Gray" 
    } 

    ListModel 
    { 
     id: phonecontactsModel 

     ListElement { 
      // name :firstname+" "+lastname 
      firstname:"Alexander" 
      lastname:"Wurz" 
      contactimg: "graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "" 
      phonenum:"02476 000 001" 
      favstatus:0 
     } 

     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
     ListElement{ 
      //name:firstname+" "+lastname 
      firstname:"Bernie" 
      lastname:"Ecclestone" 
      contactimg:"graphics/Phone/contacts/contact_pic1.png" 
      contactimgSq: "graphics/Phone/contacts/contact_pic1.png" 
      phonenum:"02476 000 002" 
      favstatus:1 
     } 
    } 

    ScrollView { 
     id: id_scrollView 
     anchors.fill: parent 
     objectName: "ScrollView" 
     frameVisible: true 
     highlightOnFocus: true 
    ListView 
    { 
     height: parent.height 
     width: parent.width 
     model: phonecontactsModel 
     delegate: contacts_delegate 
     spacing: 6 
     anchors.left: parent.left 
     anchors.leftMargin: 360 
     clip: true 

    } 
} 


    Component 
    { 
     id: contacts_delegate 

     Item { 
      id: wrapper 
      height: 150 
      width: 1080 

      Rectangle 
      { 
       color: "#99000000" 
       height: parent.height 
       width: parent.width -150 
      } 


      Image { 
       width: parent.height 
       height: parent.height 
       id: contactImage 
       source: contactimg 
       fillMode: Image.PreserveAspectFit 
       anchors.left: parent.left 
      } 

      Text { 
       id: contactName 
       text: firstname 
       anchors.left: contactImage.right 
       anchors.leftMargin: 70 
       color: "White" 
       font.pointSize: 25 
       anchors.verticalCenter: parent.verticalCenter 
      } 

      Image { 
       id: messageContact 
       source: "graphics/Phone/messaging_icon.png" 
       anchors.right: parent.right 
       anchors.verticalCenter: parent.verticalCenter 
      } 



     } 
    } 
} 

我不能指定滾動視圖寬度或高度或它的位置的左邊查看我如何才能做到這一點

我想創建這樣的

Answer 1

如果我想什麼是正確的，你還可以使用t他QtQuick.Controls 2.0 ScrollBar而不是使用滾動視圖。

e.g：

ListView { 
    id: lview 
    anchors.right: parent.right 
    width: 300 
    anchors.top: parent.top 
    anchors.bottom: parent.bottom 
    model: 100 
    delegate: Rectangle { width: 300; height: 50; border.color: 'grey' } 
    spacing: 6 

    ScrollBar.vertical: ScrollBar { 
     anchors.right: lview.left 
     width: 50 
     active: true 
     background: Item { 
      Rectangle { 
       anchors.centerIn: parent 
       height: parent.height 
       width: parent.width * 0.2 
       color: 'grey' 
       radius: width/2 
      } 
     } 

     contentItem: Rectangle { 
      radius: width/3 
      color: 'yellow' 
     } 
    } 
} 

您可以自定義這個滾動條根據自己的喜好。
在這裏看到：http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-scrollbar