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     }
  • 相关阅读:
    很好的学习idea工具的教程
    事件绑定
    接口出现问题
    IDEA快捷方式
    源代码编译安装Python3.5.2
    CentOS7使用无线网卡
    MySql5.7.12设置log-bin
    报表传递参数控制数据权限
    python将png转为pkm
    WebGL纹理详解——压缩纹理的使用
  • 原文地址:https://www.cnblogs.com/surfsky/p/4290753.html
Copyright © 2011-2022 走看看