动态加载 SwipeView 页面答案

【问题标题】：Load SwipeView pages dynamically动态加载 SwipeView 页面
【发布时间】：2019-09-05 10:59:28
【问题描述】：

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

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

但是这个空组件的页面仍然被创建。

【问题讨论】：

标签： qt qml

【解决方案1】：

您的问题是 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
                }
            }
        }
    }
}

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

【讨论】：

感谢您的帮助，完美的解决方案。加载程序在那里是因为我从原始代码中复制了代码片段。唯一让我想知道的是为什么在这个解决方案中应用程序从第二页开始（如果存在超过 1 页）？
我猜是因为单页是在之后添加的，并且 SwipeView 在初始化后不会更改其索引。
这里有没有办法强制排序（单中继优先）？
好吧，我有点欺骗了它。第一个中继器Page 的完成事件触发第二个中继器模型的分配（启动时第二个中继器模型为0）。再次感谢。

【解决方案2】：

我提出了以下解决方案，但我对此并不满意。它非常hacky，用户可以看到页面索引是如何变化的。

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

ApplicationWindow
{
    property int itemsNo: 2;

    id: window
    visible: true

    width: 480
    height: 480

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

        Component.onCompleted:
        {
            if (itemsNo > 1)
                insertItem(0, theSingleComp);

            set0IndexTimer.start();
        }

        Timer
        {
            id: set0IndexTimer;
            interval: 1;
            running: false;
            repeat: false;

            onTriggered: theSwipeView.setCurrentIndex(0);
        }

        onCurrentIndexChanged: console.log("page: ", currentIndex);

        Repeater
        {
            model: itemsNo;

            Loader
            {
                sourceComponent: theMultiComp;

                Component
                {
                    id: theMultiComp;

                    Page
                    {
                        Text
                        {
                            text: "The multi one " + theSwipeView.currentIndex;
                        }
                    }
                }
            }
        }
    }

    Item
    {
        id: theSingleComp;

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

我还在寻找其他的例子。

【讨论】：