list滚动条Scroll 偏移和长度计算公式总结

Posted 2021-12-10 wxmwanggood

list滚动条Scroll 偏移和长度计算公式总结

A.计算偏移:

偏移/list窗口高度 = 目前总偏移/所有listitem高度总和

即：
偏移 = (目前总偏移 *  list窗口高度 ) / 所有listitem高度总和

B.计算Scroll拇指高度

所有listitem高度总和 / list窗口高度 = pageCnt

Scroll拇指高度 = list窗口高度 /  pageCnt

即：
Scroll拇指高度 = (list窗口高度 * list窗口高度) / 所有listitem高度总和

转载：https://blog.csdn.net/guoquan2003/article/details/6163277
对于qml,有个类叫做ScrollBar

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
          id: frame
          clip: true
          width: 640
          height: 160
          border.color: "black"
          anchors.centerIn: parent
          ListModel {
              id:contactModel
              ListElement {
                  name: "Bill Smith"
                  number: "555 3264"
              }
              ListElement {
                  name: "John Brown"
                  number: "555 8426"
              }
              ListElement {
                  name: "Sam Wise"
                  number: "555 0473"
              }
          }
          ListView {
              id:content
               width: 640
               height: 200
              model: contactModel
              delegate: Text {
                  text: name + ": " + number
              }
          }
          ScrollBar {
              id: vbar
              hoverEnabled: true
              active: hovered || pressed
              orientation: Qt.Vertical
              size: frame.height / content.height
              anchors.top: parent.top
              anchors.right: parent.right
              anchors.bottom: parent.bottom

              contentItem: Image {
                source:"./滑动杆.png"
              }

          }

//          ScrollBar {
//              id: hbar
//              hoverEnabled: true
//              active: hovered || pressed
//              orientation: Qt.Horizontal
//              size: frame.width / content.width
//              anchors.left: parent.left
//              anchors.right: parent.right
//              anchors.bottom: parent.bottom
//          }

      }
    Button{
        id:test_button
        x:0
        y:0
        onClicked: {
            contactModel.append({"name": "123123123", "number":"Jackfruit"});
            content.height = content.count *5
        }
    }
}

其中ScrollBar的size可以控制ScrollBar的大小。frame.width相当于list的窗口高度。content.width相当于list的所有item的高度。每次添加数据时，都需要添加所有list item的高度，从而得出size控制大小