ScrollView not working. Need help or suggestions - qt

Question

I am having trouble getting the scrollview to work properly. I'm most likely missing something or I'm doing something totally wrong. This isn't my first time dealing with this issue either. The page contains a scrollview which has a stacklayout inside of it. My goal is to scroll through the stacklayout content using the scrollview. I tried setting the contentWidth and the contentHeight of the scrollview but that did not fix the issue.
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12 // ColorOverlay
import "../../components" as NeroshopComponents
Page {
id: sellerHub
background: Rectangle {
color: "transparent"
}
NeroshopComponents.TabBar {
id: tabBar
anchors.top: parent.top
anchors.topMargin: tabBar.buttonHeight
anchors.horizontalCenter: parent.horizontalCenter
model: ["Overview", "Inventory", "Customers"]
Component.onCompleted: {
buttonAt(1).checked = true
}
}
ScrollView {
id: scrollView
width: parent.width; height: 2000//anchors.fill: parent
anchors.top: tabBar.bottom; anchors.topMargin: tabBar.buttonHeight + 10
//anchors.margins: 20
//contentHeight: height; contentWidth: width
ScrollBar.vertical.policy: ScrollBar.AlwaysOn////AsNeeded
clip: true
StackLayout {
id: dashboard
anchors.fill: parent
currentIndex: tabBar.checkedButtonIndex
Item {
id: overviewTab
// StackLayout child Items' Layout.fillWidth and Layout.fillHeight properties default to true
RowLayout {
id: stats
anchors.horizontalCenter: parent.horizontalCenter//Layout.alignment: Qt.AlignHCenter | Qt.AlignTop// <- this is not working :/
property real numberTextFontSize: 24
property string textColor: "#384364"////(NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#384364"
property real boxWidth: 250//(scrollView.width / 3) - 20//scrollView.width / statsRepeater.count
property real boxHeight: 110
property real boxRadius: 6
spacing: 15
property bool useDefaultBoxColor: true//false
property string boxColor: "#ffffff"////(NeroshopComponents.Style.darkTheme) ? "#384364" : "#ffffff"
// Products (listed)
Rectangle {
Layout.preferredWidth: stats.boxWidth
Layout.preferredHeight: stats.boxHeight
color: stats.useDefaultBoxColor ? stats.boxColor : "#e9eefc"
radius: stats.boxRadius
Item {
anchors.fill: parent
anchors.centerIn: parent
Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left; anchors.leftMargin: width / 2
width: 64; height: 64
color: "#e9eefc"
radius: 50
Image {
id: productIcon
source: "qrc:/images/open_parcel.png"
width: 32; height: 32
anchors.centerIn: parent
}
ColorOverlay {
anchors.fill: productIcon
source: productIcon
color: "#4169e1"
visible: productIcon.visible
}
}
Item {
anchors.right: parent.children[0].right; anchors.rightMargin: -(contentWidth + 20)
anchors.top: parent.children[0].top
Text {
text: "0"//"5430"
font.bold: true
font.pointSize: stats.numberTextFontSize
color: stats.textColor
}
Text {
text: "Products"
//font.bold: true
color: stats.textColor
anchors.left: parent.children[0].left
anchors.top: parent.children[0].bottom; anchors.topMargin: 10
}
}
}
}
// Sales (the total number of completed orders)
Rectangle {
Layout.preferredWidth: stats.boxWidth
Layout.preferredHeight: stats.boxHeight
color: stats.useDefaultBoxColor ? stats.boxColor : "#eff5ef"
radius: stats.boxRadius
Item {
anchors.fill: parent
anchors.centerIn: parent
Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left; anchors.leftMargin: width / 2
width: 64; height: 64
color: "#eff5ef"
radius: 50
Image {
id: salesIcon
source: "qrc:/images/increase.png"
width: 32; height: 32
anchors.centerIn: parent
}
ColorOverlay {
anchors.fill: salesIcon
source: salesIcon
color: "#8fbc8f"
visible: salesIcon.visible
}
}
Item {
anchors.right: parent.children[0].right; anchors.rightMargin: -(contentWidth + 20)
anchors.top: parent.children[0].top
Text {
text: "0"//"17440"
font.bold: true
font.pointSize: stats.numberTextFontSize
color: stats.textColor
}
Text {
text: "Sales"
//font.bold: true
color: stats.textColor
anchors.left: parent.children[0].left
anchors.top: parent.children[0].bottom; anchors.topMargin: 10
}
}
}
}
// Ratings/Feedback/Reputation
Rectangle {
Layout.preferredWidth: stats.boxWidth
Layout.preferredHeight: stats.boxHeight
color: stats.useDefaultBoxColor ? stats.boxColor : "#fffbe5"
radius: stats.boxRadius
Item {
anchors.fill: parent
anchors.centerIn: parent
Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left; anchors.leftMargin: width / 2
width: 64; height: 64
color: "#fffbe5"
radius: 50
Image {
id: ratingIcon
source: "qrc:/images/rating.png"
width: 32; height: 32
anchors.centerIn: parent
}
ColorOverlay {
anchors.fill: ratingIcon
source: ratingIcon
color: "#ffd700"//"#e6c200"
visible: ratingIcon.visible
}
}
Item {
anchors.right: parent.children[0].right; anchors.rightMargin: -(contentWidth + 20)
anchors.top: parent.children[0].top
Text {
text: qsTr("%1%2").arg("0").arg("%")
font.bold: true
font.pointSize: stats.numberTextFontSize
color: stats.textColor
}
Text {
text: "Reputation"
//font.bold: true
color: stats.textColor
anchors.left: parent.children[0].left
anchors.top: parent.children[0].bottom; anchors.topMargin: 10
}
}
}
}
}
// TODO: show recent orders from customers, show seller's top-selling products, show customer reviews on seller products
//ColumnLayout {}
} // overview tab
Item {
id: inventoryTab
// StackLayout child Items' Layout.fillWidth and Layout.fillHeight properties default to true
Component.onCompleted: { console.log("InventoryTab width",this.width) }
ColumnLayout {//GridLayout {//
id: productDetails
width: parent.width; height: childrenRect.height////anchors.fill: parent
Component.onCompleted: { console.log("ProductDetails width",this.width) }
spacing: 30////rowSpacing: 5
property string titleTextColor: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
property real radius: 3
property real marginFromTitle: 7
property string textColor: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
property string baseColor: (NeroshopComponents.Style.darkTheme) ? "#101010" : "#ffffff"
property string borderColor: (NeroshopComponents.Style.darkTheme) ? "#a9a9a9" : "#000000"
// RegisterItem to "products" table
//Product title (TODO: place both text and textfield in an item)
// If item fields are related then place them side-by-side in separate columns
Item {
//Layout.row: 0
Layout.alignment: Qt.AlignHCenter// | Qt.AlignTop
//Layout.topMargin: 0
Layout.preferredWidth: childrenRect.width////productNameField.width
Layout.preferredHeight: childrenRect.height // 72 (child margins included)
Text {
text: "Product name" // height=17
color: productDetails.titleTextColor
font.bold: true
}
TextField {
id: productNameField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Product title")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
}
// Product price (sales price)
Item {
//Layout.row: 1
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: "Price"
color: productDetails.titleTextColor
font.bold: true
}
TextField {
id: productPriceField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Enter price")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
}
// Product quantity
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: "Quantity"
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
TextField {
id: productQuantityField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Enter quantity")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
}
// Product condition
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: "Condition"
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
ComboBox {
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
width: 500
model: ["new", "used", "renewed (refurbished)"]
}
}
// Product code UPC, EAN, JAN, SKU, ISBN (for books) // https://www.simplybarcodes.com/barcode_types.html
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: "Product code"
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
TextField {
id: productCodeField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Enter product code (optional)")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
}
// Product categories
// Subcategories (will be determined based on selected categories)
// Weight
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: ""
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
TextField {
id: productWeightField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Enter weight (e.g. 12 lbs.)")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
//ComboBox {
// id: weightMeasurementUnit (default is kg)
//}
}
// Size
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: ""
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
TextField {
id: productSizeField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Enter size")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
//ComboBox
}
// Variations (i.e. Color, Size options to choose from - optional)
// Product location (ship to and ship from)
//Product description and bullet points
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: "Description"
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
TextArea {
id: productDescArea
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
width: 500; height: 250
}
}
//Product images
//Search terms and relevant keywords (tags)
// tags must be separated with a colon
Item {
//Layout.row:
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: childrenRect.height
Text {
text: ""
color: productDetails.titleTextColor
font.bold: true
//visible: false
}
TextField {
id: productKeywordsField
width: 500; height: 50
anchors.top: parent.children[0].bottom
anchors.topMargin: productDetails.marginFromTitle
placeholderText: qsTr("Enter keywords or search term")
color: productDetails.textColor
selectByMouse: true
background: Rectangle {
color: productDetails.baseColor
border.color: productDetails.borderColor
radius: productDetails.radius
}
}
}
// ListItem to "listings" table
//Button {
// id: listProductButton
//}
}
//ColumnLayout {
// id: inventoryManager // inventory can be managed here and sorted too
//}
}
Item {
id: customerOrdersTab
}
}
}
}

