[Kacper]

In ‘AppListView’ are empty places where Loader should load Component with ‘SimpleRow’

I have a code application written in QT/QML and V-PLAY on the github here:
https://github.com/pyroxar/VplayfirstApp
My problem:

I want to use AppListView to display different elements (like Button or SwitchApp) in ‘Ustawienia’ (Settings) page dependent on elements in array:

property var typeOfElementsInSettings: [‘switch’,’switch’,’button’,’switch’]

I use ‘delegete: Loader’ to do It, I inspired in this thread.
https://stackoverflow.com/questions/31985972/different-delegates-for-qml-listview
I load component from other file, one will have Button inside, other AppSwitcher. Loader inserts SimpleRow to AppListView, I know It because variable myIndex should increment when SimpleRow is added and It was incremented but I can’t see anything. I mean that I see empty space in place where should be displayed SimpleRow.

See screenshot:
https://screenshots.firefox.com/BgiM3n0sZd7Vt6p3/stackoverflow.com
Important file ‘SimpleRowSwitch.qml’ and ‘Main.qml’ in 81 line

[AlexFelgo Team]

Hi,

the code example from Stackoverflow wraps the Loader in a Component, I cannot see this in your screenshot. Please try if this resolves the issue.

Cheers,
Alex

[Kacper]

The Loader in Component?
You mean something like this?

 

AppListView{

…

Component{

delegate: Loader{…}

}

}

Sorry I don’t have approach to computer now.

[Kacper]

This is my code in Main.qml

NavigationItem{
            title: "Ustawienia"
            icon: IconType.cogs

            NavigationStack{
                Page{
                    title: "Ustawienia"
                    AppButton{
                        id: przy
                        text: "abba"
                    }

                    AppListView{
                        anchors.top: przy.bottom
                        model: ListModel{
                            ListElement{
                                type: "kategoria 1"; name: "opcja 1"
                            }
                            ListElement{
                                type: "kategoria 1"; name: "opcja 2"
                            }
                            ListElement{
                                type: "kategoria 2"; name: "opcja 3"
                            }
                            ListElement{
                                type: "Opcje programisty"; name: "Czyszczenie ustawień aplikacji"
                            }
                        }


                        section.property: "type";
                        section.delegate: SimpleSection {
                            title: section
                        }

                        delegate: Loader{
                            sourceComponent: {
                                switch(typeOfElementsInSettings[myIndex]){
                                    case "switch":
                                        console.log(typeOfElementsInSettings[myIndex])
                                        console.log("s")
                                        return imageDel;
                                    case "button":
                                        console.log(typeOfElementsInSettings[myIndex])
                                        console.log("b")
                                        return imageDel;
                                }
                            }
                        }
                        SimpleRowSwitch { id: imageDel }
                        VideoDelegate { id: videoDel }
                    }

                }
            }
            onSelected: {
                //console.log("selected")
            }
            Component.onCompleted: {
                //console.log("Zrobiono")
            }
        }

This my code in SimpleRowSwitch.qml:

import Felgo 3.0
import QtQuick 2.9

Component{
    SimpleRow {
        x: 100
        y: 200
        text: name;
        AppSwitch{
            property int indexOfElementInSettings: 0
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: dp(10)
            Component.onCompleted: {
                indexOfElementInSettings=myIndex
                console.log(myIndex)
                if(switchsSettingsLogicArray[myIndex]===1){
                    checked=true
                } else {
                    checked=false
                }
                //myIndex++;
            }
            onToggled: {
                console.log(indexOfElementInSettings)
            }
        }
        Component.onCompleted: {
            console.log(x)
            console.log(y)
            console.log(typeOfElementsInSettings[myIndex])
            console.log(myIndex)
            myIndex++
        }
        onSelected: {
            console.log("abba")
        }


    }

}

 

Scrennshots

[Kacper]

I change my code:

section.property: "type";
                        section.delegate: SimpleRow {
                            title: section
                        }

on:

section.property: "type";
                        section.delegate: SimpleRowSwitch {
                            //title: section
                        }

I can see now something but I can’t pass ‘title’ property to SimpleRowSwitch. I can’t define ‘title’ property in my Component. How I can pass ‘title’ property to SimpleRow in my component in the ‘SimpleRowSwitch.qml’ file which contain SimpleRow?

[Kacper]

Hello?

Is there anybody? I need your help :/
I have three files: ‘Main.qml’, ‘SimpleRowbutton.qml’ and ‘SimpleRowSwitch.qml’.
I want to Load to the AppListView SimpleRow with AppSwitch or AppButon, dependent of values of array:

