How to use Scroll View properly?

Subuday

Hi, I wanna area of my program to scroll. I can't do it, just nothing happened. Text fills the setting page area, scrolling doesn't work.

    SettingPage {
        id: settingPage
        height: parent.height - menuBar.height - frame.height
        width: parent.width - toolBar.width
        anchors {
            top: menuBar.bottom
            left: toolBar.right
        }
    }

Setting Page

Item  {
    id: settingPage

    ScrollView {
        anchors.fill: settingPage
        contentItem: settingPage
        clip: true
    }

    Label {
        text: "ABC"
        font.pixelSize: 1000
    }
}

raven-worx

@Subuday said in How to use Scroll View properly?:

Item {
id: settingPage

ScrollView {
    anchors.fill: settingPage
    contentItem: settingPage
    clip: true
}

the scroll view should scroll it's own parent item?

Subuday

@raven-worx Yes, I want Setting Page to be scrolled.

Shrinidhi Upadhyaya

Hi @Subuday , please have a look at the sample code:-

 Item  {
        id: settingPage

        height: 500
        width: 500
        anchors.centerIn: parent

        ScrollView {
            anchors.fill: settingPage
            //####Remove this
           //                contentItem: settingPage
            clip: true

            Label {
                text: "ABC"
                font.pixelSize: 1000
            }
        }
    }

raven-worx

@Subuday said in How to use Scroll View properly?:

Yes, I want Setting Page to be scrolled.

then the ScrollView can't be a child of the item supposed to be scrolled for obvious reasons.
I guess you rather want to make the ScrollView your component's root item instead?

Subuday

@raven-worx I try this code, but it also doesn't work.

    ScrollView {

        height: parent.height - menuBar.height - frame.height
        width: parent.width - toolBar.width
        anchors {
            top: menuBar.bottom
            left: toolBar.right
        }

        SettingPage {
            id: settingPage
            height: parent.height
            width: parent.width
            anchors.fill: parent
            visible: false
        }
    }

Setting Page

Item {
    id: settingPage

        Label {
            id: label
            text: "ABC"
            font.pixelSize: 1000
        }

        Rectangle {
            height: 100
            width: 100
            anchors.top: label.bottom
            color: "red"
        }

}

raven-worx

@Subuday

ellaborate on "but it also doesn't work."

height: parent.height
width: parent.width
anchors.fill: parent
visible: false

you are hiding your item. Also you anchor the scroll item to it's parent (same for width/height), which pretty much eliminates the need for scrolling at all.
Basically a ScrollView makes only sense when the content is bigger than the ScrollView itself.

Subuday

@Shrinidhi-Upadhyaya Hi @Shrinidhi Upadhyaya, it works fine, but when I add rectangle in Setting Page, it doesn't.

Item {
    id: settingPage

    ScrollView {
        anchors.fill: settingPage
        clip: true

        Label {
            id: label
            text: "ABC"
            font.pixelSize: 1000
        }

        Rectangle {
            height: 100
            width: 100
            anchors.top: label.bottom
            color: "red"
        }
    }
}

ODБOï

hi @Subuday
@raven-worx suggested to

//SettingPage.qml
import QtQuick 2.6
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ColumnLayout {
    RowLayout{
        Label {
            text: "ABC"
            font.pixelSize: 254
            color:"blue"
        }
        Rectangle {
            height: 100
            width: 100
            color: "blue"
        }
    }

    RowLayout{
        Label {
            text: "DEF"
            font.pixelSize: 254
            color:"green"
        }
        Rectangle {
            height: 100
            width: 100
            color: "green"
        }
    }
}

//main.qml
Window {
    visible: true
    width: 640
    height: 480

    ScrollView {
        width: parent.width/2
        height: parent.height
        anchors.right: parent.right
        clip: true
       SettingPage{
            width: 400
            height: 400
        }
    }
}

raven-worx

@Subuday said in How to use Scroll View properly?:

ScrollView {
anchors.fill: settingPage
clip: true

    Label {
        id: label
        text: "ABC"
        font.pixelSize: 1000
    }

    Rectangle {
        height: 100
        width: 100
        anchors.top: label.bottom
        color: "red"
    }
}

sorry, but instead of arbitrarily trying random variations you should first take a look at the docs and the examples.
There can only be exactly ONE content item.

Subuday

@raven-worx I make visible true,

Please, check the full code

ApplicationWindow {
    id: mainWindow

    width: 1000
    height: 700
    visible: true

    Material.theme: Material.Light

    flags: Qt.FramelessWindowHint

    property var userID

    property int previousX
    property int previousY

    Connections {
        target: storage
    }

    Item {
        focus: true
        Keys.onPressed: {
            if (event.key === Qt.Key_Escape) { mainWindow.close(); event.accepted = true}
        }
    }


    MouseArea {
        anchors.fill: parent

        onPressed: {
            previousX = mouseX
            previousY = mouseY
        }

        onMouseXChanged: {
            var dx = mouseX - previousX
            mainWindow.setX(mainWindow.x + dx)
        }

        onMouseYChanged: {
            var dy = mouseY - previousY
            mainWindow.setY(mainWindow.y + dy)
        }
    }


    Rectangle {
        id: frame

        height: 24
        width: mainWindow.width

        RowLayout {
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.rightMargin: 8

            Image {
                source: "qrc:/icons/Icons/minimize.png"

                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        mainWindow.showMinimized()
                    }
                }
            }

            Image {
                source: "qrc:/icons/Icons/full.png"

                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        if(mainWindow.visibility == 5) mainWindow.showMaximized()
                        else mainWindow.showFullScreen()
                    }
                }
            }

            Image {
                source: "qrc:/icons/Icons/close.png"
                MouseArea {
                    anchors.fill: parent

                    onClicked: mainWindow.close()
                }
            }

        }
    }

    Rectangle {
        id: menuBar
        anchors.top: frame.bottom
        width: parent.width
        height: 52
        color: "#ffffff"
    }

    ListView {
        id: toolBar
        width: 200
        height: parent.height
        anchors.top: menuBar.bottom
        delegate: ItemDelegate {
            width: parent.width
            text: model.title
            highlighted: ListView.isCurrentItem

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor

                onClicked: {
                    switch(model.title) {
                    case "Find Mentors": {
                        findMentorsPage.visible = true;
                        settingPage.visible = false;
                        break;
                    }
                    case "Settings": {
                        settingPage.visible = true;
                        findMentorsPage.visible = false;
                        break;
                    }
                    }
                }
            }
        }

        model: ListModel {
            ListElement { title: "Find Mentors";  source: "qrc:/qml/FindMentorsPage.qml";}
            ListElement { title: "My Mentors"; source: "qrc:/pages/CheckBoxPage.qml" }
            ListElement { title: "My Projects"; source: "qrc:/qml/MentorPage.qml" }
            ListElement { title: "Settings"; source: "qrc:/qml/SettingPage.qml" }
        }
    }

    FindMentorsPage {
        id: findMentorsPage
        height: parent.height - menuBar.height - frame.height
        width: parent.width
        anchors {
            top: menuBar.bottom
            left: toolBar.right
        }
        visible: true
    }


    ScrollView {

        height: parent.height - menuBar.height - frame.height
        width: parent.width - toolBar.width
        anchors {
            top: menuBar.bottom
            left: toolBar.right
        }

        SettingPage {
            id: settingPage
            height: parent.height
            width: parent.width
            anchors.fill: parent
            visible: false
        }
    }
}

raven-worx

@Subuday
you didnt change a single line of the ones i suggested...

ODБOï

@Subuday .., as said earlier , if your page is same size that your scrollView, nothing will scroll. you have to make the SettingPage bigger than the View + your page still has visible: false

Subuday

@LeLev Can I make Scroll View in Setting Page.
I try this, but it doesn't work.

Item {
    id: settingPage

    ScrollView {
        height: 100
        width: 100
        clip: true

        Rectangle {
            id: test
            height: 100
            width: 100

            Column {
                Text {
                    text: "ewfewf"
                    font.pointSize: 24
                }

                Text {
                 text: "ewkmfwef"
                 font.pointSize: 24
                }
            }

        }
    }
}

    SettingPage {
        id: settingPage
        height: parent.height - menuBar.height - frame.height
        width: parent.width
        anchors {
            top: menuBar.bottom
            left: toolBar.right
        }
        visible: true
    }

Subuday

The suggestion of @LeLev works fine.
Thank you for help!