内容来源于 Stack Overflow,遵循 CC BY-SA 4.0 许可协议进行翻译与使用。IT领域专用引擎提供翻译支持
腾讯云小微IT领域专用引擎提供翻译支持
我列出了一个包含三个项目的折叠列表:“嘿”、“什么”和“向上?”。我想把它放到树状视图中。我知道这个列表只会包含这三个项目,因此,我想知道如何将这三个项目“ ”在一起。
我知道有一些敏捷系统的实现,支持添加和删除父/子对象,查找索引……强大的模型。但是,我只需要在可展开/可折叠的视图中显示这些项。以下是我通读的关于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?
但我将所有内容放在一个单独的列中,所有内容都相互对齐:
我知道我没有分配家长,我也不完全确定如何做到这一点-但我甚至不确定这是否是需要对这段代码所做的事情。所以我的问题是:要将这三个元素堆叠成一个可展开/可折叠的视图,缺少的最后一步是什么?
我用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 替换复选框。
MouseArea
我还创建了一个只使用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]}); sprite.destroy()