J Patel
J Patel

Reputation: 49

QML In ListModel, ListElement need to be visible conditionally

I am using Qt/QML. on my touch screen, I have a side drawer that enables when user touches the menu button and it brings a side panel to the screen. My ListView holds a list model which has 7 ListElement in it. Which further bring users to separate setting pages. I want one of the List Element be visible based on a bool value. In short I like to make the visibility conditional for that List Element. How can I do it?

            model: ListModel {
            ListElement { title: "abcd"; iconsource: "qrc:/qml/images/abcd.png"; source: "qrc:/qml/abcd.qml"; ftoption: 243; visible: true}
            ListElement { title: "xyz"; iconsource: "qrc:/qml/images/xyz.png"; source: "qrc:/qml/xyz.qml"; ftoption: 243; visible: true}
            ListElement { title: "pqr"; iconsource: "qrc:/qml/images/pqr.png"; source: "qrc:/qml/pqr.qml"; ftoption: 243; visible: true}
        }
        delegate: ItemDelegate {
            id: menu_item
            width: parent.width
            height: Style.footerHeight
            visible: (model.title === "pqr") ? menuVisibility : true
            Timer {
                interval: 5000; running: true; repeat: true
                onTriggered: {(model.title === "pqr") ? model.visible = menuVisibility : model.visible = true}
            }

Upvotes: 0

Views: 1115

Answers (1)

user16776498
user16776498

Reputation:

Just add visible (can be other name though) role in your model.
Simple example:
(You can drop the Timer it is just for illustration)

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {

    anchors.fill: parent;
    Grid {

        spacing: 10
        anchors.centerIn: parent;
        Repeater {
            anchors.fill: parent;
            model: ListModel {
                ListElement {
                    visible: true
                }
                ListElement {
                    visible: false
                }
                ListElement {
                    visible: true
                }
                ListElement {
                    visible: false
                }
                ListElement {
                    visible: true
                }
                ListElement {
                    visible: false
                }
            }

            delegate:
            Rectangle {
                width: 100; height: 100;
                visible: model.visible
                color: "red"
                Timer {
                    interval: 500; running: true; repeat: true
                    onTriggered: {if (!visible) visible = true; else visible= Qt.binding(function(){return model.visible})}
                }
            }
        }
    }
}

enter image description here

Upvotes: 0

Related Questions