qt qml中如何让内容上下可滚动

[shenh_]

我的代码如下，在Flickable 里垂直放置了几个view，然后想用scrollbar去滚动Flickable ，但结果是scrollbar是满长度，不可拉动，就是说button的height充满了，无法拖动了！请问哪里出错了，或者该用一个什么样的控件来实现这个功能！！！

求解，先谢过了！！！！！

Flickable {
        id: flickable1
        x: 0
        y: 150
        width: 360
        height: 200
    Rectangle {
        id: rectangle1
        x: 9
        y: 0
        width: 280
        height: 100
        color: "#00000000"
        border.color: "#000000"

        Rectangle {
            id: myLine
            x: 0
            y: 59
            width: rectangle1.width
            height: 1
            color: "red"
        }
    }

    Text {
        id: text1
        x: 23
        y: 138
        text: "text11"
        font.pixelSize: 24
    }

    Text {
        id: text2
        x: 23
        y: 174
        text: "text12"
        font.pixelSize: 24
    }

    Text {
        id: text3
        x: 23
        y: 218
        text: "text13"
        font.pixelSize: 24
    }

    Text {
        id: text4
        x: 23
        y: 257
        text: "text14"
        font.pixelSize: 24
    }

    Text {
        id: text5
        x: 23
        y: 297
        text: "text15"
        font.pixelSize: 24
    }

    Text {
        id: text6
        x: 23
        y: 334
        text: "text16"
        font.pixelSize: 24
    }

    Text {
        id: text7
        x: 23
        y: 371
        text: "text17"
        font.pixelSize: 24
    }


}



    // 滚动条
    Rectangle {
        id: scrollbar
        x: 350
        y: 0
        width: 20
        height: 640
        color: "black"

        // 按钮
        Rectangle {
            id: button
            x: 0
            y: flickable1.visibleArea.yPosition * scrollbar.height
            width: 20
            height: flickable1.visibleArea.heightRatio * scrollbar.height;
            color: "green"

            // 鼠标区域
            MouseArea {
                id: mouseArea
                anchors.fill: button
                drag.target: button
                drag.axis: Drag.YAxis
                drag.minimumY: 0
                drag.maximumY: scrollbar.height - button.height

                // 拖动
                onMouseYChanged: {
                    flickable1.contentY = button.y / scrollbar.height * flickable1.contentHeight
                }
            }
        }
    }

[远离代码珍爱生命]

应该是 盒子模式的问题

[xiachm]

Flickable没有设置contentWidth和contentHeight，所以Flickable无法Flick

[xiachm]

另外，楼主要学会使用布局，一个一个的定位你不嫌麻烦吗？

我把你的代码改好了，你自己看看以前错在哪里。

另外在Qt Quick Components中也有一个滚动条的元素，楼主看看能否满足你的要求。以下是文档：

QML ScrollBar Element

import QtQuick 1.1

Rectangle {
    id: page
    width: 360
    height: 640

    Flickable {
        id: flickable1
        anchors.fill: parent
        contentWidth: column.width
        contentHeight: column.height

        Column {
            id: column
            spacing: 100

            Rectangle {
                id: rectangle1
                x: 9
                width: 280
                height: 100
                color: "#00000000"
                border.color: "#000000"

                Rectangle {
                    id: myLine
                    x: 0
                    y: 59
                    width: rectangle1.width
                    height: 1
                    color: "red"
                }
            }
            Text {
                id: text1
                text: "text11"
                font.pixelSize: 24
            }
            Text {
                id: text2
                text: "text12"
                font.pixelSize: 24
            }
            Text {
                id: text3
                text: "text13"
                font.pixelSize: 24
            }
            Text {
                id: text4
                text: "text14"
                font.pixelSize: 24
            }
            Text {
                id: text5
                text: "text15"
                font.pixelSize: 24
            }
            Text {
                id: text6
                text: "text16"
                font.pixelSize: 24
            }
            Text {
                id: text7
                text: "text17"
                font.pixelSize: 24
            }
        }
    }

    // 滚动条
    Rectangle {
        id: scrollbar
        x: 350
        y: 0
        width: 20
        height: 640
        color: "black"

        // 按钮
        Rectangle {
            id: button
            x: 0
            y: flickable1.visibleArea.yPosition * scrollbar.height
            width: 20
            height: flickable1.visibleArea.heightRatio * scrollbar.height;
            color: "green"

            // 鼠标区域
            MouseArea {
                id: mouseArea
                anchors.fill: button
                drag.target: button
                drag.axis: Drag.YAxis
                drag.minimumY: 0
                drag.maximumY: scrollbar.height - button.height

                // 拖动
                onMouseYChanged: {
                    flickable1.contentY = button.y / scrollbar.height * flickable1.contentHeight
                }
            }
        }
    }
}