 So far we've been largely ignoring the templates and let's go ahead and deep dive into those. So first thing I'm gonna do is hit new Normally I either use this one or I've already got it queued up and ready to go So we're gonna start exploring these templates down here Namely the scroll stack and swipe We're gonna take the cute quick application scroll and I'm gonna slow way way down just so you can see I'm not making any changes Gonna give it a name default build system minimal version language The kit we're gonna use the same kit that we've been using as long as it says desktop and cute It's largely unimportant what the version and desktop platform and compiler and all that is just desktop and cute No project management and Voila so looking at this it's pretty self-explanatory. What's going on? We have an application window We have a scroll view which is just going to simply scroll the contents which in this case is a list view The list view itself is going to have a model with 20 items and each items going to be displayed as item plus whatever the number is Let's go ahead save run. So here's our application. We can scroll and there's our 20 items Pretty self-explanatory, but I'm gonna show you how to modify this. So let's close that First thing we want to do is actually make our own model. So we're gonna say list model and I want to call this ID of model Pretty self-explanatory Try to keep things super simple and this first element. I'm going to key it manually. Let's say list element And we'll say name. So really we're defining if you will a miniature model of data I say miniature because these can get massive Essentially a small database is what we're making Any of you little database experts out there are gonna go. This is not a database. You're absolutely right I'm just trying to get people who are not familiar with databases to understand what's going on So anyways, our first element is gonna have a name and let's have a phone number out there More appropriately, this would be a data set So then let's add a number. Let's call this 555 I'm just gonna say 5431 Now that we've got our model We can plug that in so we're gonna say use this model Now we want to change this delegate the delegates gonna determine how each element is going to be displayed So let's go ahead go in here and I'm gonna make a component You may be going whoa. Whoa. Whoa. What's a component? Well It's a little bit challenging to explain Even the documentation doesn't really help you too much but basically a component encapsulates all the QML component definition Huh, isn't that the same thing as an item? Not really. So an item is a non-visual element We've talked about the item before and we're just gonna make one now And let's call this Item very super descriptive So you can see I've got the item inside of the component So you could actually have say multiple items in here if you wanted to or rectangles or buttons or whatever But the component encapsulates the entire definition of your components a very Kind of vague term So when do you use one over the other honestly in my experience? It really doesn't matter Typically, I'll use component when I want to encapsulate some sort of functionality here All right, so very basics what we're gonna do here is we're gonna say the width. I want this to be 200 height let's say 50 and Let's go ahead and put a column in here because remember the delegates going to determine how this is displayed And we want anchors. We're gonna go ahead and fill the parent Spacing Five now in this case the parent is kind of hidden from us the parents gonna be the actual list element And it's not even the list element. It's the list item inside the delegate So the delegates gonna say hey create a delegate Slam that list element into the list item and it all happens in the background for us So we've got to take our model who has a name and a number and make it visible somehow So we need a few labels when we say label Let's say text and I want to put the name in there notice IntelliSense is not figuring out what we're trying to do And I'm gonna say font Bull true And through the magic copy and paste I can just grab this And we need to be able to put the number in here So basically we're gonna take this list element. We need a name and a number name number as long as those line up your good Now let's change this to delegate doesn't really matter what we name that As long as we can take it in here and put it right there oops Delegate there we go So our model is lining up with our model our Delegate is lining up with our delegate and when we save and run What it's gonna do is gonna load this model and it's gonna say for each list element Create a delegate and display it. Let's see what that looks like So there's Bill Smith Now I'm going to save a lot of typing. I'm just gonna grab a bunch of these off the screen I've already got them Pre-written up and ready to go and I'm just gonna make a larger list model save and run and Voila What's up everybody? This is Brian. I hope you enjoyed this video It's part of a larger series out on udemy.com called QML for beginners the QML for beginners course assumes, you know Absolutely zero QML. You're just starting off and it's designed specifically for Qt 5 I will re-record the entire series when Qt 6 comes out and just know that it's over a hundred videos And 13 and a half hours of video on-demand. I'll put a link below so you can get a highly discounted rate and Before you dive in just understand it covers a lot more than what I can put into this list everything from what's QML to animations to C++ integration JavaScript and on and on and on But one of the requirements up front is you have to know Qt core You should have some C++ under your belt and be very familiar with Qt 5 in case you have none of that I do have some courses for Qt core beginners intermediate and advanced out on udemy as well. Hope to see you there