运用ScrollView来显示ScrollBar并配合键盘方向键来滚动
2016-03-15 11:27
323 查看
当我们的视窗不能完全显示一个大的显示区域的时候,我们希望能够使用ScrollBar来方便地移动我们的视窗并展示不同部分的内容.对于触屏的设备来说,我们可以在我们的设计中加入Flickable来通过触碰的操作来完成我们视窗的移动.但是对于我们没有触碰的设备来说,我们智能通过ScrollBar或一些方向的热键来移动我们的视窗的位置.在今天的例程中,我们来使用Ubuntu
SDK中提供的ScrollView来完成我们所需要的功能.
大家知道,目前Ubuntu目前正在朝convergence的方向前进.也就是说,将来我们的同一个应用不需要做任何的修改就可以部署到不同屏幕尺寸的设备上,无论这个设备是手机,平板及桌面电脑.在我们的设计中,我们需要紧紧记住这一点.对于以前使用ScrollBar的应用来说,建议一知道最新的ScrollView以保证最终的应用能够部署到所有的设备上.
我们还是先来看一看我们例程:
从上面的代码中可以看出来,我们使用了一个ScrollView.在它的里面是一个比ScrollView视窗还要大很多的图片.图片的大小,我们通过Image中的sourceSize得到.为了能够看清整幅图,我们设计了一个ScrollView.运行我们的应用:
从上面的显示中可以看出来,当图片的宽度比我们的视窗的宽度还要大的时候,它显示了一个scrollbar供我们进行拖动.
从我们的调试的信息中可以看出来:
ScrollView为我们创建了一个QQuickFlickable的元件,并为我们所使用.QQuickFlickable对应于我们QML中Flickable.
整个项目的源码为:https://github.com/liu-xiao-guo/scrollview
我们下面来创建另外一个项目:
在这里我们使用了一个ListView.运行我们的应用:
从上面可以看出来,当我们的ListView中的内容大于时间的窗口的时候,在视窗的外面显示了一个垂直的ScrollBar供我们来移动我们的视窗.
从我们的调试的信息中可以看出来:
ScrollView没有为我们创建一个新的Flickable,它利用了现有的ListView(也是继承于一个Flickable)提供的Flickable.
整个项目的源码在:https://github.com/liu-xiao-guo/scrollview1
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
相关文章推荐
- MapReduce:实现jion的几种方法
- Bzoj 3809: Gty的二逼妹子序列 莫队,分块
- Linux下安装Redis
- OPENCV条形码检测与识别
- 软件项目管理(2)
- Oracle导出excel数据
- html/css 编码规范
- 纯手动编译安装LAMP, cacti , nagios , zabbix
- POJ 1734 Sightseeing trip(最小环-floyd)
- Lua中的string库(字符串函数库)总结
- xpath学习积累
- 安卓开发-Activity中finish() onDestroy() 和System.exit()的区别(转)
- [转][译]关于CSS中的float和position和z-index
- Python的净值数据接口调用示例分享
- 让浏览器变身代码编辑器
- Struts2 注解零配置方法(convention插件使用)
- hdu_2669 Romantic(扩展欧几里得)
- Jni中C++和Java的参数传递(转)
- 使用Gson解析json
- Linux命令之rm