Question

是否有一个qml类型来构建这样的展开菜单：

STATE1：

STATE2：

或者我是否必须通过组合其他类型和逻辑以某种方式设计此类型？

修改：

这就是我如何做到的。当然有可能进行改进，例如将表的ScrollView安装到标题行，使用Repeater intead创建对象，将组件模块化为单独的文件等：

import QtQuick 2.7
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2

ApplicationWindow {
    id: rootWindow

    visible: true
    width: 320
    height: 320

    Rectangle {
        id:base
        anchors.fill: parent
        color: "#FFFFFFFF"
        property var numOfInputs

        property var inputcomp
        signal currFullInputChanged();

        function start() {
            currFullInputChanged()
        }

        Window {

            id: win
            x: base.anchors.rightMargin
            width: 200
            height: 200
            visible: true

            MouseArea {
                id: area
                anchors.fill: parent
                property int count: 0

                onClicked: {

                    inputmod.append({"Key_1": count, "Key_2": count+1})
                    ++count;

                    base.start()
                }
            }
        }

        Component.onCompleted: {

            win.show()
        }


        onCurrFullInputChanged: {

            if(typeof inputcomp !== "undefined")
                inputcomp.destroy()

            numOfInputs = inputmod.count
            inputcomp = inputComponent.createObject(this, {"inputRows": numOfInputs})
        }



        ListModel {
            id: inputmod
        }

        Component {
            id: inputComponent

            Column {
                id: clTop
                anchors.fill: parent
                width: parent.width
                height: parent.height
                spacing: 1
                property int inputRows
                property int lastIndex: -1
                property var objs: []

                Component {
                    id: inputitem

                    Item {
                        id:item_
                        width: parent.parent.width


                        height: parent.parent.height/12

                        property string clickedColor: "#B4D0B4"

                        property int currIndex

                    Rectangle {
                        id: rectinfo

                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.right: parent.right
                        height: rectexpand.open === 0 ? parent.height : parent.height/4
                        border.width: 1
                        border.color: "#E4EEDA"
                        radius: 2
                        color: baseColor
                        property string baseColor: "#FDFFF9"


                        Text {
                            anchors.top: parent.top
                            anchors.left: parent.left
                            padding: 5
                            width: parent.width/2
                            height: parent.height/2
                            fontSizeMode: Text.Fit
                            text: "Input " + parseInt(parent.parent.currIndex + 1)
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignTop
                            wrapMode: Text.WordWrap
                            elide: Text.ElideRight
                            font.family: "Helvetica"
                            font.bold: true

                        }

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {

                                rectexpand.open = rectexpand.open === 0 ? 1 : 0
                                item_.height = Qt.binding(function() { return rectexpand.open === 0 ? clTop.height*1/12 : clTop.height*4/12} )

                                var currIndex = parent.parent.currIndex

                               if(clTop.lastIndex > -1) {
                                    var lastItem = clTop.objs[clTop.lastIndex];
                                    lastItem.children[0].color = lastItem.children[0].baseColor;
                                    lastItem.children[1].color = lastItem.children[1].baseColor;
                                    lastItem.children[0].opacity = 1
                                    lastItem.children[1].opacity = 1
                                }

                                var currItem = clTop.objs[currIndex];
                                currItem.children[0].color = parent.parent.clickedColor
                                currItem.children[1].color = parent.parent.clickedColor
                                currItem.children[0].opacity = 0.5
                                currItem.children[1].opacity = 0.5

                                clTop.lastIndex = parent.parent.currIndex
                            }
                        }
                   }

                    Rectangle {
                        id: rectexpand
                        anchors {top: rectinfo.bottom; left: parent.left; bottom: parent.bottom; right: parent.right}
                        border.width: 1
                        radius: 0
                        border.color: "grey"
                        property string baseColor: "white"
                        property int open: 0

                        onOpenChanged: {

                            if(open === 1)
                               tabloader.sourceComponent = view;
                            else
                               tabloader.sourceComponent = undefined;
                        }

                        Component {
                            id: del


                            Item {

                                anchors.left: parent !== null ? parent.left : undefined
                                anchors.right: parent !== null ? parent.right : undefined

                                TextInput {
                                    id: textinput
                                    anchors.margins: 4
                                    anchors.left: parent !== null ? parent.left : undefined
                                    anchors.verticalCenter: parent !== null ? parent.verticalCenter : undefined
                                    text: styleData.value
                                    color:  styleData.textColor
                                }
                            }
                        }

                        Component {
                            id: view


                            TableView {
                                anchors.fill: parent
                                itemDelegate: del
                                model: inputmod


                                TableViewColumn {
                                    id: col1
                                    role: "Key_1"
                                    title: "Key 1"
                                    width: parent !== null ? parent.width/2 - 2 : 0
                                }
                                TableViewColumn {
                                    id: col2
                                    role: "Key_2"
                                    title: "Key 2"
                                    width: parent !== null ? parent.width/2 - 2 : 0
                                }
                            }
                            }

                        Loader {
                            id: tabloader
                            anchors.fill: parent
                        }
                        }
                   }

                }

                Component.onCompleted: {

                    for(var i=0; i<inputRows; ++i) {

                        objs.push(inputitem.createObject(this, {"currIndex": i}))
                    }
                }

                Component.onDestruction: {

                    for(var i=0; i<inputRows; ++i) {

                        objs[i].destroy()
                    }
                }
            }
        }
    }
}

Answer 1

显然，QML仍然没有足够的有用控件类型，比如这种菜单。但它创建了自己的ControlsWidgets /无论如何都需要基本的组件。

要制作此菜单，您可以使用

ListView QML组件，其中包含自定义delegate项目。 Here is an example/tutorial而here正在Qt文档中扩展代理
使用Menu中的QtQuick.Controls 2控件并自定义MenuItem，如所描述的here

创建可展开/可扩展菜单的qml类型是什么？

1 个答案: