Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › ListView

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23737

    Gabor

    Hi,

    I have the following AppListView (from an example):

    import Felgo 3.0
    import QtQuick 2.9
    import QtQuick.Controls 2.5
    import QtQuick.Controls.Styles 1.4
    import QtQuick.LocalStorage 2.12
    import "Database.js" as JS
    
    App {
        Rectangle {
            id: bckgrnd
            color: "lightblue"
            anchors.fill: parent
    
            AppListView {
                id: myListView
    
                model: [{
                        "letter": "A"
                    }, {
                        "letter": "B"
                    }, {
                        "letter": "C"
                    }, {
                        "letter": "D"
                    }, {
                        "letter": "E"
                    }, {
                        "letter": "F"
                    }, {
                        "letter": "G"
                    }, {
                        "letter": "H"
                    }, {
                        "letter": "I"
                    }, {
                        "letter": "J"
                    }, {
                        "letter": "K"
                    }, {
                        "letter": "L"
                    }, {
                        "letter": "M"
                    }, {
                        "letter": "N"
                    }, {
                        "letter": "O"
                    }, {
                        "letter": "P"
                    }, {
                        "letter": "Q"
                    }, {
                        "letter": "R"
                    }, {
                        "letter": "S"
                    }, {
                        "letter": "T"
                    }, {
                        "letter": "U"
                    }, {
                        "letter": "V"
                    }, {
                        "letter": "W"
                    }, {
                        "letter": "X"
                    }, {
                        "letter": "Y"
                    }, {
                        "letter": "Z"
                    }]
    
                // one sub-array for each list item
    
                //                    property var subsectionModel: [[{
                //                                                        "word": "Apple"
                //                                                    }, {
                //                                                        "word": "Ananas"
                //                                                    }], [{
                //                                                             "word": "Banana"
                //                                                         }, {
                //                                                             "word": "Ball"
                //                                                         }, {
                //                                                             "word": "Balloon"
                //                                                         }], [{
                //                                                                  "word": "Clock"
                //                                                              }], [{
                //                                                                       "word": "Dog"
                //                                                                   }, {
                //                                                                       "word": "Donut"
                //                                                                   }, {
                //                                                                       "word": "Dollar"
                //                                                                   }] // etc. etc., for demo purposes only list first few entries
                //                    ]
                spacing: dp(20) // to have some space between list items
    
                delegate: Item {
                    x: dp(10) // left margin
                    // the height is bigger if the subsection is visible
                    height: letterText.height + (subsectionColumn.visible ? subsectionColumn.height : 0)
                    width: parent.width // set width of whole ListView, makes clicking with MouseArea easier
    
                    AppText {
                        id: letterText
                        text: modelData.letter
                        font.bold: true // make it bold
                    }
    
                    MouseArea {
                        // fill the whole area, so if a subsection is clicked it will be unfolded
                        anchors.fill: parent
                        onClicked: {
                            // unfold subsection here
                            console.debug("letter clicked:", modelData.letter)
                            subsectionColumn.visible = !subsectionColumn.visible // toggle subsection visibility when clicked
                        }
                    }
    
                    //This needs to be modified
                    Column {
                        id: subsectionColumn
                        anchors.top: letterText.bottom // position below letterText area
                        anchors.topMargin: dp(10)
                        visible: false // start invisible, only show when clicked
                        spacing: dp(10)
                        Repeater {
                            model: ListModel {
                                id: listModel
                            }
    
                            // automatically set the model here, we could also set the model dynamically when clicking to load later
                            delegate: AppText {
                                text: model.wordField
                                color: index % 2 === 1 ? "red" : "blue" // alternate red & blue color
                            }
                        } // Repeater
                    } // Column
                } //List Delegate
            } //ListView
        }
    
        Component.onCompleted: {
            JS.dbGetWordList()
        }
    }
    

    I need to display words from an SQLite db alphabetically. My problem is, that if I add

     model: ListModel {
                                id: listModel
                            }

    where it is now, the Database.JS can’t see it. If I place it directly under AppListView the Database.JS can “see it, but I get a “Duplicate property binding” error. What is the best way to solve this? Thank you for your help.

    #23743

    Jean-Marc

    Hi,

    generally I declare my data struct in a qml property inside the Main.qml (the data can be put in another file with an import), in that way the scope of the property is global and it’s easier to access it from any part of you code…

    I don’t know if it helps but tell me more in case it doesn’t!

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

RSS feed for this thread

You must be logged in to reply to this topic.