运用ScrollView来显示ScrollBar并配合键盘方向键来滚动

当我们的视窗不能完全显示一个大的显示区域的时候，我们希望能够使用ScrollBar来方便地移动我们的视窗并展示不同部分的内容．对于触屏的设备来说，我们可以在我们的设计中加入Flickable来通过触碰的操作来完成我们视窗的移动．但是对于我们没有触碰的设备来说，我们智能通过ScrollBar或一些方向的热键来移动我们的视窗的位置．在今天的例程中，我们来使用Ubuntu SDK中提供的ScrollView来完成我们所需要的功能．

大家知道，目前Ubuntu目前正在朝convergence的方向前进．也就是说，将来我们的同一个应用不需要做任何的修改就可以部署到不同屏幕尺寸的设备上，无论这个设备是手机，平板及桌面电脑．在我们的设计中，我们需要紧紧记住这一点．对于以前使用ScrollBar的应用来说，建议一知道最新的ScrollView以保证最终的应用能够部署到所有的设备上．

我们还是先来看一看我们例程：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "scrollview.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("scrollview")

        ScrollView {
            id: scrollview
            anchors.fill: parent

            Image {
                source: "images/bigpic.jpg"
                width: sourceSize.width
                height: sourceSize.height
            }

           Component.onCompleted: {
               var keys = Object.keys(scrollview);
               for( var i = 0; i < keys.length; i++ ) {
                   var key = keys[ i ];
                   var data = key + ' : ' + scrollview[ key ];
                   console.log(data )
               }
           }
        }
    }
}

从上面的代码中可以看出来，我们使用了一个ScrollView．在它的里面是一个比ScrollView视窗还要大很多的图片．图片的大小，我们通过Image中的sourceSize得到．为了能够看清整幅图，我们设计了一个ScrollView．运行我们的应用：

     

从上面的显示中可以看出来，当图片的宽度比我们的视窗的宽度还要大的时候，它显示了一个scrollbar供我们进行拖动．

从我们的调试的信息中可以看出来：

qml: contentItem : QQuickImage(0x121a828)
qml: flickableItem : QQuickFlickable(0x121a330)

ScrollView为我们创建了一个QQuickFlickable的元件，并为我们所使用．QQuickFlickable对应于我们QML中Flickable．

整个项目的源码为： https://github.com/liu-xiao-guo/scrollview

我们下面来创建另外一个项目：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.ListItems 1.3

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "scrollview1.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("scrollview1")

        ScrollView {
            id: scrollview
            anchors.fill: parent

            ListView {
                model: 100
                delegate: Standard {
                    Label {
                        text: "Item + " + index
                    }
                }
            }

            Component.onCompleted: {
                var keys = Object.keys(scrollview);
                for( var i = 0; i < keys.length; i++ ) {
                    var key = keys[ i ];
                    var data = key + ' : ' + scrollview[ key ];
                    console.log(data )
                }
            }
        }
    }
}

在这里我们使用了一个ListView．运行我们的应用：

 

从上面可以看出来，当我们的ListView中的内容大于时间的窗口的时候，在视窗的外面显示了一个垂直的ScrollBar供我们来移动我们的视窗．

从我们的调试的信息中可以看出来：

qml: contentItem : QQuickListView(0xba2c30)
qml: flickableItem : QQuickListView(0xba2c30)

ScrollView没有为我们创建一个新的Flickable，它利用了现有的ListView（也是继承于一个Flickable）提供的Flickable．

整个项目的源码在： https://github.com/liu-xiao-guo/scrollview1