property var typeOfElementsInSettings: ['switch','switch','button','switch','button','switch','switch','switch']

 

How i Can do It? I don’t have any idea, please give me the tip.

My code:

import Felgo 3.0
import QtQuick 2.9

Component{
    SimpleRow {
        text: "name";
        AppButton{
            text: "aaaa"
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: dp(10)
            Component.onCompleted: {
                console.log(myIndex)
                console.log("Przycisk")
                //myIndex++;
            }
        }

        Component.onCompleted: {
            console.log("bbb"+switchsSettingsLogicArray[myIndex])
            //console.log(myIndex)
            myIndex++
        }
    }
}

 

SimpleRowSwitch.qml:

import Felgo 3.0
import QtQuick 2.9

Component{
    SimpleRow {
        text: "name";
        AppSwitch{
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: dp(10)
            Component.onCompleted: {
                console.log(myIndex)
                if(switchsSettingsLogicArray[myIndex]===1){
                    checked=true
                } else {
                    checked=false
                }
                //myIndex++;
            }

            onToggled: {
                console.log(myIndex)
            }
        }
        Component.onCompleted: {
            console.log("a"+switchsSettingsLogicArray[myIndex])
            //console.log(myIndex)
            myIndex++
        }
    }
}

 

Main.qml (all):

import Felgo 3.0
import QtQuick 2.9

App {
    //var appswitchs = {id: 1, value: false; id: 2, value: false};
    id: app
    property var switchsSettingsLogicArray: [0,0,1,1,1,0,0,1,1]
    property var typeOfElementsInSettings: ['switch','switch','button','switch','button','switch','switch','switch']
    property var firstRun
    property int myIndex: 0

    Navigation{
        NavigationItem{
            title: "Listy"
            icon: IconType.checkcircle

            NavigationStack{
                Page{
                    id: task1

                    navigationBarTranslucency: 0.0

                    title: "Listy"

                    SearchBar {
                        id: searchBarThreads
                        onAccepted: {

                        }
                    }
                }

            }
        }

        NavigationItem{
            title: "Konto użytkownika"
            icon: IconType.user

            NavigationStack{
                Page{
                    title: "Konto użytkownia"
                }
            }
        }

        NavigationItem{
            title: "Ustawienia"
            icon: IconType.cogs

            NavigationStack{
                Page{
                    title: "Ustawienia"

                    AppListView{
                        model: ListModel{
                            ListElement{
                                type: "kategoria 1"; name: "opcja 1"
                            }
                            ListElement{
                                type: "kategoria 12"; name: "opcja 2"
                            }
                            ListElement{
                                type: "kategoria 23"; name: "opcja 3"
                            }
                            ListElement{
                                type: "Opcje programisty"; name: "Czyszczenie ustawień aplikacji"
                            }
                            ListElement{
                                type: "kategoria 11"; name: "opcja 1"
                            }
                            ListElement{
                                type: "kategoria 1"; name: "opcja 2"
                            }
                            ListElement{
                                type: "kategoria 2"; name: "opcja 3"
                            }
                            ListElement{
                                type: "Opcje programisty2"; name: "Czyszczenie ustawień aplikacji"
                            }
                        }

                        section.property: "type";
                        section.delegate: Component {
                            //title: section
                        }

                        delegate: Loader{
                            //asynchronous: true
                                //visible: status == Loader.Ready
                            sourceComponent: {
                                switch(typeOfElementsInSettings[myIndex]){
                                    case "switch":
                                        console.log("switch")
                                        return SimpleRowButton.qml;
                                    case "button":
                                        console.log("button")
                                        return SimpleRowButton.qml;
                                }
                            }
                        }
                    }

                }
            }
            onSelected: {
                //console.log("selected")
            }
            Component.onCompleted: {
                //console.log("Zrobiono")
            }
        }
    }
    function init(){
        console.log("initialization...")
    }

    Component.onCompleted: {
        app.settings.clearAll()
        if(app.settings.getValue("firstRun") === undefined){
            console.log("firstRun: false")
            init()
            app.settings.setValue("firstRun", false)

        }
    }
}

 

[GüntherFelgo Team]

Hi,

the delegate of a requires a Component, which is used to create actual items for the list. Directly assigning a QML item (e.g. a Loader) to the delegate, automatically makes it a component, so each of your list items will become its own individual Loader.

You can have a look at how Loading works at the Loader documentation.

To learn how you how to dynamically create objects and work with components in QML see here:
http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

Best,
Günther