在QML中修复水平滚动

Question

我想用Scroll Bar Example。

我尝试将此示例用于个人应用程序。 我的main.qml文件是这样的：

     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}

我想在这个例子中修复水平滚动？ 我该如何解决这个问题？

Answer 1

你在寻找这样的东西：

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

使用此代码，我改进了您的代码：

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
}

}