将 GridLayout 与 QAbstractModelList 和中继器一起使用

Question

我在 QtQuick (QML) 中有以下问题。我想在表格布局中显示包含 QAbstractListModel 数据的表格。我为此使用了 GridlĹayout 和中继器：

  ScrollView {
        id: scrollView
        width: parent.width
        anchors.fill: parent
        clip: true
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
        ScrollBar.vertical.policy: ScrollBar.AlwaysOn

        Repeater{
            model: _network.qqjourneyslist.length
            Item {
                GridLayout {
                    id: inr
                    columns: 5
                    width: rect2.width
                    layoutDirection: "RightToLeft"
                    anchors.left: parent.left
                    anchors.top: parent.bottom

                    Repeater{
                        model: _network.qqjourneyslist[index]
                        Item {
                            Text{
                                id:t1
                                //width: 100
                                text: model.startstop
                                //Layout.fillWidth: true

                            }
                            Text{
                                id:t2
                                //width: 100

                                text: model.starttime
                                //Layout.fillWidth: true
                                //anchors.left: t1.right
                            }
                            Text{
                                id:t3
                                //width: 100
                                text: model.lineno
                                //Layout.fillWidth: true
                                //anchors.left: t2.right
                            }
                            Text{
                                id: t4
                                //width: 100
                                text: model.endstop
                                // Layout.fillWidth: true
                                //anchors.left: t3.right
                            }
                            Text{
                                id: t5
                                //width: 100
                                text: model.endtime
                                //Layout.fillWidth: true
                                //anchors.left: t4.right
                            }
                        }
                    }
                }
            }
        }
    }

问题是，当我在 GridLayout 中插入转发器时，流程被破坏并且文本相互覆盖。我尝试了很多方法，例如为文本插入宽度或使用 Layout.row、Layout.columns，但没有任何效果。
我还查看了Populate GridLayout with Repeater，但这个主题对我的情况没有帮助，或者至少我没有找到一种方法来为我的目的修改它。 _network.qqjourneislist 是一个带有 QAbstractListModel 的 QList，我想使用它，并且在 Layout 之外可以正常工作。 能否请您帮助我如何使用中继器和 QAbstractListModel？
我不热衷于使用 GridLayout 我只想为我的模型创建一个包含行和列的表。我知道还有很多其他表对象，但我不知道该使用哪个，并且全力以赴对我来说还有很长的路要走。
我很高兴收到的每一条建议，并感谢您！

编辑....

使用 ColumnLayout 和 RowLayout 的解决方案一直有效，直到我在中继器中使用中继器，这导致不生成文本行。

代码如下：

 ColumnLayout {
            id: inr
           // anchors.fill: parent
            width: parent.width
            layoutDirection: "LeftToRight"
            anchors.left: parent.left
            anchors.margins: 15
            //anchors.horizontalCenter: parent
            anchors.top: parent.top
            anchors.right: parent.right
    Repeater{
        model: _network.qqjourneyslist.length

   Repeater{
       id: rep1
        model: _network.qqjourneyslist[index]
            //width: inr.width
            //height: 50
            RowLayout{
                height: 20
                Layout.preferredHeight: 20
                spacing: 10
                    Text{
                        id:t1
                        width: wind.implicitWidth/3
                        //anchors.left: parent.left
                        //anchors.top: parent.top
                    text: model.startstop
                    font.pointSize: 12
                    Layout.preferredWidth: wind.implicitWidth/3

                    }

            Text{
                id:t2
                //width: 100

            text: model.starttime
            font.pointSize: 12
            font.bold: true
            //Layout.fillWidth: true
            //anchors.left: t1.right
            }
            Text{
                id:t3
                //width: 100
            text: model.lineno
            font.pointSize: 12
            color: "red"
            //Layout.alignment: Qt.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            //Layout.preferredWidth: parent.implicitWidth/3
            Layout.fillWidth: true
            }
            Text{
                x:wind.implicitWidth/12*9
                id: t4

            text: model.endstop
            Layout.alignment: Qt.AlignLeft
            font.pointSize: 12
            Layout.preferredWidth: parent.implicitWidth/3
            //anchors.left: t3.right
            }
            Text{
                id: t5
                //width: 100
            text: model.endtime
            Layout.alignment: Qt.AlignRight
            font.pointSize: 12
            font.bold: true
            //Layout.fillWidth: true
            //anchors.left: t4.right
            }
            }

            }
   RowLayout{
       height: 12
       //Layout.preferredHeight: 12
       //anchors.top: rep1.bottom
       Rectangle{
           //width: parent.width
           //Layout.
           Layout.row: 3*index
           Layout.preferredHeight: 12
           Layout.fillWidth: true
           color: "grey"
           //Layout.alignment: Qt.AlignLeft
           //Layout.fillWidth: parent
           //Layout.alignment: Qt.Right
           radius: 5
       }
        }}}

我想制作类似的东西（下面的矩形）

right version

但我只得到矩形而没有文本。如果我删除最后一个 RowLayout，则 texrows 会正确显示。

something is wrong

_network.qqjournieslist 是 QObejcts* 的 QList - QAbstractListModel - 因此应该可以将其分配给模型。 感谢您的每一个帮助！

Answer 1

Text 对象会覆盖自己，因为它们的父对象是 Item，它不会告诉它们定位的位置。您并没有真正描述您希望输出的外观，所以我假设您希望这 5 个文本字符串在网格中显示为单行。然后你可以使用Column 和Row，（或者如果你愿意，可以使用ColumnLayout 和RowLayout）。

Column {
    Row {
        Repeater {
            model: _network.qqjourneyslist
            Text {
                width: 100 // Column 1 width
                text: model.startstop
            }
            Text {
                width: 100 // Column 2 width
                text: model.starttime
            }
            ...
        }
    }
}

编辑：

您更新的代码不起作用，因为您似乎误解了Repeaters 的工作原理。 Repeater 的模型可以是它应该重复多少次的计数，也可以是告诉Repeater 要创建多少项目的某种列表。

您的第一个Repeater 使用列表的长度作为模型，这没关系。假设它的值为 10。这意味着它将在其中创建 10 个。 Repeater 里面是什么？另一个Repeater。第二个Repeater 的模型是列表中单个项目的内容。那是个问题。除非该项目也是某种列表，否则Repeater 将不知道如何将其用作计数。这就是为什么在上面的代码中，我将您的示例更改为仅使用单个 Repeater。这就是您的情况所需要的一切。每一行的模型都需要重复，而不是你的列。