ScrollView在qml的屏幕左侧

Question

我试图将scrollview放到qml

中ListView的左侧

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

如果我认为是对的，您可以使用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'
        }
    }
}

您可以根据自己的喜好自定义此ScrollBar 见这里：http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-scrollbar