list View scroll indicator

[jfinn88]

I'm working on fixing a list view scroll indicator, the issue is the scroll indicator never makes it to bottom of the list view.



//BITListViewScroller
import QtQuick 2.3
import "../../Common/UI"

Rectangle {
objectName: "BITListViewScroller"

property int listHeight: parent.height - Metrics.buttonHeight

border { color: '#44FFFFFF'; width: Metrics.ptToPxF(1.5) }
anchors.right: parent.right; width: Metrics.ptToPx(6)
height: Math.max(Metrics.buttonHeight, parent.visibleArea.heightRatio * listHeight)
y: parent.visibleArea.yPosition * listHeight
color: '#EE000000'
visible: parent.contentHeight > parent.height // visible if content taller than listview
opacity: parent.moving ? 1 : .3 // translucent when not moving

Behavior on opacity { NumberAnimation { duration: 200 } }
}


List view use BITListViewScrollIndicator



//ListViewWithScrollbar
import QtQuick 2.3
import "../../Common/UI"

ListView {
id: listView
boundsBehavior: Flickable.StopAtBounds
snapMode: ListView.SnapToItem
clip: true

BITListViewScroller{}
}


Implementation of the listView and Scroll indicator, When scrolling through the list the indicator has a large gap between it and the bottom of the list

I have messed with the visibleArea's heightRatio and yPosition to get rid of the gar but subtracting of some set integer value and it seems to get rid of the gap but its used in multiple places.

I found in the documentation that the do the same calculation for a scroll indicator

I need a way to adjust the BITListViewScroller heightRatio and yPosition to get rid of the gap ?



//Implemantatioin of ListViewWithScrollbar
// Test Units
ListViewWithScrollbar {
id: scrollViewTestUnits
width : root.width
height : root.height - columnMasterUnit.height - bNavigationTitleBar.height
anchors {
top : columnMasterUnit.bottom;
left: bNavigationTitleBar.left
}
onFlickingChanged: {
console.debug(visibleArea.heightRatio, visibleArea.yPosition)
}

model: mAboutTestUnitsModel
delegate: Row {
spacing: Metrics.buttonHeight/2
anchors.right: parent.right
Text {
width: scrollViewTestUnits.width - parent.spacing
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignLeft
font { family: PStyle.defaultFontFamily; bold: false; pixelSize: Metrics.ptToPx(unitsFont)}
text : Name + (Version == "" ? "" : "\n " + Version)
}
}
}


attached is a screen cap of my scroll idicator with the gap between the indicator and the bottom of the list...

do I need to adjust the height of the scroll indicator ?

I thought about exposing properties using property bindings to expose the indicators height and y values at setting them based on what that particular list view needs

-I can get rid of the gap by subtracting off 445 from the parent.visibleArea.heightRatio * listHeight calculation but its seems wrong or hacky to do it like that

12649

[jfinn88]

The issue is propagating from the Metrics.buttonHeight calculation removing this fixes most of my issues

I'm able to see the scroll indicator hit the bottom of the flickableArea now, however I'm still having issues getting the indicator to resize appropriately based of the amount of data populated. With large data sets the indicator disappears cause it is so small. Hard coding a min value for the scroll indicator size is not the correct solution (weird things happen indicator goes past list view area). This is hard to explain but it seems like I need to reverse the calculations I'm performing, since this is based of a heightRatio and yPosition. Since I need to set a static size of the indicator when large amounts of data are loaded I then need to calculate the yPosition I believe based of static size of indicator

The buttonHeight metrics are computed based upon the display dot pitch and a minimum acceptable height for interactive elements. The minimum height is based on human factors.
Recommended button height: 9mm
Minimum button height: 7mm



property int listHeight: parent.height - Metrics.buttonHeight

border { color: '#44FFFFFF'; width: Metrics.ptToPxF(1.5) }
anchors.right: parent.right; width: Metrics.ptToPx(6)
height: Math.max(Metrics.buttonHeight, parent.visibleArea.heightRatio * listHeight)
y: parent.visibleArea.yPosition * listHeight