在QML中构建TabBar - Loader不显示所有矩形

Question

import QtQuick 2.4
import QtQuick.Window 2.2

Window
{
    visible: true
    height: 500
    width: 500

    property VisualItemModel contentToBeShownOnTabClick : visualItemModelDemo
    property variant tabLabels                    : ["Navigation", "Payload", "System Control"]

    VisualItemModel
    {
        id: visualItemModelDemo

        Rectangle
        {
            id: navigationTab
            color: "green"
            height: 200
            width: 200
        }
        Rectangle
        {
            id: navigationTab1
            color: "darkgreen"
            height: 200
            width: 200
        }
        Rectangle
        {
            id: navigationTab2
            color: "lightgreen"
            height: 200
            width: 200
        }
    }

    MainForm
    {
        Component
        {
            id: tabsOnBottomComponent
            Repeater
            {
                model:   tabLabels
                // The Tabs
                Rectangle
                {
                    id:             tabsOnBottom
                    // This anchoring places the tabs on the outer top of the parent rectangle.
                    anchors.top:    parent.bottom
                    anchors.topMargin: 180
                    color:          "lightsteelblue"
                    border.color:   "steelblue"
                    border.width:   2
                    implicitWidth:  Math.max ((labelTabsBottom.width + 4), 80)
                    implicitHeight: 20
                    radius:         2
                    // Tabs Text/Label
                    Text
                    {
                        id:                 labelTabsBottom
                        anchors.centerIn:   parent
                        color:              "white"
                        rotation:           0
                        // With reference to mode: tabLabels
                        text:               modelData
                        font.pointSize:     11
                    }

                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:    bottomTabClicked (index);
                    }
                }
            }
        }


        Rectangle
        {
            // The things which get displayed on clicking of a tab will be shown in this rectangle.
            id:           areaForTabContents
            border.color: "black"
            border.width: 10
            height:       parent.height
            width :       parent.width
            color :       "pink"

            // These are the tabs displayed in one row - horizontally.
            Row
            {
                id:      horizontalTabs

                Loader
                {
                    anchors.fill: parent
                    sourceComponent: tabsOnBottomComponent
                }
            }
        }

        anchors.fill: parent
    }
}

这显示如下：

而我希望它能并排看到3个矩形。

Answer 1

Loader不是透明类型w.r.t.包含类型，在这种情况下为Row。我认为这是与creation context和Repeater的工作方式相关的问题。从后者的文件：

  

由Repeater实例化的项目按顺序插入Repeater父母的子项。插入在其父堆叠列表中Repeater的位置后立即开始。这允许在布局中使用Repeater。

Rectangle确实添加到父Loader，叠加 - Loader不提供定位政策 - 然后他们已添加到Row，只有一个Item（最后一个）可见。

您可以使用几种不同的方法解决问题，具体取决于您要维护的属性。我将摆脱Component中的锚定并将其移至包含Row。 Component内部过于特殊的锚定可能是颈部疼痛，当它被实例化并在整个（不是那么小）的项目中使用时。

作为第一种方法，您可以将Repeater重新设为Row，即您可以将代码重写为：

Row
{
    id: horizontalTabs

    Loader
    {
        sourceComponent: tabsOnBottomComponent
        onLoaded: item.parent = horizontalTabs
    }
}

然而，由于Component锚定引用不再按预期工作，这会导致警告。

如果您仍想按照Component中的定义维护锚定并卸载创建，您可以采用动态方式（如果语义适合您的用例），即您可以使用createObject。这样您就完全避免了Loader及相关问题。例如，您可以在Repeater完成创建后创建Row：

Row
{
    id: horizontalTabs
    Component.onCompleted: tabsOnBottomComponent.createObject(horizontalTabs)
}

显然，根据您的需要，创建代码可以移动到其他任何位置。