滚动型屏幕的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