summaryrefslogtreecommitdiffstats
path: root/examples/declarative/scrollbar/display.qml
blob: 536a8b79a65050f16a53f44fb576183ebc79e92f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import Qt 4.6

Rectangle {
    width: 640
    height: 480
    // Create a flickable to view a large image.
    Flickable {
        id: view
        anchors.fill: parent
        Image {
            id: picture
            source: "pics/niagara_falls.jpg"
        }
        viewportWidth: picture.width
        viewportHeight: picture.height
        // Only show the scrollbars when the view is moving.
        states: [
            State {
                name: "ShowBars"
                when: view.moving
                PropertyChanges { target: verticalScrollBar; opacity: 1 }
                PropertyChanges { target: horizontalScrollBar; opacity: 1 }
            }
        ]
        transitions: [
            Transition {
                from: "*"
                to: "*"
                NumberAnimation {
                    properties: "opacity"
                    duration: 400
                }
            }
        ]
    }
    // Attach scrollbars to the right and bottom edges of the view.
    ScrollBar {
        id: verticalScrollBar
        opacity: 0
        orientation: "Vertical"
        position: view.visibleArea.yPosition
        pageSize: view.visibleArea.heightRatio
        width: 12
        height: view.height-12
        anchors.right: view.right
    }
    ScrollBar {
        id: horizontalScrollBar
        opacity: 0
        orientation: "Horizontal"
        position: view.visibleArea.xPosition
        pageSize: view.visibleArea.widthRatio
        height: 12
        width: view.width-12
        anchors.bottom: view.bottom
    }
}