How to show a ScrollBar only if necessary in qml? - qt

Question

Lets suppose i have an application that has items that can get bigger than it's window height.
How can i make it so it will show a vertical scrollbar only if needed?
I will show now what is happening on a test application i've done.
When all the items are closed:
When the items are opened:
Here the scrollbar should appear.
I will post now the code i've used for this example:
main.qml
import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3
ApplicationWindow {
visible: true
width: 640
height: 200
title: qsTr("Tabbars")
Rectangle{
anchors.fill:parent
Column {
anchors.fill: parent
PanelItem {
id:panel1
title: "Panel 1"
width:parent.width
content: Item {
property string title: "teste"
height: configContent.implicitHeight
width: configContent.implicitWidth
ColumnLayout{
id:configContent
anchors.topMargin: 10
anchors.bottomMargin: 10
anchors.fill:parent
TextField {
id: companyNameText1
placeholderText: qsTr("Company name")
Layout.fillWidth: true
selectByMouse: true
}
ComboBox {
id: languagesComboBox1
textRole: "text"
objectName: "language"
Layout.fillWidth: true
model: ListModel {
ListElement {text: QT_TR_NOOP("English"); oid: 0}
ListElement {text: QT_TR_NOOP("Portuguese"); oid: 1}
ListElement {text: QT_TR_NOOP("Spanish"); oid: 2}
ListElement {text: QT_TR_NOOP("Italian"); oid: 3}
ListElement {text: QT_TR_NOOP("French"); oid: 4}
ListElement {text: QT_TR_NOOP("Portuguese(Brasil)"); oid: 5}
}
}
ComboBox {
id: devSndrModeComboBox1
textRole: "text"
objectName: "test_dev_sndr_mode"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("None"), oid: 0 })
append({ text: QT_TR_NOOP("Subpanel"), oid: 1 })
append({ text: QT_TR_NOOP("All"), oid: 2 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 1 height "+panel1.height)
}
}
PanelItem {
id:panel2
title: "Panel 2"
width:parent.width
content: Item {
property string title: "teste"
height: configContent2.implicitHeight
width: configContent2.implicitWidth
ColumnLayout{
id:configContent2
anchors.fill:parent
ComboBox {
id: sndrModeComboBox1
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel3
title: "Panel 3"
width:parent.width
content: Item {
property string title: "teste"
height: configContent3.implicitHeight
width: configContent3.implicitWidth
ColumnLayout{
id:configContent3
anchors.fill:parent
ComboBox {
id: sndrModeComboBox2
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel4
title: "Panel 4"
width:parent.width
content: Item {
property string title: "teste"
height: configContent4.implicitHeight
width: configContent4.implicitWidth
ColumnLayout{
id:configContent4
anchors.fill:parent
ComboBox {
id: sndrModeComboBox3
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel5
title: "Panel 4"
width:parent.width
content: Item {
property string title: "teste"
height: configContent5.implicitHeight
width: configContent5.implicitWidth
ColumnLayout{
id:configContent5
anchors.fill:parent
ComboBox {
id: sndrModeComboBox4
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel6
title: "Panel 5"
width:parent.width
content: Item {
property string title: "teste"
height: configContent6.implicitHeight
width: configContent6.implicitWidth
ColumnLayout{
id:configContent6
anchors.fill:parent
ComboBox {
id: sndrModeComboBox5
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
}
}
}
PanelItem.qml
import QtQuick 2.7
import QtQuick.Layouts 1.2
Item {
id: root
property Component content
property string title: "panel"
property bool isSelected: false
height: container.height + bar.height
Rectangle{
id: bar
anchors {
top: parent.top
left: parent.left
right: parent.right
}
height: 30
color: root.isSelected ? "#81BEF7" : "#CEECF5"
Text {
anchors.fill: parent
anchors.margins: 10
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: root.title
}
Text {
anchors{
right: parent.right
top: parent.top
bottom: parent.bottom
margins: 10
}
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: "^"
rotation: root.isSelected ? "180" : 0
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: isSelected = !isSelected
}
}
Rectangle{
id: container
anchors.top: bar.bottom
anchors.left: parent.left
anchors.right: parent.right
height: loader.item && isSelected ? loader.item.height : 0
Loader {
id: loader
visible: isSelected
sourceComponent: content
anchors.top: container.top
}
Behavior on height {
PropertyAnimation { duration: 100 }
}
}
}
How can a scrollbarimplemented so it is called only when needed?

Answer 1

I hope this might help.
ScrollView {
id: scrollView // This is just an ID of scroll view
width: 300 // This is the width of the scroll view window
height: 300 // This is the height of the scroll view window
// contentHeight or contentWidth holds the value of the whole
// content height which needs a scroll bar if it is larger
// than the height or width of the ScrollView
// childrenRect.width returns the highest width among the children.
// childrenRect.height returns the highest height among the children.
contentWidth: childrenRect.width
contentHeight: childrenRect.height
// This is false by default.
// This hides the excess content behind the boundaries of ScrollView; the height and the width
clip: true
// enter your contents here
}
Import QtQuick.Controls 2.14 or higher versions to support contentWidth and contentHeight

Answer 2

I've found what i believe is a really good solution.
The scrollbar this way will only appear if needed:
Item{
id:item
anchors.fill:parent
ScrollView{
anchors.fill:parent
Column {
width:item.width
}
}
}