CODEWITHSUNDEEP
qtqml
bardao
bardao

Reputation: 954

QML bring child item to front

I'm trying to implement a way to bring a ListView in front of parent's siblings (in the case below: trying to get list to show above field items). When typing "show" on any item other than the last, I would like to see the list above all others. I know how QML's visual parent/child stack works, I just want to be able to somehow bypass that. I have tried changing the z value, but that wouldn't work as the parent/child relation takes precedence over layers. Here's what I'm trying to do. 

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 values to be ignored as they don't work.

Upvotes: 1

Views: 3677

Answers (1)

eyllanesc
eyllanesc

Reputation: 243897

You have to increase the z of the child ListView and the delegate of the main 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})
                        }
                    }
                }
            }
        }
    }
}

Upvotes: 1

Related Questions