कैसे करने के लिए एक चिपचिपा हैडर के लिए एक GridLayout में एक Flickable

यह एक बिट hacky, लेकिन मैं एक समाधान मिला ।

सबसे पहले, बनाने के लिए "डमी" हेडर कर रहे हैं, जो Itemएस. आप कर सकते हैं सेट अपने Layout.minimalWidth किया जा करने के लिए की चौड़ाई हैडर पाठ अगर आप की जरूरत करने के लिए.

फिर, में एक आइटम से पहले Flickable बनाने के लिए, अपने शीर्ष लेख, बनाने यकीन है कि यह क्षैतिज ग्रिड के साथ गठबंधन है, और स्थिति के तत्वों का उपयोग कर x मूल्यों के शीर्ष लेख में है ।

अंत में, सेट एक नकारात्मक मार्जिन पर Flickable को दूर करने के लिए बाहरी पंक्ति द्वारा जोड़ा गया डमी हेडर है ।

मैं भी उपयोग करने की कोशिश की fillWidth: true पर dummies और फिर सेटिंग width प्रत्येक के शीर्षक आइटम, लेकिन नकारात्मक पक्ष यह है कि यह संशोधित तालिका स्तंभ चौड़ाई.

import QtQuick 2.0
import QtQuick.Layouts 1.12

ColumnLayout {
    width: 200
    height: 200

    // Header
    Item {
        Layout.minimumHeight: childrenRect.height
        Layout.fillWidth: true
        Text {
            id: header0
            x: headerDummy0.x
            anchors.top: parent.top
            text: "Header 0"
        }
        Text {
            id: header1
            x: headerDummy1.x
            anchors.top: parent.top
            text: "Header 1"
        }
        Text {
            id: header2
            x: headerDummy2.x
            anchors.top: parent.top
            text: "Header 2"
        }
    }

    Flickable {
        Layout.fillWidth: true
        Layout.preferredHeight: 200
        contentWidth: width
        contentHeight: grid.height
        clip: true
        // Eliminate the first row, which are the dummies
        topMargin: - grid.rowSpacing

        GridLayout {
            id: grid
            columns: 3
            rowSpacing: 50
            columnSpacing: 10

            function reparentChildren(source, target) {
                while (source.children.length) {
                    source.children[0].parent = target;
                }
            }

            // Header dummies
            Item {
                id: headerDummy0
                Layout.minimumWidth: header0.implicitWidth
            }
            Item {
                id: headerDummy1
                Layout.minimumWidth: header1.implicitWidth
            }
            Item {
                id: headerDummy2
                Layout.minimumWidth: header2.implicitWidth
            }

            // Data
            Repeater {
                model: 50

                Item {
                    Component.onCompleted: grid.reparentChildren(this, grid)
                    Text {
                        text: "Column 0, %1".arg(modelData)
                    }
                    Text {
                        text: "Column 1, %1".arg(modelData)
                    }
                    Text {
                        text: "Column 2, %1".arg(modelData)
                    }
                }
            }
        }
    }
}