Question

让我们假设我有一个应用程序，其中某些项目的大小可能会超过其window高度。

如何制作它，以便仅在需要时才显示垂直的scrollbar？

我现在将显示我已完成的测试应用程序发生了什么。

所有项目均关闭时：

打开项目时：

应显示scrollbar。

我现在将发布我在此示例中使用的代码：

main.qml

import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 200
    title: qsTr("Tabbars")

    Rectangle{
        anchors.fill:parent
            Column {
                anchors.fill: parent
                PanelItem {
                    id:panel1
                    title: "Panel 1"
                    width:parent.width
                    content: Item {
                        property string title: "teste"
                        height: configContent.implicitHeight
                        width: configContent.implicitWidth
                        ColumnLayout{
                            id:configContent
                            anchors.topMargin: 10
                            anchors.bottomMargin: 10
                            anchors.fill:parent
                            TextField {
                                id: companyNameText1
                                placeholderText: qsTr("Company name")
                                Layout.fillWidth: true
                                selectByMouse: true
                            }
                            ComboBox {
                                id: languagesComboBox1
                                textRole: "text"
                                objectName: "language"
                                Layout.fillWidth: true
                                model: ListModel {
                                    ListElement {text: QT_TR_NOOP("English"); oid: 0}
                                    ListElement {text: QT_TR_NOOP("Portuguese"); oid: 1}
                                    ListElement {text: QT_TR_NOOP("Spanish"); oid: 2}
                                    ListElement {text: QT_TR_NOOP("Italian"); oid: 3}
                                    ListElement {text: QT_TR_NOOP("French"); oid: 4}
                                    ListElement {text: QT_TR_NOOP("Portuguese(Brasil)"); oid: 5}
                                }
                            }
                            ComboBox {
                                id: devSndrModeComboBox1
                                textRole: "text"
                                objectName: "test_dev_sndr_mode"
                                Layout.fillWidth: true
                                model: ListModel {
                                    Component.onCompleted: {
                                        append({ text: QT_TR_NOOP("None"), oid: 0 })
                                        append({ text: QT_TR_NOOP("Subpanel"), oid: 1 })
                                        append({ text: QT_TR_NOOP("All"), oid: 2 })
                                    }
                                }
                            }
                        }
                    }
                    Component.onCompleted: {

                        console.log("panel 1 height "+panel1.height)
                    }
                }
                PanelItem {
                    id:panel2
                    title: "Panel 2"
                    width:parent.width
                    content: Item {
                        property string title: "teste"
                        height: configContent2.implicitHeight
                        width: configContent2.implicitWidth
                        ColumnLayout{
                            id:configContent2
                            anchors.fill:parent
                            ComboBox {
                                id: sndrModeComboBox1
                                textRole: "text"
                                Layout.fillWidth: true
                                model: ListModel {
                                    Component.onCompleted: {
                                        append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                        append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                    }
                                }
                            }
                        }
                    }
                    Component.onCompleted: { 
                        console.log("panel 2 height "+panel2.height)
                    }
                }

                PanelItem {
                    id:panel3
                    title: "Panel 3"
                    width:parent.width
                    content: Item {
                        property string title: "teste"
                        height: configContent3.implicitHeight
                        width: configContent3.implicitWidth
                        ColumnLayout{
                            id:configContent3
                            anchors.fill:parent
                            ComboBox {
                                id: sndrModeComboBox2
                                textRole: "text"
                                Layout.fillWidth: true
                                model: ListModel {
                                    Component.onCompleted: {
                                        append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                        append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                    }
                                }
                            }
                        }
                    }
                    Component.onCompleted: {
                        console.log("panel 2 height "+panel2.height)
                    }
                }

                PanelItem {
                    id:panel4
                    title: "Panel 4"
                    width:parent.width
                    content: Item {
                        property string title: "teste"
                        height: configContent4.implicitHeight
                        width: configContent4.implicitWidth
                        ColumnLayout{
                            id:configContent4
                            anchors.fill:parent
                            ComboBox {
                                id: sndrModeComboBox3
                                textRole: "text"
                                Layout.fillWidth: true
                                model: ListModel {
                                    Component.onCompleted: {
                                        append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                        append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                    }
                                }
                            }
                        }
                    }
                    Component.onCompleted: {
                        console.log("panel 2 height "+panel2.height)
                    }
                }

                PanelItem {
                    id:panel5
                    title: "Panel 4"
                    width:parent.width
                    content: Item {
                        property string title: "teste"
                        height: configContent5.implicitHeight
                        width: configContent5.implicitWidth
                        ColumnLayout{
                            id:configContent5
                            anchors.fill:parent
                            ComboBox {
                                id: sndrModeComboBox4
                                textRole: "text"
                                Layout.fillWidth: true
                                model: ListModel {
                                    Component.onCompleted: {
                                        append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                        append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                    }
                                }
                            }
                        }
                    }
                    Component.onCompleted: {
                        console.log("panel 2 height "+panel2.height)
                    }
                }

                PanelItem {
                    id:panel6
                    title: "Panel 5"
                    width:parent.width
                    content: Item {
                        property string title: "teste"
                        height: configContent6.implicitHeight
                        width: configContent6.implicitWidth
                        ColumnLayout{
                            id:configContent6
                            anchors.fill:parent
                            ComboBox {
                                id: sndrModeComboBox5
                                textRole: "text"
                                Layout.fillWidth: true
                                model: ListModel {
                                    Component.onCompleted: {
                                        append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                        append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                    }
                                }
                            }
                        }
                    }
                    Component.onCompleted: {
                        console.log("panel 2 height "+panel2.height)
                    }
                }

            }
        }
}

