Solved 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 } }
-
@Subuday said in How to use Scroll View properly?:
Item {
id: settingPageScrollView { 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 } } }
-
@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" } }
-
-
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 } } }
-
@Subuday said in How to use Scroll View properly?:
ScrollView {
anchors.fill: settingPage
clip: trueLabel { 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 } } }
-
@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!