QML Item 內的 ScrollView 不會滾動

Question

我想為ScrollView固定 header ，所以我認為這樣做會起作用：

Item {

   Rectangle {
    ---i want to be a fixed header
   }

   ScrollView {
    ---list items
   }

}

基本上在Item內部，我希望一個Rectangle或Row充當 header ，在其下方是一個ScrollView 。

但是，如果我將 ScrollView 放在一個 Item （或Rectangle ，我已經嘗試過）中，則不會滾動 - 但滾動條會顯示。

關於如何解決它的任何想法？ 或者不同的方法？

編輯：我需要 Item 因為我有一些屬性。

Answer 1

正如@folibis 提到的，您可以考慮使用TableView或ListView ，因為它們內置了對 header、滾動和 model 數據委托的支持。

我創建了一個示例來演示：

• 列表顯示
• 帶orientation: ListView.Horizontal
• 帶有ScrollBar.vertical: ScrollBar { }
• Header 通過設置header和headerPositioning
• 通過設置model和delegate提供的內容

import QtQuick
import QtQuick.Controls
Page {
    ListView {
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width
        height: 120
        model: [ "Alligator", "Bear", "Cat", "Dog",
            "Elephant", "Flamingo", "Giraffe", "Horse",
            "Iguana", "Jellyfish", "Kangaroo", "Lion",
            "Monkey", "Narwhal", "Owl", "Panda",
            "Quail", "Raccoon", "Squirrel", "Tiger",
            "Unicorn", "Vampire Bat", "Worm", "Xenarthra",
            "Yak", "Zebra"
        ]
        orientation: ListView.Horizontal
        ScrollBar.horizontal: ScrollBar {
            height: 20
            policy: ScrollBar.AlwaysOn
        }
        header: Rectangle {
           width: 100
           height: 100
           color: "white"
           border.color: "grey"
           z: 2
           Text {
               anchors.fill: parent
               text: "Alphabet Zoo"
               horizontalAlignment: Qt.AlignHCenter
               verticalAlignment: Qt.AlignVCenter
               wrapMode: Text.WordWrap
           }
        }
        headerPositioning: ListView.OverlayHeader
        clip: true
        delegate: Rectangle {
           width: 100
           height: 100
           color: index & 1 ? "#eee" : "#ddd"
           border.color: "grey"
           Text {
               anchors.fill: parent
               text: modelData
               horizontalAlignment: Qt.AlignHCenter
               verticalAlignment: Qt.AlignVCenter
               wrapMode: Text.WordWrap
           }
        }
    }
}

您可以在線試用！