QML将子项目带到前面

时间:2019-04-15 22:55:00

标签: qt qml

我正在尝试实现一种将ListView带到父母的兄弟姐妹面前的方法(在以下情况下:试图让list显示在field项以上)。在除最后一项以外的其他任何项上键入“显示”时,我希望看到list在所有其他项之上。我知道QML的可视父/子堆栈是如何工作的,我只想能够以某种方式绕过它。我曾尝试更改z的值,但是由于父/子关系优先于图层,因此无法使用。这就是我想要做的。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 400
    height: 400
    visible: true

    ListView {
        anchors.fill: parent
        anchors.margins: 20

        model: ListModel {
            ListElement {
                text: "1"
            }
            ListElement {
                text: "2"
            }
            ListElement {
                text: "3"
            }
            ListElement {
                text: "4"
            }
            ListElement {
                text: "5"
            }
            ListElement {
                text: "6"
            }
        }
        delegate: Item {
            width: parent.width
            height: 40

            TextField {
                id: field
                anchors.fill: parent
                anchors.margins: 1
                text: model.modelData
            }
            z:2
            ListView {
                id: list
                anchors.top: field.bottom
                width: parent.width
                height: 200
                visible: field.text === "show"
                clip: true
                delegate: Text {
                    width: parent.width
                    height: 20
                    text: model.modelData
                }
                z:3

                model: ListModel {
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                    ListElement {
                        text: "11"
                    }
                }
            }
        }
    }
}

z值不起作用,将被忽略。

1 个答案:

答案 0 :(得分:1)

您必须增加子级ListView的z和主ListView的委托:

Window {
    width: 400
    height: 400
    visible: true
    ListModel{
        id: mymodel
        Component.onCompleted: {
            for(var i=1; i<7; i++){
                mymodel.append({"text": ""+i})
            }
        }
    }
    ListView {
        anchors.fill: parent
        anchors.margins: 20
        model: mymodel
        delegate: Item {
            QtObject{
                id: internal
                property bool isTop: field.text === "show"
            }
            width: parent.width
            height: 40
            z: internal.isTop ? 1: 0
            TextField {
                id: field
                anchors.fill: parent
                anchors.margins: 1
                text: model.modelData
            }
            ListView {
                id: childview
                anchors.top: field.bottom
                width: parent.width
                height: 200
                visible: internal.isTop
                z: visible ? 1: 0
                clip: true
                model: childmodel
                delegate: Text {
                    width: parent.width
                    height: 20
                    text: model.modelData
                }
                ListModel{
                    id:childmodel
                    Component.onCompleted: {
                        for(var i=1; i<10; i++){
                            childmodel.append({"text": "child"+i})
                        }
                    }
                }
            }
        }
    }
}