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?


  • Moderators

    How about putting the ListView in a ScrollArea?



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



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


  • Moderators

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


  • Moderators

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


Log in to reply
 

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