VStack, HStack, and ZStack in SwiftUI

VStack, HStack, and ZStack in SwiftUI | Bootcamp #10

Рет қаралды 39,058

Күн бұрын

Stacks are an easy way to align objects on the screen in SwiftUI. We will not only implement the different types of stacks, but also explore how we can customize them with spacing and alignments. We'll also dive into putting stacks within stacks to create complex views.
In this video, we will cover:
1) VStacks - aligning objects vertically (top to bottom)
2) HStacks - aligning objects horizontally (left to right)
3) ZStacks - aligning objects with Z index (front to back)
4) LazyVStacks - special VStacks to handle large data sets
5) LazyHStacks - special HStacks to handle large data sets
Next video: • Adding Padding in Swif...
Last video: • Backgrounds and Overla...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-thinking.com
DISCORD: / discord
GITHUB: github.com/SwiftfulThinking/
SAY THANKS: www.buymeacoffee.com/nicksarno

Пікірлер: 95

@shannonramirezslater4909 3 жыл бұрын

Before finding this course, I had been compulsively searching the web for a course that is free, covers ALL the basic foundations, and goes in depth on each topic. This is the only thing I've found that has all three of them. I am so grateful for you and these videos. I know this has helped so many people

@SwiftfulThinking 3 жыл бұрын

Thanks Shannon! Happy to help :)

@jean-michelnogaro7471 Жыл бұрын

J'ai même cherché des solutions payantes pour ma part et elles n'ont pas cette pédagogie progressive .. Merci !!

@CMessineo 5 ай бұрын

"Let's get stacking!" I prefer ZStacks to backgrounds. Partly, because they make sense to me and partly because they seem to respect the boundaries of stacks they are placed inside (in your last example, the background circle goes over the edge of the VStack).

@yokohibarashi1386 3 жыл бұрын

Your content is pure gold. You teach and go about explaining things in a "declarative" form that is very high level and greatly detailed! You really have great structure and everything makes perfect sense. Hope your next Udemy course can be a "real" full bootcamp of this caliber and depth.

@SwiftfulThinking 3 жыл бұрын

Wow, thank you Yoko! My next few courses are going to be free on KZfaq instead :) Thanks for watching.

@dr.craigcurphey4829 3 жыл бұрын

You're generating these videos faster than I can assimilate them. But don't worry - you're doing a great job and I will learn them all.

@SwiftfulThinking 3 жыл бұрын

Haha awesome! The videos build on each other, so I would definitely recommend watching them in order.

@AhmadShrif 3 жыл бұрын

It is very rare that I see such level of organization and clear explanation, please do not stop. I would love to see a Swift language course for beginners/intermediate/advanced levels in your channel, I am pretty sure you will rock it.

@SwiftfulThinking 3 жыл бұрын

Haha thanks for watching Ahmad!

@muhammadziaulqamar1753 10 ай бұрын

Love the way you teach. The best ever teacher I have in my entire life.

@fbcreativemedia 4 ай бұрын

Nick, I took some other intro courses to SwiftUI. Never really got the grasp of stacks until i saw this video. Thank you so much for the clear explanation.

@MrShumylo Жыл бұрын

Love every single video! Such a cool Bootcamp! Thanks a lot for doing a great job!

@JasonEyermann Жыл бұрын

I think you could have also mentioned that you can only place a max of 10 things in each stack. Because the error it gives you when you add 11 things is not clear and I spent hours trying to find out what was wrong. Anyway still an amazing video. All your vids are great. Explained so clearly. The best that I’ve found so far.

@jaleellawhorn7848 2 жыл бұрын

Thank you! I followed along in Xcode, I feel like a expert on stacks now, very informative. Best video on stacks I’ve ran across so far. Great job! 👍🏽 Highly grateful.

@amandadias2078 11 ай бұрын

Thank you so much for this bootcamp! you are a great teacher!!!

@olepetersen4460 3 жыл бұрын

Thanks again - I use backgrounds for the simpler elements and stacks to put them together on the screen.

@fre.helfer Жыл бұрын

I'm studying SwiftUI for a one month now and I know a lot of stuff, but I realized that I didn't learn some of the basic stuff like alignment an others, thinks that you teach very well!! I wish I had started to learn from you! Thanks

