Jumping into QT Creator, we begin our project by adding some sample starter code, then we visualize what the app will look like when displayed. This simple starter code starts us off with some text, a rectangle, and some empty space in the middle where we will be displaying our ListModels. Let’s begin editing by creating a container for the ListView, giving it a height, an ID, and adding anchor properties to help keep the rectangle where we want it. Once the ListView container has been created, we can move on to creating our actual ListViews.
The ListViews function allows users to display multiple of the same QML object type, with the option of leveraging different data. Since we just anchored our ListView to our container, we now have a visual aid to help us with styling, helping us understand the boundaries of our ListView, without having to guess. The next step is to set your Model property. For this example we’ll set our Model to 3, meaning we want our delegate to be displayed three times.
A delegate is the QML object that a user wants to display. For our example, we’ll be adding a button as our delegate. Because this is a ListView, the button feature is automatically set to scroll, but this function can be adjusted by changing the interactive property to False. Once the ListView is set up, we can then implement a ListModel.
A ListModel is a feature that allows users to store data, similar to an array. And within our ListModel we have ListElements. Start off by providing an ID for your ListModel, so your ListView knows exactly what needs to be recognized. Within ListElements, users will want to add a key value to assign to the property. Rinse, repeat, and adjust the value type for each version that is to be displayed. In this example, our key value (btnColor) has been adjusted to Green, Blue, and Orange. Make sure each of your ListView models are changed from 3 (number of delegates) to the actual ListModel ID. Then we can see our ListModel data displayed on the app.
Users can take this process a step further, by adding an onclick feature to the button. Because the ListView is populating data from the ListModel, users can access those values with a get method that takes an integer as a parameter. At this point, users are able to click the button and see the respective data displayed on the console.
This has been a brief overview on getting started with ListModels and ListViews in QML. We hope you found this video tutorial to be informative and enjoyable. Make sure to drop a comment on any of our social media platforms if you have suggestions or requests for new topics you’d like to hear more about!
Are you looking to build your first app, or in search of a custom-built app for your organization? Look no further, GeoMarvel builds custom applications to fit your business needs. Reach out to our industry experts to start a conversation about your unique needs today.
