{"id":2717,"date":"2020-01-31T21:04:27","date_gmt":"2020-01-31T21:04:27","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2717"},"modified":"2026-03-21T22:01:25","modified_gmt":"2026-03-21T22:01:25","slug":"understanding-scrollview-and-building-a-carousel-ui","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/understanding-scrollview-and-building-a-carousel-ui\/","title":{"rendered":"Understanding ScrollView and Building a Carousel UI"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>This chapter draws on everything you learned how to do (and more) in the previous three, and leads you through the process of building a vertical (and later horizontal) image and text carousel.<\/p>\n\n\n\n<p>As you dive in, there are a few things to take note of:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>ScrollView<\/code> wraps any content to make it scrollable \u2014 use <code>ScrollView(.horizontal)<\/code> for a side-scrolling carousel.<\/li>\n\n\n\n<li>A <code>CardView<\/code> is a reusable struct defined in its own file; every place you call it \u2014 including <code>PreviewProvider<\/code> \u2014 must supply values for any variables it declares.<\/li>\n\n\n\n<li>&#8220;Refactoring&#8221; in this chapter means extracting hardcoded content into variables so the same <code>CardView<\/code> struct can be reused with different data \u2014 a pattern you&#8217;ll use repeatedly.<\/li>\n\n\n\n<li>The <code>PreviewProvider<\/code> struct calls your view struct to render a canvas preview; when the struct has parameters, the preview must pass matching values.<\/li>\n\n\n\n<li>Try to complete the full tutorial before downloading the finished file \u2014 the homework assignment is structurally similar and there is no download available for it.<\/li>\n<\/ul>\n\n\n\n<p><strong>Read Chapter 5: Understanding ScrollView and Building a Carousel UI in Mastering SwiftUI<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview This chapter draws on everything you learned how to do (and more) in the previous three, and leads you through the process of building a vertical (and later horizontal) image and text carousel. As you dive in, there are a few things to take note of: Key Takeaways Read Chapter 5: Understanding ScrollView and &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/understanding-scrollview-and-building-a-carousel-ui\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Understanding ScrollView and Building a Carousel UI<\/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-2717","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2717","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=2717"}],"version-history":[{"count":6,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2717\/revisions"}],"predecessor-version":[{"id":4173,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2717\/revisions\/4173"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}