feat(StatusScrollView): New scrollview component without twitches (#766)

This commit is contained in:
Mikhail Rogachev 2022-07-14 15:29:14 +03:00 committed by Michał Cieślak
parent 170660a6be
commit bd2932594a
9 changed files with 272 additions and 210 deletions

View File

@ -10,7 +10,7 @@ import StatusQ.Components 0.1
import "../demoapp/data" 1.0 import "../demoapp/data" 1.0
ScrollView { StatusScrollView {
id: root id: root
QtObject { QtObject {

View File

@ -59,7 +59,7 @@ StatusAppThreePanelLayout {
} }
} }
ScrollView { StatusScrollView {
id: scrollView id: scrollView
anchors.top: statusChatInfoToolBar.bottom anchors.top: statusChatInfoToolBar.bottom

View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Layout 0.1 import StatusQ.Layout 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import "data" 1.0 import "data" 1.0
@ -21,7 +22,7 @@ StatusAppTwoPanelLayout {
text: "Profile" text: "Profile"
} }
ScrollView { StatusScrollView {
anchors.top: profileHeadline.bottom anchors.top: profileHeadline.bottom
anchors.topMargin: 16 anchors.topMargin: 16
anchors.bottom: parent.bottom anchors.bottom: parent.bottom

View File

@ -132,20 +132,12 @@ StatusWindow {
storeSettings.fillPage = false storeSettings.fillPage = false
} }
leftPanel: Item { leftPanel: StatusScrollView {
anchors.fill: parent anchors.fill: parent
ScrollView { anchors.topMargin: 48
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
contentHeight: navigation.height + 56
contentWidth: navigation.width
clip: true
Column { Column {
id: navigation id: navigation
anchors.top: parent.top
anchors.topMargin: 48
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0 spacing: 0
StatusListSectionHeadline { text: "StatusQ.Core" } StatusListSectionHeadline { text: "StatusQ.Core" }
@ -294,11 +286,6 @@ StatusWindow {
selected: viewLoader.source.toString().includes(title) selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title); onClicked: mainPageView.page(title);
} }
StatusNavigationListItem {
title: "StatusItemSelector"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusListSectionHeadline { text: "StatusQ.Popup" } StatusListSectionHeadline { text: "StatusQ.Popup" }
StatusNavigationListItem { StatusNavigationListItem {
title: "StatusPopupMenu" title: "StatusPopupMenu"
@ -343,13 +330,12 @@ StatusWindow {
} }
} }
} }
}
rightPanel: Item { rightPanel: Item {
id: rightPanel id: rightPanel
anchors.fill: parent anchors.fill: parent
ScrollView { StatusScrollView {
visible: !storeSettings.fillPage visible: !storeSettings.fillPage
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 64 anchors.topMargin: 64

View File

@ -0,0 +1,24 @@
import QtQuick 2.14
import QtQuick.Controls 2.14 as T
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
T.ScrollBar {
id: root
// TODO: add this sizes to Theme
implicitWidth: 14
implicitHeight: 14
background: null
contentItem: Rectangle {
color: root.hovered || root.active ? Theme.palette.primaryColor3 : Theme.palette.baseColor2
opacity: enabled ? 1.0 : 0.0
radius: Math.min(width, height) / 2
Behavior on opacity { NumberAnimation { duration: 100 } }
}
}

View File

@ -47,3 +47,4 @@ StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
StatusDropdown 0.1 StatusDropdown.qml StatusDropdown 0.1 StatusDropdown.qml
StatusIconTextButton 0.1 StatusIconTextButton.qml StatusIconTextButton 0.1 StatusIconTextButton.qml
StatusScrollBar 0.1 StatusScrollBar.qml

View File

@ -0,0 +1,48 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import StatusQ.Controls 0.1
/*!
\qmltype StatusScrollView
\inherits ScrollView
\inqmlmodule StatusQ.Core
\since StatusQ.Core 0.1
\brief ScrollView wrapper with tuned flickable.
The \c StatusScrollView can be used just like a plain ScrollView but with tuned scrolling parameters.
Example of how to use it:
\qml
StatusScrollView {
id: scrollView
anchors.fill: parent
ColumnView {
width: scrollView.avaiulableWidth
}
}
\endqml
For a list of components available see StatusQ.
*/
ScrollView {
id: root
clip: true // NOTE: in Qt6 clip true will be default
background: null
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
ScrollBar.vertical.policy: ScrollBar.AsNeeded
Flickable {
id: flickable
contentWidth: contentItem.childrenRect.width
contentHeight: contentItem.childrenRect.height
boundsBehavior: Flickable.StopAtBounds
maximumFlickVelocity: 0
synchronousDrag: true
}
}

View File

@ -11,3 +11,5 @@ StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
StatusTooltipSettings 0.1 StatusTooltipSettings.qml StatusTooltipSettings 0.1 StatusTooltipSettings.qml
StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml
StatusAnimatedStack 0.1 StatusAnimatedStack.qml StatusAnimatedStack 0.1 StatusAnimatedStack.qml
StatusScrollView 0.1 StatusScrollView.qml

View File

@ -33,7 +33,7 @@ StatusModal {
width: 680 width: 680
implicitHeight: 820 implicitHeight: 820
contentItem: ScrollView { contentItem: StatusScrollView {
id: scroll id: scroll
width: parent.width width: parent.width
topPadding: 30 topPadding: 30