Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › In 'AppListView' are empty places where Loader should load Component

Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #20413

    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

    #20414

    Alex
    Felgo 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

    #20415

    Kacper

    The Loader in Component?
    You mean something like this?

     

    AppListView{

    Component{

    delegate: Loader{…}

    }

    }

    Sorry I don’t have approach to computer now.

    #20416

    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

    #20417

    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?

    #20421

    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)
    
            }
        }
    }

     

    #20431

    Günther
    Felgo 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

     

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded