Setting the visible property to false does not hide elements

[Saviz]

I need to create a page element that represents a page or tab in my application. This page should be able to hold multiple elements (e.g., Buttons, ComboBoxes, Text elements). To achieve this, I designed the page element to include a ScrollView, allowing vertical stacking and scrolling of its contents.

Here is the code:

Item {
    id: root

    default property alias content: columnLayout.data
    property alias pageTitle: titleText.text

    implicitWidth: 300
    implicitHeight: 300

    Rectangle {
        anchors.fill: parent
        color: "white"

        // ScrollView to enable vertical scrolling for the page.
        ScrollView {
            anchors.fill: parent

            contentWidth: -1 // Disable horizontal scrolling
            contentHeight: columnLayout.height

            ColumnLayout {
                id: columnLayout

                anchors.fill: parent
                clip: true

                // Title text for the page.
                Text {
                    id: titleText
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    color: "black"
                }
            }
        }
    }
}

This implementation works well, and I can add as many elements as I want. However, there's an issue when I attempt to set the visible property of the page to false. It should make the entire page and all its elements invisible, but that isn't happening.

Here is how I use it:

CustomPage {
    anchors.fill: parent

    visible: false // This should make sure the entire page is not visible anymore...
    
    // Many elements are placed here...
    
    Button {
        Layout.preferredWidth: 120
        Layout.preferredHeight: 35

        text: qsTr("Cilck me")
    }
    
    // Many elements are placed here...
}

I am not sure why this is not working.

Qt version: 6.7.3
Operating System: Windows 10 64-bit

[Saviz]

@Markkyboy Unfortunately, this method didn’t work for me, and I’m genuinely unsure why. However, I found an alternative solution to address the issue.

I created an alias property that controls the visibility of my ScrollView. By doing so, the entire page becomes hidden when necessary.

Here is the code:

Item {
    id: root

    default property alias content: columnLayout.data
    property alias pageTitle: titleText.text
    property alias contentVisible: scrollView.visible // Set this to 'false' when using component.

    implicitWidth: 300
    implicitHeight: 300

    Rectangle {
        anchors.fill: parent
        color: "white"

        // ScrollView to enable vertical scrolling for the page.
        ScrollView {
            id: scrollView
            anchors.fill: parent

            contentWidth: -1 // Disable horizontal scrolling
            contentHeight: columnLayout.height

            ColumnLayout {
                id: columnLayout

                anchors.fill: parent
                clip: true

                // Title text for the page.
                Text {
                    id: titleText
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    color: "black"
                }
            }
        }
    }
}

This works for now. But, I still don't understand why the normal one does not work. Does this have to do with something in version 6.7.3?

[Markkyboy]

Works fine for me. I put CustomPage.qml into a separate folder (components).

I don't have access to ScrollView and so changed it out for Flickable, as I know flickable properties for contentWidth and contentHeight are available.

I removed "clip: true" from "columnLayout" in CustomPage as the button was not visible to me.

I'm still using Qt5.15.2 on SailfishOS SDK under Windows 10 64bit, so take what I'm reporting with a pinch of salt.

Regardless, I can now set the visible property to true or false without a problem.

[Saviz]

@Markkyboy Unfortunately, this method didn’t work for me, and I’m genuinely unsure why. However, I found an alternative solution to address the issue.

I created an alias property that controls the visibility of my ScrollView. By doing so, the entire page becomes hidden when necessary.

Here is the code:

Item {
    id: root

    default property alias content: columnLayout.data
    property alias pageTitle: titleText.text
    property alias contentVisible: scrollView.visible // Set this to 'false' when using component.

    implicitWidth: 300
    implicitHeight: 300

    Rectangle {
        anchors.fill: parent
        color: "white"

        // ScrollView to enable vertical scrolling for the page.
        ScrollView {
            id: scrollView
            anchors.fill: parent

            contentWidth: -1 // Disable horizontal scrolling
            contentHeight: columnLayout.height

            ColumnLayout {
                id: columnLayout

                anchors.fill: parent
                clip: true

                // Title text for the page.
                Text {
                    id: titleText
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    color: "black"
                }
            }
        }
    }
}

This works for now. But, I still don't understand why the normal one does not work. Does this have to do with something in version 6.7.3?

[Markkyboy]

It may well be something to do with the latest offering of QT, many changes have been made since 5.15.

I looks like you have solved your problem, what was it?