如何有一个粘头一GridLayout在Flickable

0

的问题

我有一个GridLayout人口由一个中继器(提供一个不适合我的要求),内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. 我可以创造我的头外Flickable,但GridLayout不能给我的最后一行的大小,因此我不能置我的头的案文。

qml qt
2021-11-23 10:31:17
1

最好的答案

0

这是一个有点哈克,但是我找到一个解决方案。

第一,创建"虚拟"的标题是 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)
                    }
                }
            }
        }
    }
}
2021-11-23 10:31:17

其他语言

此页面有其他语言版本

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................