当前位置: 首页 > 工具软件 > Flickable.js > 使用案例 >

20.Quick QML-Flickable滑动窗口

商飞翮
2023-12-01

  Flickable元素继承于item元素,是一个不可视元素,它的作用是将一个较大的子项目设置在一个较小的窗口上,使得子项目的视图可以滚动。

  Flickable不会自动剪裁它的内容,如果不是将它用作全屏项目,则应考虑将clip属性设置为true来隐藏超出区域的内容。并且放置在Flickable里面的项使用anchor锚布局时,不能用id来复制,而只能用parent代替。

示例用法

以下示例显示了大图像上的小视图,用户可以在其中拖动或滑动图像以查看图像的不同部分。

Window {
    visible: true;
    width: 400
    height: 300

    Flickable {
          anchors.fill: parent
          contentWidth: image.width; contentHeight: image.height

          Image {
              id: image
              asynchronous : true //异步加载,默认为false,如果是加载网络资源(例如HTTP)的图像,那么必须为true
              source : "http://images.cnblogs.com/cnblogs_com/lifexy/1188191/o_2.jpg"
              cache: false
              fillMode: Image.Pad
              onStatusChanged: {
                  if (image.status == Image.Error)
                  console.log("加载图片失败");
              }
          }
    }
}
 类似资料: