qml 自定义滑动条（官方example）

原创于 2017-07-12 04:29:56 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Qt #qml #滑动条

qml 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了在Qt QML中如何创建并定制一个滑动条组件，通过官方示例解析，展示了自定义样式和交互逻辑的实现过程，帮助开发者更好地理解和应用Qt QML的滑动条功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  Rectangle {
      id: frame
      clip: true
      width: 160
      height: 160
      border.color: "black"
      anchors.centerIn: parent

      Text {
          id: content
          text: "ABC"
          font.pixelSize: 169

          MouseArea {
              id: mouseArea
              drag.target: content
              drag.minimumX: frame.width - width
              drag.minimumY: frame.height - height
              drag.maximumX: 0
              drag.maximumY: 0
              anchors.fill: content
          }
      }

      ScrollIndicator {
          id: verticalIndicator
          active: mouseArea.pressed
          orientation: Qt.Vertical
          size: frame.height / content.height
          position: -content.y / content.height
          anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
      }

      ScrollIndicator {
          id: horizontalIndicator
          active: mouseArea.pressed
          orientation: Qt.Horizontal
          size: frame.width / content.width
          position: -content.x / content.width
          anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
      }
  }