zoukankan      html  css  js  c++  java
  • qt qml scrollbar 移动APP风格的滚动轴

    依附于Flickable组件的滚动轴
        自动放置在恰当位置
        拖动时显示,不动时消失
    Lisence: MIT 请保留此声明
    Author: surfsky.cnblogs.com 2014-12

    【先看效果】

    【下载】

    http://download.csdn.net/detail/surfsky/8426563

    【核心代码】

     1 ScrollBar {
     2     id: root
     3     opacity: 0
     4     orientation: Qt.Vertical
     5 
     6     // 绑定到Flickable组件
     7     property Flickable target : Flickable{}
     8 
     9     // 位置
    10      orientation==Qt.Vertical ? 10 : target.width-10
    11     height: orientation==Qt.Vertical ? target.height-10 : 10
    12     anchors.right: orientation==Qt.Vertical ? target.right : undefined
    13     anchors.bottom: orientation==Qt.Vertical ? undefined : target.bottom
    14 
    15     // 滚动
    16     position: orientation==Qt.Vertical ? target.visibleArea.yPosition   : target.visibleArea.xPosition
    17     pageSize: orientation==Qt.Vertical ? target.visibleArea.heightRatio : target.visibleArea.widthRatio
    18 
    19 
    20     // 移动时显隐滚动轴
    21     Connections{
    22         target: root.target
    23         onMovingVerticallyChanged: {
    24             if (target.movingVertically)
    25                 fadeIn.start();
    26             else
    27                 fadeOut.start();
    28         }
    29         onMovingHorizontallyChanged: {
    30             if (target.movingHorizontally)
    31                 fadeIn.start();
    32             else
    33                 fadeOut.start();
    34         }
    35     }
    36     NumberAnimation { id:fadeIn;  target: root; properties: "opacity"; duration: 400; from:0; to:1 }
    37     NumberAnimation { id:fadeOut; target: root; properties: "opacity"; duration: 400; from:1; to:0 }
    38 }

    【调用示例】

    1     FlickableScrollBar {
    2         target: view
    3         orientation: Qt.Vertical
    4     }
  • 相关阅读:
    谈谈焦虑
    Bridge
    Abstract Factory
    开篇辞
    缓存穿透和缓存雪崩
    缓存与数据库的一致性思考
    GDB
    代码格式化
    CSMA/CA协议
    18年秋招(19届)复习指导+面经总结,手把手教你进大厂——阿里、网易、京东、多益等
  • 原文地址:https://www.cnblogs.com/surfsky/p/4290753.html
Copyright © 2011-2022 走看看