如何使 QML ListView 标头的标签与委托布局相匹配？

问题描述

我有一个带有多个不可调整大小的“列”的 ‍‍ListView - 由委托定义。 我想让 ListView Header 的标签对应于列的位置。 在设计时不将标签固定到特定坐标的情况下，在标题中设置标签位置的正确方法是什么？如何将标题子项的 x 和宽度锚点附加到委托子项的坐标？

基本上，我最终试图让它看起来像一个经典的表格视图。

我现在拥有的是这样的：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3

Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")


ListView {
    id: lv
    width: 300
    height: 400
    x: 10
    y: 10
    spacing: 10




    header: Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        height: 20
        color: "green"
        property alias firstCol: firstColumn

        RowLayout {
            id: rl
            Rectangle {
                id: firstColumn
                width: 100
                height: 20
                color: "#ffaabb"
                Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    anchors.fill: parent


                    text: qsTr("header1")
                }
            }
            Rectangle {
                width: 150
                height: 20
                color: "#ffbbaa"
                Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    anchors.fill: parent

                    text: qsTr("header2")

                }
            }
        }


    }



    delegate:
        Rectangle {
        color: "red"

        anchors.left: parent.left
        anchors.right: parent.right

        RowLayout {
            Rectangle {
                width: 100
                height: 30
                color: "#99aabb"
                Text {
                    anchors.fill: parent
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter


                    text: title
                }
            }
            Rectangle {
                width: 150
                height: 30
                color: "#99bbaa"
                Text {

                    text: title2
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    anchors.fill: parent
                }
            }
        }

        //                width: 100
        height: 30
    }

    model: ListModel {
        ListElement { title: 'first'
            title2: 'hmm' }
        ListElement { title: 'second'
            title2: 'ohh'}
    }


}

}

如您所见，标题项和委托项都有特定的位置（由水平布局定义）和大小。我想要的是以某种方式将它们彼此锚定，例如，我将定义标题“列”项的位置，并且委托“列”也将遵循该布局。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）