在qml中为它创建标签和加载屏幕

Question

我试图创建一个选项卡，然后为此加载相应的屏幕，但是当我试图将某些组件放置在选项卡屏幕中时，无法实现该目的。这怎么可能？

以下是创建的标签页的代码段。需要有关如何为每个选项卡动态创建相应屏幕的建议。

    Rectangle
{
    width: Screen.width
    height: Screen.height

    property variant tabname: ["tab1","tab2","tab3"]
    property variant tabScreen: ["Screen1","Screen2", "Screen3"]

    function setTabName(name)
    {
        tabname = name
    }

    function setTabScreen(screen)
    {
        tabScreen = screen
    }

    TabBar
    {
        id: bar
        width: parent.width

        Repeater
        {
            model: tabname.length
            TabButton
            {
                text: tabname[index]
            }
        }
    }

    StackLayout
    {
        id: stacklyt
        width: parent.width
        height: parent.height
        currentIndex: bar.currentIndex
        anchors.top: bar.bottom

        Repeater
        {
            model: tabScreen.length
            Rectangle
            {
                id: tabRect
                color: "gray"
                Layout.preferredWidth: 10
                Layout.preferredHeight: 20

                Text {
                    id: name
                    text: tabScreen[index]
                    anchors.centerIn: parent
                }
            }
        }
    }


    Component.onCompleted:
    {
        setTabName(tabname)
        setTabScreen(tabScreen)
    }

}

Answer 1

将id属性添加到Rectangle，并且无论您引用tabName还是tabScreen，请使用此id：

Rectangle
{
    id: rect
    ...
    property variant tabName: ["tab1","tab2","tab3"]
    property variant tabScreen: ["Screen1","Screen2", "Screen3"]

    TabBar
    {
        ...
        Repeater
        {
            model: rect.tabName
            TabButton
            {
                text: rect.tabName[index]
            }
        }
    }

    StackLayout
    {
        ...

        Repeater
        {
            model: rect.tabScreen
            Rectangle
            {
                ...

                Text {
                    id: name
                    text: rect.tabScreen[index]
                    anchors.centerIn: parent
                }
            }
        }
    }
}

第二，属性model应该是正确的集合，而不是集合的长度（请参见代码）。另外，setTabName和setTabScreen功能是什么？据我了解您的问题，您不需要他们达到目标。