如何使用StackLayout正确地对对象进行分组

Question

我正在尝试获取一个标签栏，以将位置从中继器切换到另一个项目。

目前我有这个：

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: qsTr("History")
    }
    TabButton {
        text: qsTr("Details")
    }

}
StackLayout {
    id: stack
    width: parent.width
    currentIndex: bar.currentIndex

    Repeater {
        id: repeat
        model: attributes

        Row {
            id: detailsTab
            Layout.fillWidth: true
            clip: true
            spacing: 5 * scaleFactor

            Text {
                Layout.preferredWidth: popupColumn.width * 0.55
                Layout.fillHeight: true
                text:  attributeName
                wrapMode: Text.WrapAnywhere
                font.pixelSize: 12 * scaleFactor
                color: "#FFFCF7"
            }

            Text {
                Layout.fillWidth: true
                Layout.fillHeight: true
                text:attributeValue
                wrapMode: Text.WrapAnywhere
                font.pixelSize: 12 * scaleFactor
                color: "#FFFCF7"

            }
        }
    }

    Item {
        id: discoverTab
    }
}

单击选项卡按钮历史记录时，我希望整个中继器都将显示。相反，发生的是显示文本对象中的一个字段，当我单击“详细信息”选项卡时，显示了来自转发器的下一个文本。

如何正确分组以获得所需的功能？