Qml - 页面的可滚动视图

Posted 2023-02-16

【中文标题】Qml - 页面的可滚动视图

【英文标题】：Qml - Scrollable View of Pages

【发布时间】：2017-03-22 13:10:01

【问题描述】：

这是我的 xml：

<?xml version="1.0" encoding="utf-8"?>
<parameters version="2.0">
    <page currentPage = "1">
    </page>
    <page currentPage = "2">
    </page>
</parameters>

这是我的 qml 代码：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.XmlListModel 2.0
import QtQml.Models 2.2

ApplicationWindow 
    id: mainWindow
    visible: true
    minimumWidth: 500
    minimumHeight: 500

    XmlListModel 
        id: pageXmlModel
        source: "qrc:/Config/Esempio.xml"
        query: "/parameters/page"
        XmlRole  name: "currentPage"; query: "@currentPage/number()" 
    

    ListView 
        id: pageListView
        model: pageXmlModel
        anchors.fill: parent
        orientation: Qt.Horizontal
        clip: true
        snapMode: ListView.SnapOneItem
        delegate: Rectangle 
            id: myPageContainer
            anchors.fill: parent
            Page 
                id: myPage
                anchors.fill: parent
                Text  text: currentPage 
            
        
    

无法理解为什么结果只有一页标签重叠，插入了更多页面，每个页面都有其标签。 谁能告诉我错在哪里？

谢谢！

【问题讨论】：

在你的委托中你不应该使用anchors.fill: parent，因为这会填满父母。

为了帮助你，我想拥有mcve。在您的情况下，这意味着您应该提供 Config/Esempio.xml 或将 XmlListmodel 替换为虚拟 ListModel 与一些虚拟数据。

也许你也想看看SwipeView。有趣的部分是Repeater和Loader的部分。但是，我不确定它是否比 ListView 更好，性能方面。

【参考方案1】：

我在您的代码中看到的唯一问题是您的委托：

delegate: Rectangle 
    id: myPageContainer
    anchors.fill: parent    // <--- Here is a BIG problem
    Page 
        id: myPage
        anchors.fill: parent
        Text  text: currentPage 
    

您将委托设置为填充父级。这里会发生什么？

好吧，ListView 扩展了 Flickable，所以它有一个 contentItem，可以将您的所有代表实例彼此相邻。 contentItem 的大小由与模型计数相关的委托的所有可见实例的大小决定。我仍然不知道它是如何计算的。 (see here )

但是，使用您的anchors.fill: parent，您可以调整委托的大小以始终填充contentItem。这将导致contentItem 的增长，这将导致delegate 的增长等等。你有一个绑定循环。

有趣的是，当您使用 XmlListModel 而不是数字作为模型时，QML 似乎检测到了这个问题，并且不接受 anchors.fill: parent。因此，在您的示例中，每个delegate 的widht 为0。这会导致您的问题，即您将两个页面的文本放在一起。

经验教训： 永远不要在代理的根节点中使用anchors.fill: parent。

delegate: Rectangle 
    id: myPageContainer
    width: root.width
    height: root.height
    Page 
        id: myPage
        anchors.fill: parent
        Text  text: index 
    
    Component.onCompleted: console.log(width, height)

【讨论】：

似乎有一个错误，无论您使用QAbstractModel-descentdent 还是数字，anchors.fill: parent 的行为都不同。然而，它永远不会起作用。