Qt. QML. Как сделать скроллбар? 2 варианта — ScrollView и ScrollBar

Вариант 1 — Flickable + ScrollBar (QtQuick.Controls 2.0)

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.0


Window {
    visible: true
    width: 400; height: 400

    Flickable {
//        width: 200; height: 200
        anchors.fill: parent
        contentWidth: image.width; contentHeight: image.height

        Image { id: image; source: "bigImage.png" }
        ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
        ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }

        focus: true
        Keys.onUpPressed: ScrollBar.decrease()
        Keys.onDownPressed: ScrollBar.increase()

    }
}

Вариант 2 — ScrollView (QtQuick.Controls 1.4)

import QtQuick 2.7
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 300
    height: 300
    title: qsTr("Hello World")

    ScrollView {
        id: sview
        anchors.fill: parent
//        width: 300; height: 300
        horizontalScrollBarPolicy: Qt.ScrollBarAsNeeded
        verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn

        Rectangle {
            id: rect
            width: sview.width
//            height: sview.height
            height: model1.count * 40
//            anchors.fill: parent



            ListModel {
                id: model1
                ListElement {
                    name: "Bill Smith"
                    number: "555 326411111"
                }
                ListElement {
                    name: "John Brown"
                    number: "555 8426"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise22"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise33"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise44"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise55"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise336"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise447"
                    number: "555 0473"
                }
                ListElement {
                    name: "Sam Wise558"
                    number: "555 0473"
                }
            }

            Component {
                id: contactDelegate
                Item {
                    width: 180; height: 40
                    Column {
                        Text { text: 'Name: ' + name }
                        Text { text: 'Number: ' + number }
                    }
                }
            }

            ListView {
                anchors.fill: parent
                model: model1
                delegate: contactDelegate
                highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                focus: true
            }
        }
     }
}

http://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html
http://doc.qt.io/qt-5/qml-qtquick-controls-scrollview.html