fixing Horizontal scrolling in QML

Question

I want use for Scroll Bar Example.

I try to use this example for personal application. my main.qml file like this:

     Flickable {
         id: view
         anchors.fill: parent
         contentWidth: bobol.width
         contentHeight: bobol.height
    Column {
        id : bobol
        Rectangle {
            width: 400
            height: 100
            color: 'red'
  MouseArea {
        id: sideButtonMouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {      
            parent.color = '#4872E8'
        }}}
       Rectangle {
                        width: 200
                        height: 1000
                    }
}   
 states: State {
             name: "ShowBars"
             when: view.movingVertically 
             PropertyChanges { target: verticalScrollBar; opacity: 1 }}
         transitions: Transition {
             NumberAnimation { properties: "opacity"; duration: 400 }}}
     ScrollBar {
         id: verticalScrollBar
         width: 12; height: view.height-12
         anchors.right: view.right
         opacity: 10
         orientation: Qt.Vertical
         position: view.visibleArea.yPosition
         pageSize: view.visibleArea.heightRatio}

I want to fix horizontal scrolling in this example ? How can I fix this?

Answer 1

Use from this code, I improve your code :

import QtQuick 1.0
Item{
    Flickable {
    id: view
    anchors.fill: parent
    contentWidth: bobol.width
    contentHeight: bobol.height
    Row {
        id : bobol
        Rectangle {
            width: 100
            height: 400
            color: 'red'
            MouseArea {
                id: sideButtonMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    parent.color = '#4872E8'
                }}}
        Rectangle {
            width: 1000
            height: 200
        }
    }
    states: State {
        name: "ShowBars"
        when: view.movingHorizontally
        PropertyChanges { target: verticalScrollBar; opacity: 1 }
    }
    transitions: Transition {
        NumberAnimation { properties: "opacity"; duration: 400 }
    }
}
ScrollBar {
    id: verticalScrollBar
    width: view.width-12; height: 12
    anchors.bottom: view.bottom
    opacity: 10
    orientation: Qt.Horizontal
    position: view.visibleArea.xPosition
    pageSize: view.visibleArea.widthRatio
}

}

Answer 2

Are you looking for something like this:

import QtQuick 1.0
Item{
    Flickable {
    id: view
    anchors.fill: parent
    contentWidth: bobol.width
    contentHeight: bobol.height
    Row {
        id : bobol
        Rectangle {
            width: 100
            height: 400
            color: 'red'
            MouseArea {
                id: sideButtonMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    parent.color = '#4872E8'
                }}}
        Rectangle {
            width: 1000
            height: 200
        }
    }
    states: State {
        name: "ShowBars"
        when: view.movingHorizontally
        PropertyChanges { target: verticalScrollBar; opacity: 1 }
    }
    transitions: Transition {
        NumberAnimation { properties: "opacity"; duration: 400 }
    }
}
ScrollBar {
    id: verticalScrollBar
    width: view.width-12; height: 12
    anchors.bottom: view.bottom
    opacity: 10
    orientation: Qt.Horizontal
    position: view.visibleArea.xPosition
    pageSize: view.visibleArea.widthRatio
}
}