QML выводит дочерний элемент на передний план

#qt #qml

#qt #qml

Вопрос:

Я пытаюсь реализовать способ вывода a 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:

Вы должны увеличить z дочернего ListView и делегата основного 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})
                        }
                    }
                }
            }
        }
    }
}
 

Комментарии:

1. спасибо за ответ, не могли бы вы, пожалуйста, объяснить цель QtObject here? Я предполагаю, что это просто для хранения свойства без наличия визуального элемента.

2. @bardao Всегда рекомендуется делать определенные свойства недоступными, поскольку таким образом мы гарантируем, что элементы используются для того, для чего они были созданы, это одна и та же логика для разных типов доступа в C : общедоступный, частный и защищенный.