PanelItem.qml

import QtQuick 2.7
import QtQuick.Layouts 1.2

Item {
    id: root
    property Component content
    property string title: "panel"
    property bool isSelected: false
    height: container.height + bar.height
    Rectangle{
        id: bar
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        height: 30
        color:  root.isSelected ? "#81BEF7" : "#CEECF5"
        Text {
            anchors.fill: parent
            anchors.margins: 10
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            text: root.title
        }
        Text {
            anchors{
                right: parent.right
                top: parent.top
                bottom: parent.bottom
                margins: 10
            }
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            text: "^"
            rotation: root.isSelected ? "180" : 0
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: isSelected = !isSelected
        }
    }
    Rectangle{
        id: container
        anchors.top: bar.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: loader.item && isSelected ? loader.item.height : 0
        Loader {
            id: loader
            visible: isSelected
            sourceComponent: content
            anchors.top: container.top
        }
        Behavior on height {
            PropertyAnimation { duration: 100 }
        }
    }
}

如何实现scrollbar以便仅在需要时调用它？

Answer 1

我希望这会有所帮助。

ScrollView {
    id: scrollView // This is just an ID of scroll view
    width: 300 // This is the width of the scroll view window
    height: 300 // This is the height of the scroll view window

    // contentHeight or contentWidth holds the value of the whole
    // content height which needs a scroll bar if it is larger
    // than the height or width of the ScrollView
    // childrenRect.width returns the highest width among the children.
    // childrenRect.height returns the highest height among the children.
    contentWidth: childrenRect.width
    contentHeight: childrenRect.height

    // This is false by default.
    // This hides the excess content behind the boundaries of ScrollView; the height and the width
    clip: true

    // enter your contents here
}

导入QtQuick.Controls 2.14或更高版本以支持 contentWidth 和 contentHeight

Answer 2

我发现我认为这是一个非常好的解决方案。这种方式的滚动条仅在需要时显示：

    Item{
        id:item
        anchors.fill:parent
            ScrollView{
                anchors.fill:parent
                Column {
                    width:item.width
}
}
}

如何仅在必要时在qml中显示ScrollBar？

2 个答案: