{"id":2715,"date":"2020-01-31T21:00:44","date_gmt":"2020-01-31T21:00:44","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2715"},"modified":"2026-03-21T22:01:25","modified_gmt":"2026-03-21T22:01:25","slug":"layout-user-interface-with-stacks","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/layout-user-interface-with-stacks\/","title":{"rendered":"Layout User Interface with Stacks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n<p>This chapter introduces Stacks, your main tool for organizing elements on a view.\u00a0 You had a brief preview of how Stacks work in our first lesson. However, in this chapter, Ng unpacks the details behind Horizontal Stacks (HStack), Vertical Stacks (VStack), and three-dimensional stacks (ZStacks). In this chapter, you will also learn how to &#8220;extract subviews,&#8221; as a way to keep your code more organized and tidy. <\/p><p>As with the previous lessons, these are fundamental concepts that will help serve as the foundation for the rest of your app dev journey. Be sure you have a thorough understanding of these concepts before proceeding onward. <\/p><p>Lastly, you&#8217;ll see that Chapter 4 includes a couple of exercises in the text book. While you&#8217;re not required to submit anything for these exercises, I <strong>heavily<\/strong> encourage you to complete them. Learning by doing is undoubtedly the best way to learn application and absorb the material we&#8217;re covering. Therefore, the more practice to apply and test your knowledge, the better!<\/p><p><strong>Read Chapter 4: Layout User Interfaces with Stacks in Mastering SwiftUI<\/strong><\/p>\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>HStack arranges views horizontally, VStack arranges them vertically, and ZStack layers them along the depth axis \u2014 these three are the backbone of every SwiftUI layout.<\/li>\n\n\n<li><code>Spacer()<\/code> pushes adjacent views apart by filling all available space in the current stack direction.<\/li>\n\n\n<li>Stacks are freely nestable and composable \u2014 complex layouts are built from stacks inside stacks.<\/li>\n\n\n<li>&#8220;Extracting subviews&#8221; moves a block of view code into its own named struct, keeping <code>ContentView<\/code> readable and your code organized.<\/li>\n\n\n<li>Complete every in-chapter exercise \u2014 Stacks are the foundation that all future lessons build on.<\/li>\n\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview This chapter introduces Stacks, your main tool for organizing elements on a view.\u00a0 You had a brief preview of how Stacks work in our first lesson. However, in this chapter, Ng unpacks the details behind Horizontal Stacks (HStack), Vertical Stacks (VStack), and three-dimensional stacks (ZStacks). In this chapter, you will also learn how to &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/layout-user-interface-with-stacks\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Layout User Interface with Stacks<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2715","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=2715"}],"version-history":[{"count":6,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2715\/revisions"}],"predecessor-version":[{"id":4174,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2715\/revisions\/4174"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}