How to put Horizontal Scroll Bar in Vertical ListView?
-
Hey I have these codes, and I want to put a horizontal scroll bar in my list to view the image that is out from the page.
Vertical Scroll Bar could work well but I couldn't use the same method to put horizontal scroll bar. I googled and found some ways like using GridView and Scrollable but I didn't manage do figure it out.@
Page {
id: root
orientationLock: PageOrientation.LockPortrait
//---------------------------------xml----------------------------------------------
signal feedItemSelected(string title)XmlListModel { id: services1 property string feedUrl: "" property bool loading: status == XmlListModel.Loading source: "http://ios.eosworld.com.my/android/fws/cps.php" query: "/plist/array/dict" XmlRole { name: "details"; query: "string[1]/string()" } XmlRole { name: "link"; query: "string[2]/string()" }
}
ListView {
id: list1
anchors {
left: root.left
right: root.right
top: headBar.bottom
bottom: parent.bottom
}
clip: true
model: services1
delegate: listDelegate1
}//vertical scroll bar
ScrollBar {
flickableItem: list1
anchors{right:parent.right; top:list1.top}
}Component { id: listDelegate1 ProServices1Item { text1: details width:parent.width onClicked: selectionDialog.open()
}
} @I want to view item in this list horizontally as well. I'm aware that i can view them by set it to both horizontal and vertical but most importantly, I need to have a horizontal scroll bar to make the viewing smoothly. How do I do it?
-
How about putting the ListView in a ScrollArea?
-
With Flickable, both horizontal and vertical scrollbar can successfully be viewed.
Example:
@import QtQuick 1.1
import com.nokia.symbian 1.1
import "../js/Util.js" as Util
import "../delegates"Page { id: tab1 orientationLock: PageOrientation.LockPortrait Flickable { id: flicker1 width: parent.width height:parent.height anchors{left:parent.left; leftMargin:5; right:parent.right; rightMargin:5} flickableDirection:Flickable.HorizontalAndVerticalFlick contentWidth: web.width * web.scale; contentHeight: web.height * web.scale; clip: true WebView { id:web html:itemNews transformOrigin: WebView.TopLeft preferredWidth: window.width - 10 preferredHeight:window.height scale: window.height > 640 ? 1 : 0.8 } } ScrollBar { id:vertical flickableItem: flicker1 anchors.right:parent.right anchors.top:flicker1.top } ScrollBar { id:horizontal flickableItem: flicker1 orientation: Qt.Horizontal width:web.width * web.scale anchors{left:parent.left; leftMargin:5; right:parent.right; rightMargin:10; bottom:parent.bottom; bottomMargin:5} }
}
@Wondering if ListView can do the same thing.
-
Hey, I have to apologize: I mainly work with C++ QWidgets (which has a QListView and QScrollArea), and I wrongly thought that QML has a ListView and a ScrollArea too. Turns out that it doesn't, sorry. :(
However, I found this blog post: http://qtsource.wordpress.com/2011/02/07/scrollable-and-scroll-indicators-with-qml/ Check out his Scrollable example. It's Flickable plus 2 scroll bars. Could you use that?
-
[quote author="JKSH" date="1343835933"]Hey, I have to apologize: I mainly work with C++ QWidgets (which has a QListView and QScrollArea), and I wrongly thought that QML has a ListView and a ScrollArea too. Turns out that it doesn't, sorry. :(
However, I found this blog post: http://qtsource.wordpress.com/2011/02/07/scrollable-and-scroll-indicators-with-qml/ Check out his Scrollable example. It's Flickable plus 2 scroll bars. Could you use that?[/quote]
Hey, it's alright. I have never use QScrollArea before so I'm not sure how to use it. Gotta learn from you about that one :)
Yeap I found the same link, and tried it many times with ListView. Only vertical scrollbar can be used with ListView as it is scrolled vertically by default.
@ //vertical scrollbar
ScrollBar {
flickableItem: list
anchors{left:list.right; right:parent.right; top:list.top; rightMargin:5}
}
@
I was trying to put a horizontal scrollbar in the vertical listview without using Flickable, but it can't work. I guess horizontal scrollbar can only work with Flickable present. It would be interesting to find out if it is possible.As for Flickable with the 2 scroll bars that you mentioned, I already managed to get it to work earlier. The codes are as above. :)
Thank you very much for your help though :)
-
The ScrollBar code is at https://projects.forum.nokia.com/qmluiexamples/browser/qml/qmluiexamples/Scrollable/ScrollBar.qml, which shows that the ScrollBars depend on Flickable. So yeah, I think you're right:
bq. horizontal scrollbar can only work with Flickable present
Good luck with your project!
-
[quote author="JKSH" date="1343885687"]The ScrollBar code is at https://projects.forum.nokia.com/qmluiexamples/browser/qml/qmluiexamples/Scrollable/ScrollBar.qml, which shows that the ScrollBars depend on Flickable. So yeah, I think you're right:
bq. horizontal scrollbar can only work with Flickable present
Good luck with your project![/quote]
Thank you for the info. Guess for now I will just stick to Flickable.
Thanks! Need all the luck I can get. :) -
ListView should set like this in Qt 5.12
contentWidth: 150 // I can change it on ListView.Component.onCompleted event flickableDirection: Flickable.HorizontalAndVerticalFlick // hor and ver bar ScrollBar.vertical: ScrollBar{} ScrollBar.horizontal: ScrollBar{}