将 GridLayout 与 QAbstractModelList 和 Repeater 一起使用

Question

我在 QtQuick (QML) 中遇到以下问题。我想在 table 布局中显示来自 QAbstractListModel 的数据的 table。我为此使用了 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，但没有任何效果。
我也查看了但这个主题对我的情况没有帮助，或者至少我没有找到一种方法来修改它以达到我的目的。 _network.qqjourneislist 是一个带有 QAbstractListModel 的 QList，我想使用它并且在 Layout 之外工作正常。你能帮我看看如何使用转发器和QAbstractListModel吗？
我不热衷于使用 GridLayout 我只想为我的模型创建一个包含行和列的 table。我知道还有很多其他 table 对象，但我不知道该使用哪个，全力以赴对我来说是一个漫长的路要走。
我很高兴收到每条建议并感谢您！

编辑....

ColumnLayout 和 RowLayout 的解决方案一直有效，直到我在 Repeater 中使用 Repeater，结果导致文本行未生成。

代码如下：

 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。这就是您的情况所需的全部。每行的模型都需要重复，但你的列不需要。

将 GridLayout 与 QAbstractModelList 和 Repeater 一起使用

Using GridLayout with QAbstractModelList and Repeaters

qml

repeater

qt-quick

编辑：