Roson讲Qt#25 Quick Controls 2之ScrollView(滚动视图)

港控/mmm° 2022-09-11 03:15 120阅读 0赞

# 1.概念 #

ScrollView为用户定义的内容提供滚动。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_5_color_FFFFFF_t_70_g_se_x_16][]

# 2.简单用法 #

下面这个示例演示了ScrollView最简单的用法：

ScrollView {
            width: 200
            height: 200
            clip: true
    
            Label {
                text: "ABC"
                font.pixelSize: 224
            }
        }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_6_color_FFFFFF_t_70_g_se_x_16][]

**注意**:ScrollView不会自动裁剪它的内容。如果它不是作为一个全屏项目使用，您应该考虑将clip属性设置为true，如上所示。

第二个示例演示了如何使用现有的Flickable，即ListView。

ScrollView {
            width: 200
            height: 200
    
            ListView {
                model: 20
                delegate: ItemDelegate {
                    text: "Item " + index
                }
            }
        }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16][]

# 3.Scroll Bars #

可以使用ScrollBar访问和定制水平和垂直滚动条。下面的示例调整滚动条策略，使水平滚动条始终关闭，而垂直滚动条始终打开。

ScrollView {
            width: 200
            height: 200
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    
            ListView {
                model: 20
                delegate: ItemDelegate {
                    text: "Item " + index
                }
            }
        }

# 4.触摸与鼠标交互 #

ScrollView {
          // ...
          ScrollBar.horizontal.interactive: true
          ScrollBar.vertical.interactive: true
      }

通过设置interactive属性可以控制滚动条是否可以与鼠标交互。interactive为true时可以用鼠标拖动滚动条来滚动视图，也可以通过鼠标滚轮来滚动视图，但interactive为tfalse时，只能通过鼠标滚轮来滚动视图。

# 5.属性 #

## 5.1 list<Item> contentChildren ##

此属性包含内容子项的列表。  
该列表包含在QML中声明为视图子级的所有项。  
注意：与contentData不同，contentChildren不包括非可视QML对象。

## 5.2 list<Object> contentData ##

此属性保存内容数据列表。  
该列表包含在QML中声明为视图子级的所有对象。  
注意：与contentChildren不同，contentData包含非可视的QML对象。

##    5.3 real contentHeight ##

此属性保存可滚动内容的高度。  
如果在ScrollView中仅使用单个项目，则会根据其包含项目的隐式大小自动计算内容大小。

##    5.4 real contentWidth ##

此属性保存可滚动内容的宽度。  
如果在ScrollView中仅使用单个项目，则会根据其包含项目的隐式大小自动计算内容大小。

# 6.自定义样式 #

//ScrollView由背景项、水平和垂直滚动条组成。
    ScrollView {
    	id: control
    
    	width: 200
    	height: 200
    	focus: true
    
    	//放入一个Lable控件，并把文字尺寸设得很大，以让滚动条自动显示出来
    	Label {
    		text: "ABC"
    		font.pixelSize: 224
    	}
    
    	//设置垂直滚动条样式
    	ScrollBar.vertical: ScrollBar {
    		parent: control
    		x: control.mirrored ? 0 : control.width - width	//设置垂直滚动条起点的x坐标
    		y: control.topPadding	//设置垂直滚动条起点的y坐标
    		height: control.availableHeight	//设置垂直滚动条高度
    		active: control.ScrollBar.horizontal.active	//设置滚动条是否为活动状态，为true时，程序启动后滚动条会自动显示出来；为false时，则不会显示，而是等鼠标滚动时再显示
    	}
    
    	//设置水平滚动条样式
    	ScrollBar.horizontal: ScrollBar {
    		parent: control
    		x: control.leftPadding	//设置垂直滚动条起点的x坐标
    		y: control.height - height	//设置垂直滚动条起点的y坐标
    		width: control.availableWidth	//设置水平滚动条宽度
    		active: control.ScrollBar.vertical.active	//设置滚动条是否为活动状态
    	}
    
    	//背景区域
    	background: Rectangle {
    		border.color: control.activeFocus ? "#21be2b" : "#bdbebf"	//边框颜色
    		color: "#00aaff"	//背景填充色
    	}
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_5_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/24a396dac25c474e966685a41d843e33.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_6_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/cff5898ffaf54909ab27873d3d6298b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/267d5c8817a14ebeb551af72c106fa9b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/93b8c3d2d4534f9ca366bb6e65ab0d67.png