动态加载 SwipeView 页面

debugcn 发表于 Dev

Łukasz Przeniosło

我创建了以下 MWE (Qt 5.13.0)：

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

ApplicationWindow
{
    property int itemsNo: 3;

    id: window
    visible: true

    width: 480
    height: 480

    SwipeView
    {
        anchors.fill: parent;
        id: theSwipeView;

        Loader
        {
            sourceComponent: theSingleComp;

            Component
            {
                id: theSingleComp;

                Page
                {
                    Text
                    {
                        text: "The single one";
                    }
                }
            }
        }

        Repeater
        {
            model: itemsNo;

            Loader
            {
                sourceComponent: theMultiComp;

                Component
                {
                    id: theMultiComp;

                    Page
                    {
                        Text
                        {
                            text: "The multi one " +
                                  (theSwipeView.currentIndex - 1);
                        }
                    }
                }
            }
        }
    }
}

在我的程序中，我有一个独特的组件 ( theSingleComp) 和他背后的多个组件 ( theMultiComp)。至于现在，我需要实现以下功能：

如果用于的模型theMultiComp只有 1 个项目，则仅显示该项目而不显示theSingleComp。如果theMultiComp项目更多，请像现在一样显示。在我看来，如果我保持静态定义的项目，这不可能起作用。但另一方面，我不知道如何动态执行此操作，因为在某些情况下根本不应显示其中一个组件。我尝试了这样的方法：

sourceComponent: (itemsNo > 1) ? theSingleComp : null;

但随后仍会创建此空组件的页面。

格雷科

你的问题是，Loader是Item和SwipeView它创建了一个页面，即使它不具有源组件。

要解决此问题，您可以使用Repeater模型 1（或 0 禁用它）。Repeater也是一个，Item但它在引擎盖下有一些特殊的代码可以被容器忽略。

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

ApplicationWindow
{
    id: window
    property int itemsNo: 0

    visible: true

    width: 480
    height: 480

    SwipeView {
        id: theSwipeView
        anchors.fill: parent
        Repeater {
            model: window.itemsNo > 1 ? 1 : 0
            Page {
                Text {
                    text: "The single one"
                }
            }
        }
        Repeater {
            model: window.itemsNo
            Page {
                Text {
                    text: "The multi one " + model.index
                }
            }
        }
    }
}

（我已经简化了您的代码以删除显式组件和加载程序）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。