如何在Flickable中拥有GridLayout的粘性标头

Question

我有一个中继器填充的GridLayout ( TableView不适合我的需求)，在一个Flickable中，这样我就可以滚动内容了。

我希望我的GridLayout有一个头，我可以很容易地在我的转发器前添加Texts，如下所示：

import QtQuick 2.0
import QtQuick.Layouts 1.12

ColumnLayout {
    width: 200
    height: 200

    Flickable {
        Layout.fillWidth: true
        Layout.preferredHeight: 200
        contentWidth: width
        contentHeight: grid.height
        clip: true

        GridLayout {
            id: grid
            columns: 3
            columnSpacing: 10

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

            // Header
            Text {
                text: "Header 0"
            }
            Text {
                text: "Header 1"
            }
            Text {
                text: "Header 2"
            }

            // 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)
                    }
                }
            }
        }
    }
}

然而，我希望我的标题是“粘性的”/“冻结的”，即当滚动闪烁时保持可见。我可以在Flickable之外创建标题，但是GridLayout没有给我最终的行大小，所以我不能定位标题文本。

Answer 1

这有点老生常谈，但我找到了一个解决方案。

首先，创建“虚拟”标头，它们是Items。如果需要，可以将它们的Layout.minimalWidth设置为标头文本的宽度。

然后，在Flickable之前的项目中，创建标题，确保它与网格水平对齐，并使用标题的x值定位元素。

最后，在Flickable上设置负边距以删除由虚拟标头添加的无关行。

我还尝试在虚拟对象上使用fillWidth: true，然后设置每个头项目的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)
                    }
                }
            }
        }
    }
}