There are many ways lists can be shown on a watch. Choosing the best one can make for a better user experience. In this video, learn how to present lists in optimal ways for watchOS.
- Well, Swift UI gives you a lot that is usable across platforms. There are some modifiers that are specific to a platform. Let's look at two cases for lists. Head on over to PizzaOrderView. So I'm going to stop all this up and go to a PizzaOrderView here. And start up the live view. And currently you can see, we have a simple list here. Notice how the bottom part of the list gets cut off. So example, for example, the long board here, is, it can get like that. So I can change a list style to change all that. So I'm going to go over here to my list and add list style. And I'm going to use a list style called the CarouselListStyle. And that changes things a little bit because when you do this you can start seeing what's happening is the top and bottom ones shrink a little bit as you do this. So it looks more like a carousel. That will help you with that kind of situation that it makes it look a little more round. If you want to say. In watchOS you also don't use backgrounds for these list rows. Instead, you're going to use a list row platter. So I'm going to put brain underneath that information with the list row platter, and you see here ListRowPlatterColor, and you can set a color. Now I can just set this to a simple color but I'm going to do something a little more here and decide which one is the selected item because I can't always see the top here. And it might be nice to actually know which one as I'm scrolling which pizza I'm looking at, that's already been selected. So I'm going to do that by putting color in here and using a red green blue, and red will be zero and blue will be zero and green. I'm going to change the color depending if it's a selected item or not. So selected item equals item.id. If it is, it's 0.5, if it isn't it's 0.3. And you'll notice it doesn't work because item is outside of the list here. So I'm going to pop it up in a little further to above the foreach. And now I can pick a pizza. Let's say I'll pick a big Island and I can order it. And I can see the big Island is highlighted compared to the other ones. So I said earlier that you want short list row. So it's easier to make the user to scroll. When you use Carousel styles. However, you can make them a little bigger than one line that we already have because the spacing is a little better. So I'm going to head to the row view and do one more thing. And here I'm going to add a ratings view under the pizza image and name, and I'll put it right here under that Hstack. I'll put ratings view, count int menu item.rating. like that, Okay. So we got an actual thing, and that's a little big, it's a little too big. So we'll frame it up a little bit. Frame, height will be 12 and I'll add a little bit of padding. There we go. And now go back to PizzaOrderView and you'll find the rating is now on the list. So we now have an app that has a better list look than it did before. This is the first of many differences in watchOS Swift UI compared to a phone. So let's now look at a few more.