Answer 1

I suspect the reason why the ScrollView is not working for you is because your child StackLayout has anchors.fill: parent. This means the size of your child is already constrained, so it will never have a meaningful ScrollBar. Please review your anchoring / sizing.
Here's an example usage of ScrollView. Note that the ScrollView contains exactly one child. Note that I have not set the height of the child and allowed it to grow. Note that I modified the default policy making the ScrollBar always visible. Also note that I resize the ScrollBar to 20 pixels and that I shrunk the content within by 20 pixels:
import QtQuick
import QtQuick.Controls
Page {
ScrollView {
id: scrollView
anchors.fill: parent
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.vertical.width: 20
TextEdit {
id: textEdit
width: scrollView.width - 20
text: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel sagittis tellus. Aliquam rhoncus laoreet mi at varius. Phasellus et nisl quam. Duis luctus porta quam, a vehicula erat aliquet sed. Quisque viverra erat risus, vitae congue libero vestibulum vel. Mauris vel interdum purus. Aliquam mauris justo, pellentesque vel sagittis ac, placerat nec enim. Nulla gravida non libero non mollis. Donec sodales ornare tincidunt. Vivamus mattis augue quis justo convallis, molestie tempus velit sollicitudin. Suspendisse potenti. Fusce ut nibh et odio mattis semper at sit amet elit. Nullam pharetra augue nisi, at vestibulum magna dignissim sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc mattis congue magna at laoreet. Vestibulum tincidunt ante ligula, sit amet lacinia orci suscipit ac.
`.repeat(5)
wrapMode: Text.WordWrap
}
}
}
You can Try it Online!
Here's an example usage of Flickable. Note that the Flickable must set:
contentWidth and contentHeight correctly else you will not get a flickable action
note the optional setting of a ScrollBar of 20 pixels and that I shrink the content by the same amount
also note the optional setting of clip: true
again I've only constrained the width of the child but not the height, allowing it to grow
import QtQuick
import QtQuick.Controls
Page {
Flickable {
id: flickable
anchors.fill: parent
contentWidth: textEdit.width
contentHeight: textEdit.height
clip: true
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
TextEdit {
id: textEdit
width: flickable.width - 20
text: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel sagittis tellus. Aliquam rhoncus laoreet mi at varius. Phasellus et nisl quam. Duis luctus porta quam, a vehicula erat aliquet sed. Quisque viverra erat risus, vitae congue libero vestibulum vel. Mauris vel interdum purus. Aliquam mauris justo, pellentesque vel sagittis ac, placerat nec enim. Nulla gravida non libero non mollis. Donec sodales ornare tincidunt. Vivamus mattis augue quis justo convallis, molestie tempus velit sollicitudin. Suspendisse potenti. Fusce ut nibh et odio mattis semper at sit amet elit. Nullam pharetra augue nisi, at vestibulum magna dignissim sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc mattis congue magna at laoreet. Vestibulum tincidunt ante ligula, sit amet lacinia orci suscipit ac.
`.repeat(5)
wrapMode: Text.WordWrap
}
}
}
You can Try it Online!

