{"id":1920,"date":"2020-11-03T19:50:38","date_gmt":"2020-11-03T19:50:38","guid":{"rendered":"https:\/\/sezeromer.com\/?p=1920"},"modified":"2023-03-04T13:23:12","modified_gmt":"2023-03-04T10:23:12","slug":"swiftui-horizontal-list","status":"publish","type":"post","link":"https:\/\/sezeromer.com\/en\/swiftui-horizontal-list\/","title":{"rendered":"SwiftUI Horizontal List"},"content":{"rendered":"<p>Hello friends. In this article, we will talk about how we can make a horizontal list with SwiftUI.<\/p>\n<p>First, we need to put a Scroll View to slide on the screen. Of course, we make a horizontal for it to slide sideways. Then we need to return with ForEach to throw an HStack in it and make a list. Then it is up to your own design.<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;swift&quot;,&quot;mime&quot;:&quot;text\/x-swift&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:true,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">\/\/\r\n\/\/  ContentView.swift\r\n\/\/  swiftui-horizontal-list\r\n\/\/\r\n\/\/  Created by Omer Sezer on 3.11.2020.\r\n\/\/\r\n\r\nimport SwiftUI\r\n\r\nstruct ContentView: View {\r\n    var body: some View {\r\n        VStack {\r\n            ScrollView(.horizontal, showsIndicators: false) {\r\n                HStack {\r\n                    ForEach(0..&lt;100) { num in\r\n                        HStack {\r\n                            Text(\"\\(num)\")\r\n                                .foregroundColor(.white)\r\n                        }\r\n                        .frame(width: 250, height: 120, alignment: .center)\r\n                        .padding()\r\n                        .background(Color.blue)\r\n                        .cornerRadius(16)\r\n                        .shadow(radius: 4)\r\n                    }\r\n                    .padding(.leading, 10)\r\n                }\r\n                \r\n            }\r\n            .frame(height: 200)\r\n        }\r\n    }\r\n}\r\n\r\nstruct ContentView_Previews: PreviewProvider {\r\n    static var previews: some View {\r\n        ContentView()\r\n    }\r\n}<\/pre>\n<\/div>\n<p>The screen output of the code above is as follows.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1921\" src=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-03-at-22.45.06-1024x560.png\" alt=\"\" width=\"640\" height=\"350\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-03-at-22.45.06-1024x560.png 1024w, https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-03-at-22.45.06-300x164.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-03-at-22.45.06-768x420.png 768w, https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-03-at-22.45.06-1536x840.png 1536w, https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-03-at-22.45.06.png 2032w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1923\" src=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2020\/11\/7.gif\" alt=\"\" width=\"304\" height=\"718\" \/><\/p>\n<p>If you have questions, you can reach by e-mail or comment. Good work.<\/p>","protected":false},"excerpt":{"rendered":"<p>Hello friends. In this article, we will talk about how we can make a horizontal list with SwiftUI. First, we need to put a Scroll View to slide on the screen. Of course, we make a horizontal for it to slide sideways. Then we need to return with ForEach to throw an HStack in it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1922,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[706],"tags":[749,750,753,115,457,751,752,707,566],"class_list":["post-1920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swiftui","tag-foreach","tag-horizontal","tag-horizontal-list","tag-ios","tag-list","tag-scroll","tag-scrollview","tag-swiftui","tag-view"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1920"}],"collection":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/comments?post=1920"}],"version-history":[{"count":3,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1920\/revisions"}],"predecessor-version":[{"id":2659,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1920\/revisions\/2659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media\/1922"}],"wp:attachment":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media?parent=1920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/categories?post=1920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/tags?post=1920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}