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

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

1.概念

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

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_5_color_FFFFFF_t_70_g_se_x_16

2.简单用法

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

  1. ScrollView {
  2.         width: 200
  3.         height: 200
  4.         clip: true
  6.         Label {
  7.             text: "ABC"
  8.             font.pixelSize: 224
  9.         }
  10.     }

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_6_color_FFFFFF_t_70_g_se_x_16

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

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

  1. ScrollView {
  2.         width: 200
  3.         height: 200
  5.         ListView {
  6.             model: 20
  7.             delegate: ItemDelegate {
  8.                 text: "Item " + index
  9.             }
  10.         }
  11.     }

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16

3.Scroll Bars

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

  1. ScrollView {
  2.         width: 200
  3.         height: 200
  4.         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
  5.         ScrollBar.vertical.policy: ScrollBar.AlwaysOn
  7.         ListView {
  8.             model: 20
  9.             delegate: ItemDelegate {
  10.                 text: "Item " + index
  11.             }
  12.         }
  13.     }

4.触摸与鼠标交互

  1. ScrollView {
  2.       // ...
  3.       ScrollBar.horizontal.interactive: true
  4.       ScrollBar.vertical.interactive: true
  5.   }

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

5.属性

5.1 list contentChildren

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

5.2 list contentData

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

5.3 real contentHeight

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

5.4 real contentWidth

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

6.自定义样式

  1. //ScrollView由背景项、水平和垂直滚动条组成。
  2. ScrollView {
  3.     id: control
  5.     width: 200
  6.     height: 200
  7.     focus: true
  9.     //放入一个Lable控件，并把文字尺寸设得很大，以让滚动条自动显示出来
  10.     Label {
  11.         text: "ABC"
  12.         font.pixelSize: 224
  13.     }
  15.     //设置垂直滚动条样式
  16.     ScrollBar.vertical: ScrollBar {
  17.         parent: control
  18.         x: control.mirrored ? 0 : control.width - width    //设置垂直滚动条起点的x坐标
  19.         y: control.topPadding    //设置垂直滚动条起点的y坐标
  20.         height: control.availableHeight    //设置垂直滚动条高度
  21.         active: control.ScrollBar.horizontal.active    //设置滚动条是否为活动状态，为true时，程序启动后滚动条会自动显示出来；为false时，则不会显示，而是等鼠标滚动时再显示
  22.     }
  24.     //设置水平滚动条样式
  25.     ScrollBar.horizontal: ScrollBar {
  26.         parent: control
  27.         x: control.leftPadding    //设置垂直滚动条起点的x坐标
  28.         y: control.height - height    //设置垂直滚动条起点的y坐标
  29.         width: control.availableWidth    //设置水平滚动条宽度
  30.         active: control.ScrollBar.vertical.active    //设置滚动条是否为活动状态
  31.     }
  33.     //背景区域
  34.     background: Rectangle {
  35.         border.color: control.activeFocus ? "#21be2b" : "#bdbebf"    //边框颜色
  36.         color: "#00aaff"    //背景填充色
  37.     }
  38. }

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 1

发表评论

表情：
评论列表 （有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读