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而不是使用scrollview。

例如：

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