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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support