Answer 2

You figured it out yourself already. I just add here what I've come up with. Because I didn't fully understand what you were trying to do I made different version of ScrollViews. As Stephen already said you anchor filled the StackLayout in the ScrollView which essentially makes it non scroll able as the StackLayout gets the same size as the ScrollView.
I came up with 4 solutions.
Scroll through a StackLayout via a ScrollBar.
Use a ScrollView with content.
Use a ScrollView around a StackLayout. In order to keep the height of the StackLayout correct it needs to be bound to the current item shown in the StackView. Otherwise it is as big as the biggest item in the layout.
The proper way which you came up with already to have ScrollView
per item in the StackLayout.
These are all the solutions in one application.
import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts
Window {
width: 800
height: 600
visible: true
title: qsTr("Hello StackLayout")
component Content : Rectangle {
color: "gray"
border { width: 1; color: "black" }
Text { text: index; font.pixelSize: 80; anchors.centerIn: parent}
}
// --- Solution 1 ---
Item {
id: frame
width: 400; height: 300
StackLayout {
id: stackLayout
anchors.fill: parent
Repeater {
id: repeater1
model: 5
delegate: Content {}
}
}
ScrollBar {
id: hbar
policy: ScrollBar.AlwaysOn
orientation: Qt.Vertical
size: 1.0 / repeater1.count
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
onPositionChanged: {
let i = Math.floor((hbar.position / hbar.size) + 0.5)
if (i !== stackLayout.currentIndex)
stackLayout.currentIndex = i
}
}
}
// --- Solution 2 ---
ScrollView {
id: scrollView
anchors.left: frame.right
width: 400; height: 300
ColumnLayout {
spacing: 0
Repeater {
model: 5
delegate: Content { width: 400; height: 300 }
}
}
}
// --- Solution 3 ---
Item {
id: frame3
anchors.top: frame.bottom
width: 400; height: 300
TabBar {
id: bar
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Repeater {
model: 5
TabButton { text: index }
}
}
ScrollView {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: bar.bottom
anchors.bottom: parent.bottom
StackLayout {
currentIndex: bar.currentIndex
implicitHeight: repeater3.itemAt(bar.currentIndex).implicitHeight
Repeater {
id: repeater3
model: 5
delegate: Content { width: 400; implicitHeight: 200 * (index + 1) }
}
}
}
}
// --- Solution 4 ---
Item {
anchors.top: scrollView.bottom
anchors.left: frame3.right
width: 400; height: 300
TabBar {
id: bar2
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Repeater {
model: 5
TabButton { text: index }
}
}
StackLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: bar2.bottom
anchors.bottom: parent.bottom
currentIndex: bar2.currentIndex
Repeater {
model: 5
delegate: ScrollView {
Content { width: 400; implicitHeight: 200 * (index + 1) }
}
}
}
}
}