首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >这是QML中最小可行的TreeView模型吗?

这是QML中最小可行的TreeView模型吗?
EN

Stack Overflow用户
提问于 2019-05-23 03:50:30
回答 2查看 1.8K关注 0票数 2

我列出了一个包含三个项目的折叠列表:“嘿”、“什么”和“向上?”。我想把它放到树状视图中。我知道这个列表只会包含这三个项目,因此,我想知道如何将这三个项目“”在一起。

我知道有一些敏捷系统的实现,支持添加和删除父/子对象,查找索引……强大的模型。但是,我只需要在可展开/可折叠的视图中显示这些项。以下是我通读的关于C++和QAbstractItemModels的内容:

由Qt自己开发的基于on:

下面是实现treeview with model的最简单可行的代码:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4


Window {
    id: mywindow
    visible: true
    width: 640
    height: 480

    TreeView {
        id: treeview
        anchors.fill: parent

        TableViewColumn {
            title: "Phrase"
            role: "phrase"
        }
        model: phraseModel
    }

    ListModel {
        id: phraseModel
        ListElement { phrase: "Hey"; }
        ListElement { phrase: "What's"; }
        ListElement { phrase: "Up?"; }
    }
}

我想让输出产生一个嵌套的堆栈,如下所示:

Hey
    What's
        Up?

但我将所有内容放在一个单独的列中,所有内容都相互对齐:

Hey
What's
Up?

我知道我没有分配家长,我也不完全确定如何做到这一点-但我甚至不确定这是否是需要对这段代码所做的事情。所以我的问题是:要将这三个元素堆叠成一个可展开/可折叠的视图,缺少的最后一步是什么?

EN

回答 2

Stack Overflow用户

发布于 2019-05-23 16:18:56

我用QML创建了一个可折叠的框架(一个带有标题和内容的组框)。如果您确定永远不会更改结构,则可以使用:

我通过删除无用的部分(动画、装饰品等)简化了代码。因此,下面的代码可以改进。但是,我保留了这个想法:

// CollapsibleGroupBox.qml
Item {
    property alias contentItem: content.contentItem;
    property string title: ""
    Item {
        id: titleBar
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: 30
        Row {
            anchors.fill: parent
            CheckBox {
                Layout.alignment: Qt.AlignLeft
                id: expand
                checked: true;
            }
            Text {
                Layout.alignment: Qt.AlignLeft
                text: title
            }
        }
    }
    Pane {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: titleBar.bottom
        anchors.bottom: parent.bottom
        topPadding: 0
        visible: expand.checked
        id: content
    }
}
// Main.qml
Item {
    height: 500
    width: 500
    CollapsibleGroupBox {
        anchors.fill: parent
        title: "Hey!"
        contentItem: CollapsibleGroupBox {
            title: "What's"
            contentItem: CollapsibleGroupBox {
                title: "up?"
            }
        }
    }
}

您将获得:

您也可以用MouseArea替换复选框。

票数 1
EN

Stack Overflow用户

发布于 2020-01-09 05:09:13

我还创建了一个只使用QML组件的模型:

import QtQuick 2.9
import QtQuick.Window 2.2
import UISettings 1.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4 as SV



Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flickable {
        id: flick
        anchors.fill: parent
        clip: true
        contentHeight: col.implicitHeight
        property var mymodel: {
            "animals": {
                "big": {
                    "land": "elephants",
                    "water": "whales"
                },
                "small": {
                    "land": "mice",
                    "water": "fish"
                }
            },
            "plants": {
                "trees": "evergreens"
            }
        }

        Column {
            id: col
            Component.onCompleted: componentListView.createObject(this, {"objmodel":flick.mymodel});
        }

        Component {
            id: componentListView
            Repeater {
                id: repeater
                property var objmodel: ({})
                model: Object.keys(objmodel)

                ColumnLayout {
                    Layout.leftMargin: 50
                    Button {
                        property var sprite: null
                        text: modelData
                        onClicked: {
                            if(sprite === null) {
                                if(typeof objmodel[modelData] === 'object')
                                sprite = componentListView.createObject(parent, {"objmodel":objmodel[modelData]});
                            }
                            else
                                sprite.destroy()

                        }
                    }
                }
            }
        }
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56264007

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档