{"id":1916,"date":"2020-11-30T20:27:32","date_gmt":"2020-11-30T20:27:32","guid":{"rendered":"https:\/\/sezeromer.com\/?p=1916"},"modified":"2023-03-04T13:23:53","modified_gmt":"2023-03-04T10:23:53","slug":"swiftui-grid-list","status":"publish","type":"post","link":"https:\/\/sezeromer.com\/en\/swiftui-grid-list\/","title":{"rendered":"SwiftUI Grid List"},"content":{"rendered":"

Hello friends. In this article, we’ll look at how to create a split list into two or more numbers with SwiftUI. In my previous article, we talked about how to create a list. You can find it here<\/a>. In this article, we will develop this a little more on the forehead.<\/p>\n

First I add a Navigation View at the top. I add Scroll View into it. The reason for this is that sometimes the data may be too much or the user can use a phone with a small screen. We need to consider these and make sure that the screen can scroll up or down. We have added a Scroll View to the outermost for this. Then we need to divide the screen into grids. Here it is important how much we will divide the screen. I will divide it into four for an example. You can still change it according to your own design. First I add LazyVGrid. This means that the grid that can move vertically is actually. When you create such a controller, it tells us how much we will divide and what will happen in it. As you can see here, he wants an array of GridItem type for columns from us. Since I will divide it into 4 columns here, I am creating 4 GridItems. I will write an article with more information about GridItem soon. You can also follow him here.<\/p>\n

After creating 4 GridItems, I go through the content section. You can use a lot of controllers here. I am giving an example, if you want to put pictures that change according to the size of the screen, you can create 4 Images. He places them on the screen in their order. Here I am doing it with ForEach as there may be too many variables depending on the list. You can also submit a model here. For simplicity, I turned with for and put only Text on the screen. You can fill the content as you wish.<\/p>\n

\n
\/\/\r\n\/\/  ContentView.swift\r\n\/\/  swiftui_gridlist\r\n\/\/\r\n\/\/  Created by Omer Sezer on 29.10.2020.\r\n\/\/\r\n\r\nimport SwiftUI\r\n\r\nstruct ContentView: View {\r\n    var body: some View {\r\n        NavigationView {\r\n            ScrollView {\r\n                LazyVGrid(columns: [\r\n                    GridItem(.flexible(minimum: 80, maximum: 100)),\r\n                    GridItem(.flexible(minimum: 80, maximum: 100)),\r\n                    GridItem(.flexible(minimum: 80, maximum: 100)),\r\n                    GridItem(.flexible(minimum: 80, maximum: 100))\r\n                ], content: \/*@START_MENU_TOKEN@*\/{\r\n                    ForEach(0..<100, id: \\.self) { num in\r\n                        VStack {\r\n                            Text(\"\\(num)\")\r\n                                .foregroundColor(.white)\r\n                        }\r\n                        .padding()\r\n                        .background(Color.black)\r\n                    }\r\n                }\/*@END_MENU_TOKEN@*\/)\r\n            }\r\n            .navigationTitle(\"Grid List\")\r\n            .navigationBarTitleDisplayMode(.inline)\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>\n
If you have questions, you can reach by e-mail or comment. Good work.<\/p>","protected":false},"excerpt":{"rendered":"
Hello friends. In this article, we’ll look at how to create a split list into two or more numbers with SwiftUI. In my previous article, we talked about how to create a list. You can find it here. In this article, we will develop this a little more on the forehead. First I add a […]<\/p>\n","protected":false},"author":1,"featured_media":1918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[327,706],"tags":[748,132,152,746,249,328,707,747],"class_list":["post-1916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swift","category-swiftui","tag-dlexible","tag-grid","tag-image","tag-lazyvgrid","tag-liste","tag-swift","tag-swiftui","tag-vgrid"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1916"}],"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=1916"}],"version-history":[{"count":3,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1916\/revisions"}],"predecessor-version":[{"id":2660,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1916\/revisions\/2660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media\/1918"}],"wp:attachment":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media?parent=1916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/categories?post=1916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/tags?post=1916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}