How to use Scroll View properly?



  • 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
        }
    }
    

  • Moderators

    @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?



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



  • 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
                }
            }
        }

  • Moderators

    @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?



  • @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"
            }
    
    }
    
    

  • Moderators

    @Subuday

    1. 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.



  • @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"
            }
        }
    }
    
    
    


  • 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
            }
        }
    }
    
    

  • Moderators

    @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.



  • @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
            }
        }
    }
    

  • Moderators

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



  • @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



  • @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
        }
    
    


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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.