@ShowMeLova 7 ай бұрын

You are the best Nick! Thanks a lot

@Bryan-lu4du 6 ай бұрын

Thank you for explaining this in a way people like me can understand. I subscribed and look forward to learning more.

@krzysiek4795 2 жыл бұрын

Thanks for the videos. Well done!

@manzoorahmadfarmani6558 2 жыл бұрын

thanx for this course and background and overlay is easy to use.

@sergehulne Жыл бұрын

Very informative and well presented!

@leneil46 Жыл бұрын

These videos are great. Thank you so much

@kainerda2088 2 жыл бұрын

I can't thank you enough for this series. I don't understand at all why so few likes are given here. I had already gone through other introductions to Swift, but didn't really feel able to implement given layouts. Now after the first 10 episodes of your series, light comes into the dark. I still have a whopping 44 chapters ahead of me, which will probably be a kind of pressure fueling - but in a pleasant way, I'm really looking forward to it. Thanks again!

@SwiftfulThinking 2 жыл бұрын

Haha hi Kai! Thanks for the comment. Really glad you're enjoying. I can't wait to hear what you think as you get further into it 🥳

@youngdomsey 2 ай бұрын

I like how you show things and explain really well in which situations the things you are showing are used the right way in your opinion. For example the .background()/.overlay() vs. the ZStack. Great work!

@conorspalvieri5948 2 жыл бұрын

These videos are so helpful thank you so much!!!!!!

@JasonOoiTC 3 жыл бұрын

Thank you! Very well explained, super easy to understand :-)

@SwiftfulThinking 3 жыл бұрын

Thanks Jason!! :)

@georgerevell5643 Жыл бұрын

I used to use easy peasy but now junior az storyboard technique, now I'm learing this thanks to this great course.

@DannyBoy443 3 ай бұрын

The 3rd one, we'll keep it 100 lol. Nice

@NaveedGhalib 8 ай бұрын

awesome video. thanks!

@dsquared7100 3 жыл бұрын

Really great job on your videos and playlists! This is exactly what I needed as someone who was in the process of learning UIKit but decided to switch to over to SwiftUI. I could see you being one of the major go tos for iOS and Swift training in the future and the top answer when someone asks in a developer forum how they start learning iOS app development. Amazing content!

@SwiftfulThinking 3 жыл бұрын

Wow haha Thanks for the comment Darren! I'm really glad these videos are helping.

@Dragonboh1 Жыл бұрын

Dude, keep doing what you doing

@muhammadnasser2735 2 жыл бұрын

I don't have money now, but the first time I get the money, I will support you with everything I have You deserve more than this you are a hero

@SwiftfulThinking 2 жыл бұрын

😂 Haha thanks Mohammed!

@valerieokelly6224 2 жыл бұрын

Great video man !

@balarajan3110 3 жыл бұрын

Awesome videos boss

@magedmohmed4403 Жыл бұрын

Thank You , I want to Thank You very much , your explanation is very helpful , magic basics , magic explanation

@mafiaboy16 2 жыл бұрын

Hi Nick, i will go with both Thnx for the BootLesson it’s super

@SwiftfulThinking 2 жыл бұрын

Nice. Good luck Ronny!

@nomadeducator6684 Жыл бұрын

must have basics, thx man

@knowledgeispower4953 6 ай бұрын

clear understanding...😎thx bro

@AZMerf 3 жыл бұрын

Thank you so much for doing this. I might feel a little slow to you or those watching, meticulously going through all options is so helpful. Especially, this video. Using Stacks versus Overlays and Backgrounds is an important question. Yes you can use them interchangeably, sometimes, it important to understand the differences and the possible reasons why you might want to use one over the other.

@SwiftfulThinking 3 жыл бұрын

You are welcome Merrill! Let me know if you ever have any questions, I'm happy to help.

@JPkatukenda 2 жыл бұрын

Thank you nick, super video series

@SwiftfulThinking 2 жыл бұрын

Thanks Katukenda!

@kasunjayasekara3052 2 жыл бұрын

Thank you :) learned key points very quickly .

