How to put Horizontal Scroll Bar in Vertical ListView?

honeyhong

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?

JKSH

How about putting the ListView in a ScrollArea?

honeyhong

Hey, How do I do that? mind showing me an example?

honeyhong

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.

JKSH

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?

honeyhong

[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 :)

JKSH

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!

honeyhong

[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. :)

make2

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