前言当文字太多难以全部显示在界面上时，通常会用到滚动条，只显示少部分的文字，其余的文字需要滚动才能看到。这就运用到了滚动控件。我按照自己的方式将其分为了三类，我们依次来学习一下吧！交互式滚动条ScrollBarScrollBar是一个交互式栏，可用于滚动到特定位置。滚动条可以是垂直或水平的，并且可以连接到任何Flickable。所谓交互式，简单理解就是与你的操作有没有互动，比如说当我们按压滚动条时，它立即显现并且可以对我们的操作做出反应，这个就是交互式的滚动条。属性
方法
例程学习导入控件库 import QtQuick.Layouts 1.3 在可视化对象中新增ScrollBar Rectangle {
id: frame
clip: true
width: 160
height: 160
border.color: "black"
anchors.centerIn: parent
Text {
id: content
text: "ABC"
font.pixelSize: 160
x: -hbar.position * frame.width
y: -vbar.position * frame.height
}
ScrollBar {
id: vbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: frame.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
size: frame.width / content.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}注意：当调用ScrollBar控件时，需要将clip设置为true，否则Text将全部显示。Text的x和y坐标加负号的原因是ScrollBar的position位置越大，Text里面的文本就要像相反方向移动的越多。 还有我们必须手动完成的操作
以vbar为例，设置当鼠标悬停或者按压滚动条时可见，设置其大小，范围在0.0-1.0之间，设置其布局在某一边上。看一下效果
非交互式滚动条ScrollIndicator既然有交互式，那么必然会有非交互式，它不能对操作做出反应，所以自然属性也就少了很多。ScrollIndicator是一个非交互式指示器，用于指示当前滚动位置。滚动指示器可以是垂直或水平的，并且可以附加到任何Flickable上。属性
例程学习 Rectangle {
id: frame
clip: true
width: 160
height: 160
border.color: "black"
anchors.centerIn: parent
Text {
id: content
text: "ABC"
font.pixelSize: 169
MouseArea {
id: mouseArea
drag.target: content
drag.minimumX: frame.width - width
drag.minimumY: frame.height - height
drag.maximumX: 0
drag.maximumY: 0
anchors.fill: content
}
}
ScrollIndicator {
id: verticalIndicator
active: mouseArea.pressed
orientation: Qt.Vertical
size: frame.height / content.height
position: -content.y / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
ScrollIndicator {
id: horizontalIndicator
active: mouseArea.pressed
orientation: Qt.Horizontal
size: frame.width / content.width
position: -content.x / content.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}看上面的例程，大家可以和ScrollBar的例程比较一下，大部分的代码都是相同的，不同的地方在于因为没有交互性，所以我们设置其active时就不能选择pressed了，需要借助一个鼠标拖拽事件，目标为Text,同时设置active当鼠标被按下时可见。ScrollIndicator的position位置也是随着Text的拖动而改变的。运行看看效果，大家看看有啥区别。
滚动视图ScrollViewScrollView提供用户定义内容的滚动。视图的概念先不和大家说了，等到后期拓展的时候再说，大家先了解一下ScrollView的用法就可以。属性
例程学习ScrollView {
width: 200
height: 200
clip: true
anchors.centerIn: parent
Label {
text: "ABC"
font.pixelSize: 224
}
}大家自己运行一下，你会发现和上面两种的效果差不多。但是，实现原理是不一样的，前面两种是在可视化项目中定义了Text和滚动控件，必须设置滚动控件的位置等一些因素才可以实现滚动浏览的效果。而ScrollView是一种视图，我们只需要在视图中定义需要显示的控件，当控件的尺寸大于视图的大小时，视图会自动的增加水平和垂直方向的滚动条。 总结源码：15.zip 关于滚动视图部分的内容，我们先不继续往下说了，大家可以重点关注一下前两种。建议大家还是仿照某个自己喜欢的界面，找找有没有这节课学习的内容，有的话就自己写代码实现它，这样学起来才能高效。OK，我们下节再会！ |