@SwiftfulThinking 2 жыл бұрын

Thanks my goal. Thanks for watching!

@JulienReszka Жыл бұрын

Very cool

@muhammadnasser2735 2 жыл бұрын

hey man this is really cool you are very creative (i think your channel will reach 1 million subscribers soon)

@SwiftfulThinking 2 жыл бұрын

LOL that's a long way away 🥲

@loudibird 11 ай бұрын

your a legend thanks

@JustThink2000 2 жыл бұрын

This was so helpful

@melroy36 9 ай бұрын

2 Years later still the best for a beginner

@alextoma402 10 ай бұрын

I hope this course eventually talks about responsive design. I've yet to find good resources for learning to make sure my UI looks good across all screen sizes

@user-ev3dl9zt8s 3 жыл бұрын

Thank you!!!

@SwiftfulThinking 3 жыл бұрын

You're welcome!

@bobbynwm Жыл бұрын

Super helpful! Thanks a lot Nick! I believe Stacks can be used where there is a complex layout with collection views, scrollable views, table views etc... and background and overlays at component level ( titles with transparent backgrounds, buttons and badges , menu items and so on )

@SwiftfulThinking Жыл бұрын

Exactly! Stacks are core to any SwiftUI screen

@bobbynwm Жыл бұрын

Thank you!

@DannyBoy443 3 ай бұрын

14:05 is looking like a high end NY piece of abstract art lol

@itsAJ819 2 жыл бұрын

1:23 Lucky I like your content 😆

@SwiftfulThinking 2 жыл бұрын

haha thanks AJ

@saweekmusic 4 ай бұрын

Idk if somebody noticed it or not, but if we use ZStack then the size of the circle is included into the ZStack. ZStack adapts its width and height to the items it has inside but with the background we can see that it includes into VStack only the number and not the circle, which makes setting up the spacing a bit more confusing. I think the background function is supposed to be used only when you want to make a background and when spacing doesn't matter and in all other cases, ZStack is the way to go.

@heshamabdo6024 Жыл бұрын

This channel made me love coding IOS

@mig12394 3 жыл бұрын

I prefer the second one , now that I know that background is a view !

@SwiftfulThinking 3 жыл бұрын

Haha, yea I love using backgrounds too! You just need to be make sure you are aligning all the frames correctly.

@m__link6499 3 жыл бұрын

Me too..

@yuchen3587 2 жыл бұрын

Respect bro 瑞思拜

@SwiftfulThinking 2 жыл бұрын

谢了，兄弟 !

@ostanjaffcompany173 3 жыл бұрын

ZStack is easier for me. But I use .background() modifier as well from time to time. Thanks for the video.

@SwiftfulThinking 3 жыл бұрын

Hi Ostan! Yea, ZStack is very easy to use. I find that the .background() code is a little cleaner/less chunky so I've been using it more and more. Thanks for watching!

@Stevesvideoshelf 2 жыл бұрын

I feel like ZStacks are more intuitive for stacking and backgrounds/Overlays for styling. Anyway, great lesson, as always!

@SwiftfulThinking 2 жыл бұрын

Yea I agree. I think as you keep coding you get a feel for which is better in which situation. An important difference is that the frame of the ZStack will be as large as the largest object inside. While if you have an object and add a background that is larger, the frame of the object will stay the same and only the background will have the larger frame!

@Stevesvideoshelf 2 жыл бұрын

@@SwiftfulThinking good to know. Thanks! 👍

@Hydatidosis 4 ай бұрын

I can't figure out what I've prefer: in both methods are deprecated (some)groundColor moving into Style, .frame is also change its appearance. But background looks so Sketch/Figma style so it is modern :)

@Chilldeck 11 ай бұрын

ZStacks for the win! Correct answer ;)

@JustThink2000 2 жыл бұрын

Is it true to say, the purpose of stacks is just like what we would find in css flex box - their purpose is to maintain uniformity on all screens?

@ryanlanigan417 8 ай бұрын

It looks as though the VStack is only tracking the frame for the Text("1") and not measuring off of the circle as well, which is my guess as to why there is a overlap of the circles at 19:44. Do I have that correct?