Why are my Rectangle, Text, and Button elements not visible inside of a ScrollView but the Switch element is? (Partially resolved)

[A Former User]

Hello so I'm a little bit confused as my switch element is showing up on the screen but my rectangle, text, and button elements are not when they're put inside of a ScrollView. This is my first time using a ScrollView and ColumnLayout in QML (I'm quite new to QML)

What my objective is:
To be able to scroll down vertically down and up only with this bringing elements inside of the ColumnLayout out of view (due to being outside of the available phone vertical screen space) into view

What I see when the elements are in the ScrollView:
https://ibb.co/RNCwdgp

All of the elements are visible when outside of the ScrollView (just in the ColumnLayout)
https://ibb.co/2hvWkdQ

I have a rectangle, bunch of buttons, bunch of text elements, and one of these switch elements yet for some reason I can't understand, only the switch element is visible

Code snapshot (tried to include relevant parts only):

Item{
// Basically size of the page minus the top title bar and bottom navigation bar. It's colored orange in the attached photos for illustration purposes

ScrollView{
            anchors{
                top: parent.top
            }
            width: parent.width
            height: parent.height
            contentWidth: parent.width
            contentHeight: column_layout.height
            clip: true
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

        ColumnLayout {
            id: column_layout
            anchors.fill: parent
            spacing: 2

            // Example rectangle
            Rectangle {
                Layout.fillWidth: true
                height: 50
                color: "blue"
            }

            // Example text
            Text {
                text: qsTr("Dummy text")
                Layout.fillWidth: true
            }

            // Example button
            Button {
                Layout.fillWidth: true
                height: 34
                text: qsTr("Dummy button")
                padding: 0

                background: Rectangle {
                    color: "purple"
                    border.width: 1
                    border.color: "white"
                }

                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }

            // Example switch
            Switch {
                Layout.fillWidth: true
            }
}
}
}

[Anumas]

Hi @Publically-visible-name,

I can see you have several issues:
1- As you're using a ColumnLayout, & it's the only child of ScrollView, you don't need to specify contentHeight: column_layout.height.
2- You said you only want to scroll vertically? Then set this binding: contentWidth: availableWidth to your ScrollView.
3- When you use a Layout, you cannot specify width nor height in the items managed by it. Instead you can set implicit size or Layout.preferredHeight/Width. Read this: https://doc.qt.io/qt-6/qtquicklayouts-overview.html
Plus tip: I recommend you to assign an id to your Button so that you can do inside contentItem binding: text: btn.text

Here's the code with my suggestions:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: root
    width: 640
    height: 100
    visible: true
    title: qsTr("Hello World")

    Item{
        width: root.width * .9
        height: root.height * .88
        anchors.centerIn: parent

        ScrollView{
            anchors{
                top: parent.top
            }
            anchors.fill: parent
            contentWidth: availableWidth // Make it vertical scrollable only
            // contentHeight: column_layout.height -- Don't need to specify this. ScrollView will take ColumnLayout's implicitHeight
            clip: true
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

            ColumnLayout {
                id: column_layout
                anchors.fill: parent
                spacing: 20

                // Example rectangle
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50
                    color: "blue"
                }

                // Example text
                Text {
                    text: qsTr("Dummy text")
                    Layout.fillWidth: true
                }

                // Example button
                Button {
                    id: btn
                    Layout.fillWidth: true
                    Layout.preferredHeight: 34
                    text: qsTr("Dummy button")
                    padding: 0

                    background: Rectangle {
                        color: "purple"
                        border.width: 1
                        border.color: "white"
                    }

                    contentItem: Text {
                        text: btn.text
                        color: "white"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }

                // Example switch
                Switch {
                    Layout.fillWidth: true
                }
            }
        }
    }
}

[A Former User]

For some inexplicable reason, the elements weren't showing up for me when I tested it on the Android Emulator for the Galaxy Nexus (x86_64 Android 13.0 SDK 33) but did show up when I tested it on an Android device. This is after taking the code recommendations on board. I'll test out a blank project with the suggested code and see if that changes things.

Edit: Yeah testing your code on a blank project with Android Emulator works

What seems to be the difference between it working / not working on the AVD is if I don't / do call the QML file containing the Item { } and it's contents via StackView

Might be related to these messages in the application output that the emulator isn't working right. Think I might stick with debugging on Android device as the emulator is turning out to be more trouble than it's worth

W Parcel  : Expecting binder but got null!

E emuglGLESv2_enc: device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502

I decided to make a post about this issue here as it seems to be related to virtual devices
https://forum.qt.io/topic/157779/how-come-elements-don-t-appear-in-android-emulator-but-do-appear-on-mobile-device

Thanks for explaining how to use the ColumnLayout / ScrollView better, that was helpful! =)