qml如何在tabview中使用loader

Question

我找不到使用加载程序填充tabview中的选项卡的方法.当它在TabView之外时,加载器工作正常(即如果我删除mainTrial.qml顶部的多行注释字符,并且Loader加上Connections位于顶部.但是如果我将Loader移动到子行中一个选项卡,我收到错误"无法为一个单一属性分配多个值.我也不能使用menuLoader.source或column1.menuLoader.source或其他变体来解决TabView之外的Loader.这是主文件.(包含定义信号的其他两个文件,以便您可以看到信号有效.)我做错了什么？

编辑:(排列和组合的良好的法律)我发现如果我做了连接声明,选项卡上的Loader的子项,问题就会消失.我将在选项卡上分配一个"值" - 作为Loader,现在我可以为每个选项卡加载一个qml项目.

// mainTrial

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1 


Item {
    id: trial
    width: 360
    height: 360
    ColumnLayout {
        id: column1
        spacing:150
        Item {Layout.fillHeight: true}
        TabView {
            id: tabPages
            Tab {
                id: welcomePage
                title: "Welcome"
                // /*
                Loader{
                    id: menuLoader
                    source: "mainTrial1.qml"
                    anchors.top: parent.top
                    Connections {
                        id: menuConnection
                        ignoreUnknownSignals: true
                        target: menuLoader.item
                        onMainTrial3: {
                            menuLoader.source = "mainTrial3.qml"
                            console.log("originated from " + origin)
                        }
                        onMainTrial1: {
                            menuLoader.source = "mainTrial1.qml"
                            console.log("originated from " + origin)
                        }
                    }
                }        
            }
            Tab {
                id: statusPage
                title: "Status"
            }
        }
    }
}

// mainTrial1(带一个信号定义)

此文件定义用于加载下一个qml对象的信号之一.我把它包括在这里,以便您可以看到信号有效).

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Item {
    id: page1
    property string origin: "Hello"
    signal mainTrial3(string origin)
    ColumnLayout {
        spacing: 15
        Rectangle {
            width: 100
            height: 62
            color: "red"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    mainTrial3("origin = from MouseArea")
                }
            }
        }

        Button {
            text: "Sorting and scanning"
            onClicked: {
                mainTrial3(origin = "from Button")
            }
        }
    }
}

// mainTrial3(使用其他信号定义)

此文件定义用于重新加载先前qml对象的另一个信号.我把它包含在这里,以便你可以看到当点击矩形时两个信号都有效.

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Item {
    id: page3
    property string origin: "Hello"
    signal mainTrial1(string origin)
    GridLayout {
        columnSpacing: 5
        rowSpacing: 5
        columns: 1
        Rectangle {
            width: 100
            height: 62
            color: "blue"

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    mainTrial1(origin = "from MouseArea1")
                }
            }
        }
        Rectangle {
            width: 100
            height: 62
            color: "blue"

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    mainTrial1("from MouseArea2")
                }
            }
        }
    }
}

Answer 1

好吧，我拿了你的代码，使用了一点，并自定义了其余部分以加载单个选项卡，以使讨论变得更容易一些。这并不完全是您发布的内容，但它应该向您展示如何：

1. 当在选项卡内单击某些内容时接收信号。
2. 在何处以及如何加载选项卡。

有了这个，您应该有坚实的基础来进一步自定义和添加两个、三个等...选项卡，并根据我的示例中的信号动态更改它们。

重要的是，Tab它本身是一个Loader，所以不需要定义一个内部Loader。接下来，我对 QML 还没有完全有经验（QWidget 更适合我），但是Connections您正在使用的似乎会引起一些问题，我不确定它们是否完全需要，所以我将它们从我的示例中删除了。

在我的示例中，我只是在选项卡中加载一个 QML 文件，并在您单击刚刚加载的选项卡内的蓝色矩形或红色矩形时发送信号。

您将能够在控制台中看到打印输出。我在信号处理程序中留下了一条注释，您可以在其中更改source并Tab动态加载下一个Tab.

享受！

TabViewTest.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1


Item {
    id: tabViewTest
    width: 360
    height: 360

    TabView {
        id: tabView
        width: parent.width
        height: parent.height

        Tab {
            title: "Welcome"
            id: dynamicTab
            anchors.top: parent.top

            // [1] Specify the source URL to load the content.
            source: "RectanglesTab.qml"

            // [2] Define a signal within the Tab that will
            // be connected to the 'contentsClicked' signal
            // in each tab QML file.
            signal tabContentsClicked( string rectColor )

            // [3] Implement the signal handler.
            onTabContentsClicked: {
                console.log( "Clicked on a", rectColor, "rectangle." )

                // [4] Now that the user has clicked somewhere within the tab
                // you could optionally the source or sourceComponent here like
                // the comment below.
                //
                // Just make sure it also has a signal called 'contentsClicked'
                //
                // dynamicTab.source = "someOtherTab.qml"
            }

            onLoaded: {
                console.debug( "Loaded", source );

                // [4] Here's the key action, connect the signal 
                // 'contentsClicked' to our signal 
                // 'tabContentsClicked' from the loaded item 
                // i.e. RectanglesTab.qml
                dynamicTab.item.contentsClicked.connect(tabContentsClicked)
            }
        }

        Tab {
            id: statusTab
            title: "Status"
        }
    }
}

矩形选项卡.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1

Rectangle {
    id: rectanglesTab
    width: parent.width
    height: parent.height
    color: "black"

    signal contentsClicked( string rectColor )

    GridLayout {
        width: parent.width
        height: parent.height
        columnSpacing: 5
        rowSpacing: 5
        columns: 1
        Rectangle {
            width: parent.width
            height: 120
            color: "blue"

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    contentsClicked( "blue" )
                }
            }
        }
        Rectangle {
            width: parent.width
            height: 120
            color: "red"

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    contentsClicked( "red" )
                }
            }
        }
    }
}