{"id":374221,"date":"2024-05-21T05:55:10","date_gmt":"2024-05-21T05:55:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=374221"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=374221","title":{"rendered":"<span>SwiftUI \u0443\u0440\u043e\u043a\u0438 (\u0447\u0430\u0441\u0442\u044c 9)<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/807589\/\" rel=\"noopener noreferrer nofollow\"><strong>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 8\u044e \u0447\u0430\u0441\u0442\u044c<\/strong><\/a><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b66\/c82\/cc1\/b66c82cc1101eeb0fe2f20af6dfdbfb5.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b66\/c82\/cc1\/b66c82cc1101eeb0fe2f20af6dfdbfb5.png\"\/><\/figure>\n<h4>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441 List, ForEach and Identifiable\u00a0<\/h4>\n<p>\u0412 UIKit \u0434\u043b\u044f iOS \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c &#8212; \u044d\u0442\u043e UITableView. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u043f\u044b\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c UIKit, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e table view \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0438\u043b\u0438 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0432 \u043b\u044e\u0431\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Instagram, Twitter, Reddit \u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<p>\u0412 SwiftUI \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f List, \u0430 \u043d\u0435 UITableView. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e UIKit, \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0443\u0441\u0438\u043b\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430. SwiftUI \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438, \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0443\u0441\u0438\u043b\u0438\u0439. \u041d\u0435 \u0432\u043e\u043b\u043d\u0443\u0439\u0442\u0435\u0441\u044c, \u0435\u0441\u043b\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c. \u0412\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0443\u0432\u0438\u0434\u0435\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u044b. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043c\u0430\u043a\u0435\u0442\u0430\u043c.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430<\/h4>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 Xcode \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0448\u0430\u0431\u043b\u043e\u043d \u00abApp\u00bb. \u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u0438\u043c\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 &#171;SwiftUIList&#187; (\u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0438\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435), \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/676\/a0b\/133\/676a0b133bee23735c195a586c3c6353.png\" width=\"724\" height=\"511\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/676\/a0b\/133\/676a0b133bee23735c195a586c3c6353.png\"\/><\/figure>\n<p>\u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0446\u0438\u044f &#171;SwiftUI&#187; \u0431\u044b\u043b\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Xcode \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434\u00a0 \u0432 \u0444\u0430\u0439\u043b\u0435 ContentView.swift. \u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 &#171;Hello World&#187; \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List { Text(\"\u041f\u0435\u0440\u0432\u044b\u0439\") Text(\"\u0412\u0442\u043e\u0440\u043e\u0439\") Text(\"\u0422\u0440\u0435\u0442\u0438\u0439\") Text(\"\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439\") } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/25e\/9fa\/12f\/25e9fa12f3ae9d55429e49cafcee4898.png\" width=\"1010\" height=\"663\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/25e\/9fa\/12f\/25e9fa12f3ae9d55429e49cafcee4898.png\"\/><\/figure>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435 \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 List, \u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>\u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0438\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c ForEach<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List { ForEach(1...4, id: \\.self) { index in Text(\"\u042f\u0447\u0435\u0439\u043a\u0430 \\(index)\") } } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/297\/b14\/614\/297b14614eac6d9e4734122856b0c670.png\" width=\"1475\" height=\"332\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/297\/b14\/614\/297b14614eac6d9e4734122856b0c670.png\"\/><\/figure>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0430 \u0432\u044c\u044e Text() \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 ForEach \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0446\u0438\u043a\u043b\u0443 \u043e\u0442 1 \u0434\u043e 4 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0432\u044c\u044e.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 List \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b ForEach \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0447\u0438\u0441\u0435\u043b \u043e\u0442 1 \u0434\u043e 4. \u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u0447\u0438\u0441\u043b\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 (id), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0432\u0435\u043d \u0441\u0430\u043c\u043e\u043c\u0443 \u0447\u0438\u0441\u043b\u0443 (self).<\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0438\u0437 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Text, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 &#171;\u042f\u0447\u0435\u0439\u043a\u0430&#187; \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430. \u042d\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u044f\u0447\u0435\u0435\u043a, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c, \u0443\u0431\u0440\u0430\u0432 \u00abindex in\u00bb<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List { ForEach(1...4, id: \\.self) { Text(\"\u042f\u0447\u0435\u0439\u043a\u0430 \\($0)\") } } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ac8\/349\/760\/ac8349760d15b751a06598808b0d28f2.png\" width=\"1448\" height=\"608\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ac8\/349\/760\/ac8349760d15b751a06598808b0d28f2.png\"\/><\/figure>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0435\u0449\u0435 \u0440\u0430\u0437 \u0438 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 ForEach, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a List \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List(1...4, id: \\.self) { Text(\"\u042f\u0447\u0435\u0439\u043a\u0430 \\($0)\") } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/718\/106\/6ff\/7181066ff45348ba76110cb27a790c46.png\" width=\"1463\" height=\"628\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/718\/106\/6ff\/7181066ff45348ba76110cb27a790c46.png\"\/><\/figure>\n<h4>\u0421\u043e\u0437\u0434\u0430\u0435\u043c List \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438<\/h4>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0432\u0435\u0449\u0430\u043c\u0438 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0442\u0435\u043a\u0441\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u043d\u0430 UIKit \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u0447\u0442\u043e \u0432\u0430\u043c \u0431\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 TableViewDelegate \u0438 TableViewDataSource, \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443, \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u043a\u043e\u0434\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432\u0437\u043b\u0435\u0442\u0435\u043b\u0430 \u0441 \u0442\u0435\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0432 \u043d\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430 SUI<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/p>\n<p><a href=\"https:\/\/disk.yandex.ru\/d\/F-K2tbi8HKbdcg\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/a><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u043a\u0430\u0447\u0430\u0435\u0442\u0435 \u0438 \u0440\u0430\u0437\u0430\u0440\u0445\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0435, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0438\u0445 \u0432 \u0430\u0441\u0441\u0435\u0442\u044b \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/43d\/ec6\/d64\/43dec6d6493a8a7c14b9703f7bf6e36c.png\" width=\"1800\" height=\"867\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/43d\/ec6\/d64\/43dec6d6493a8a7c14b9703f7bf6e36c.png\"\/><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u044c\u044e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">\/\/ \u041e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 - \u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \/\/ \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0438 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u043c\u0430 \u0443\u0440\u043e\u043a\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438, \u0430 \u043d\u0435 \u043a\u043e\u0434\u0441\u0442\u0430\u0439\u043b \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 var rockGroups = [\"The Beatles\", \"Rolling Stones\", \"Prince &amp; The Revolution\", \"Queen\",   \"Guns N' Roses\", \"AC:DC\", \"The Jimi Hendrix\", \"Led Zeppelin\", \"Bob Dylan\",   \"Joan Jett and the Blackhearts\", \"Pink Floyd\", \"Grateful Dead\", \"The Traveling Wilburys\",   \"Bruce Springsteen and The E Street Band\", \"Little Richard and The Upsetters\",   \"The Kinks\", \"Creedence Clearwater Revival\", \"The Band\", \"The Cure\",   \"Allman Brothers Band\"]<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0443\u043f\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u043c\u0435\u043d\u0430\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043d\u043e \u043f\u0440\u043e\u0448\u0443 \u0432\u0430\u0441 &#8212; \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a \u0432 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0432\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u043f\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e view \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435 \u0442\u0435\u043c\u0430 \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 &#8212; \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u044d\u0442\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0430 \u0441 \u0432\u0430\u043c\u0438 \u0446\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043d\u0430\u0448 List \u043d\u0435\u043a\u0438\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0 rockGroups \u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0435\u0435 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e indices, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u0440\u0430\u0437\u0443 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043f\u043b\u044e\u0441 \u043c\u0438\u043d\u0443\u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<pre><code class=\"swift\">var body: some View { List(rockGroups.indices, id: \\.self) { Image(rockGroups[$0]) } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/895\/0d4\/afc\/8950d4afc8b18139f25831744b4327e1.png\" width=\"1489\" height=\"656\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/895\/0d4\/afc\/8950d4afc8b18139f25831744b4327e1.png\"\/><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432\u0437\u043b\u0435\u0442\u0435\u043b\u0430 \u0438 \u0443\u0436\u0435 \u0434\u0430\u0436\u0435 \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u0441\u044f, \u0440\u0430\u0434\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0430 &#8212; \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 UIKit \u0438 \u0437\u0430\u0441\u0435\u043a\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043c \u043d\u0430 \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u043d\u0438\u043f\u0435\u0442\u044b.<\/p>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043d\u0430\u0448 UI, \u0432\u0435\u0434\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u0431\u044b\u043b\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code class=\"swift\">var body: some View { List(rockGroups.indices, id: \\.self) { index in HStack { Image(rockGroups[index]) .resizable() .frame(width: 80, height: 80) Text(\"\\(rockGroups[index])\") .font(.system(.title3)) .bold() } } .listStyle(.plain) }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3aa\/e86\/244\/3aae86244a24334cf7f4aa61316d19ed.png\" width=\"1506\" height=\"705\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3aa\/e86\/244\/3aae86244a24334cf7f4aa61316d19ed.png\"\/><\/figure>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0434\u0438\u043d \u0432 \u043e\u0434\u0438\u043d \u043a\u0430\u043a \u0432 UIKit \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e, \u0431\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u043a\u0443\u0432\u044b\u0440\u043a\u043e\u0432 \u0441 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u043c\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b 32 \u0441\u0442\u0440\u043e\u043a\u0435 .listStyle(.plain)<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f2f\/b4b\/0a5\/f2fb4b0a5daaf1a24af5bbb911f642f9.png\" width=\"509\" height=\"204\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f2f\/b4b\/0a5\/f2fb4b0a5daaf1a24af5bbb911f642f9.png\"\/><\/figure>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0443\u0440\u043e\u043a\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u044d\u0442\u043e\u0442 \u043a\u043e\u0434.<\/p>\n<p><strong>List(rockGroups.indices, id: \\.self) { index in &#8230; }<\/strong> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a (List), \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 <strong>rockGroups<\/strong>. <strong>rockGroups.indices<\/strong> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0434\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>rockGroups<\/strong>, \u0430 <strong>id: \\.self<\/strong> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c.<\/p>\n<p><strong>HStack { &#8230; }<\/strong> &#8212; \u044d\u0442\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0435\u043a (HStack), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p><strong>Image(rockGroups[index]) &#8230;<\/strong> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (Image) \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>rockGroups<\/strong> \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 <strong>index<\/strong>, <strong>.resizable()<\/strong> \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c, \u0430 <strong>.frame(width: 80, height: 80)<\/strong> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>Text(&#171;\\(rockGroups[index])&#187;) &#8230;<\/strong> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 (Text) \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>rockGroups<\/strong> \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 <strong>index<\/strong>. <strong>.font(.system(.title3))<\/strong> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u0430 <strong>.bold()<\/strong> \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0436\u0438\u0440\u043d\u044b\u043c.<\/p>\n<p><strong>.listStyle(.plain)<\/strong> &#8212; \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u044c \u0441\u043f\u0438\u0441\u043a\u0430 (List) \u0432 &#171;plain&#187;, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 RockGroup, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438 \u0432\u043d\u0435\u0441\u0438\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">struct RockGroup { var groupName: String var groupImageName: String }<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a5\/f8a\/9e5\/1a5f8a9e5dc25808649e8191545b7db1.png\" width=\"292\" height=\"137\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a5\/f8a\/9e5\/1a5f8a9e5dc25808649e8191545b7db1.png\"\/><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u043c.<\/p>\n<pre><code class=\"swift\">struct RockGroupData { static let data = [ RockGroup(groupName: \"The Beatles\", groupImageName: \"The Beatles\"), RockGroup(groupName: \"Rolling Stones\", groupImageName: \"Rolling Stones\"), RockGroup(groupName: \"Prince &amp; The Revolution\", groupImageName: \"Prince &amp; The Revolution\"), RockGroup(groupName: \"Queen\", groupImageName: \"Queen\"), RockGroup(groupName: \"Guns N' Roses\", groupImageName: \"Guns N' Roses\"), RockGroup(groupName: \"AC\/DC\", groupImageName: \"AC:DC\"), RockGroup(groupName: \"The Jimi Hendrix\", groupImageName: \"The Jimi Hendrix\"), RockGroup(groupName: \"Led Zeppelin\", groupImageName: \"Led Zeppelin\"), RockGroup(groupName: \"Bob Dylan\", groupImageName: \"Bob Dylan\"), RockGroup(groupName: \"Joan Jett and the Blackhearts\", groupImageName: \"Joan Jett and the Blackhearts\"), RockGroup(groupName: \"Pink Floyd\", groupImageName: \"Pink Floyd\"), RockGroup(groupName: \"Grateful Dead\", groupImageName: \"Grateful Dead\"), RockGroup(groupName: \"The Traveling Wilburys\", groupImageName: \"The Traveling Wilburys\"), RockGroup(groupName: \"Bruce Springsteen and The E Street Band\", groupImageName: \"Bruce Springsteen and The E Street Band\"), RockGroup(groupName: \"Little Richard and The Upsetters\", groupImageName: \"Little Richard and The Upsetters\"), RockGroup(groupName: \"The Kinks\", groupImageName: \"The Kinks\"), RockGroup(groupName: \"Creedence Clearwater Revival\", groupImageName: \"Creedence Clearwater Revival\"), RockGroup(groupName: \"The Band\", groupImageName: \"The Band\"), RockGroup(groupName: \"The Cure\", groupImageName: \"The Cure\"), RockGroup(groupName: \"Allman Brothers Band\", groupImageName: \"Allman Brothers Band\") ] }<\/code><\/pre>\n<p>\u041e\u043f\u044f\u0442\u044c \u0442\u0430\u043a\u0438 \u044f \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432\u0441\u0435 \u0438\u043c\u0435\u043d\u0430 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u044f \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u0447\u0442\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043d\u0435 \u0441\u0443\u043f\u0435\u0440 \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u0430 \u0433\u0440\u0443\u043f\u043f \u0443 \u043d\u0430\u0441 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e &#8212; \u043a \u0447\u0435\u043c\u0443 \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 RockGroup, \u043d\u043e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0438\u043c\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u044b \u0438\u043b\u0438 \u0447\u0435\u0433\u043e \u043b\u0438\u0431\u043e \u0435\u0449\u0435 \u0447\u0442\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0430 \u043d\u0430\u043c \u0441 \u0432\u0430\u043c\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7f2\/8c6\/5cb\/7f28c65cbfe42c2bbdb04fa06e192ccd.png\" width=\"1032\" height=\"557\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7f2\/8c6\/5cb\/7f28c65cbfe42c2bbdb04fa06e192ccd.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0432\u044c\u044e<\/p>\n<pre><code class=\"swift\">var rockGroups = RockGroupData.data<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a\u0430\u043a \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0441\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u043b \u0440\u0443\u0433\u0430\u0442\u044c\u0441\u044f, \u043e\u043d\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432\u0435\u0434\u044c \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u043e\u0434\u0430\u0435\u043c \u0435\u043c\u0443 \u043d\u0435 \u0441\u044b\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0446\u0435\u043b\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0438\u043f\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043f\u0430\u0441\u0430\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n<pre><code class=\"swift\">var body: some View { List(rockGroups, id: \\.groupName) { group in HStack { Image(group.groupImageName) .resizable() .frame(width: 80, height: 80) Text(\"\\(group.groupName)\") .font(.system(.title3)) .bold() } } .listStyle(.plain) }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0442\u0435\u043f\u0435\u0440\u044c \u0432 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 List \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u0448 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0440\u043e\u043a-\u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438 (\u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438) \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445 \u0443\u043a\u0430\u0437\u0430\u043b\u0430 .groupName, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043c\u043e\u0433\u043b\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u0433\u0440\u0443\u043f\u043f.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437 \u0432\u0430\u0441 \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0430 \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0441 \u044d\u0442\u0438\u043c id? \u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u0435\u043d \u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438\u0437-\u0437\u0430 \u043d\u0435\u0433\u043e, \u043d\u0443 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c, \u0442\u043e \u0447\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f?<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442, \u0430 \u043f\u043e\u0442\u043e\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c \u043f\u0440\u043e \u044d\u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 id<\/p>\n<p>\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0438\u043c\u044f \u0433\u0440\u0443\u043f\u043f\u044b Rolling Stones \u043d\u0430 The Beatles \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/298\/f9f\/0cf\/298f9f0cfac9b44b1164ad44e6539981.png\" width=\"1033\" height=\"579\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/298\/f9f\/0cf\/298f9f0cfac9b44b1164ad44e6539981.png\"\/><\/figure>\n<p>\u041d\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0432\u044c\u044e \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043c \u0441\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439? \u041a\u0430\u043a \u043e\u043d\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435? \u041a\u0430\u0436\u0435\u0442\u0441\u044f \u0447\u0442\u043e \u043f\u043e \u043b\u043e\u0433\u0438\u043a\u0435 \u0432\u0435\u0449\u0435\u0439 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c \u044d\u0442\u0443 \u0433\u0440\u0443\u043f\u043f\u0443 \u0438\u0437 List \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2c7\/c65\/722\/2c7c65722231de3e63af59afc1469c32.png\" width=\"1475\" height=\"625\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2c7\/c65\/722\/2c7c65722231de3e63af59afc1469c32.png\"\/><\/figure>\n<p>\u00a0\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0434\u0432\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0411\u0438\u0442\u043b\u0437, \u043f\u0440\u0438\u0447\u0435\u043c \u0434\u0430\u0436\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430\u044f, \u043a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0434\u0430 &#8212; id \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0435\u0441\u043b\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c.<\/p>\n<p>\u0412\u0435\u0440\u043d\u0438\u0442\u0435 \u043f\u043e\u043a\u0430 Rolling Stones \u043d\u0430 \u0441\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0430 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c \u043f\u0440\u043e id<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0441\u043f\u0438\u0441\u043e\u043a, SwiftUI \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a, SwiftUI \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a, \u0430 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e SwiftUI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>id<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u0434\u0435\u043a\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043c\u044b \u0440\u0430\u043d\u0435\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u043b\u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e! \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>id<\/strong> \u044f\u0432\u043d\u043e, SwiftUI \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u044f\u0432\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>id<\/strong> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<p>\u0421 id \u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0435\u0433\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u043d\u043e \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438? \u0412\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 UUID<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/631\/a0d\/b0a\/631a0db0a83d5960697c546bfa829869.png\" width=\"400\" height=\"231\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/631\/a0d\/b0a\/631a0db0a83d5960697c546bfa829869.png\"\/><\/figure>\n<p>\u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0437 \u0432 \u0433\u043e\u0434 \u0438 \u0445\u044d\u0448 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0434\u0430\u0435\u0442 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441 UUID \u0432\u044b \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 100% \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<pre><code class=\"swift\">struct RockGroup: Identifiable { var id = UUID() var groupName: String var groupImageName: String } <\/code><\/pre>\n<p>\u0412\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0443\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b RockGroup \u043f\u043e\u0434 Identifiable, \u044d\u0442\u043e \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043c \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0432\u0438\u0434\u0435\u043b\u0430, \u0447\u0442\u043e \u043d\u0430\u0448 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0435\u0439 \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u043c\u0435\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 id, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e id<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/20c\/3a5\/d71\/20c3a5d710101a32e3486f1f816b7422.png\" width=\"478\" height=\"249\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/20c\/3a5\/d71\/20c3a5d710101a32e3486f1f816b7422.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u043d\u0430\u0448 ContentView \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439.<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in HStack { Image(group.groupImageName) .resizable() .frame(width: 80, height: 80) Text(\"\\(group.groupName)\") .font(.system(.title3)) .bold() } } .listStyle(.plain) } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5d8\/7f3\/fb4\/5d87f3fb44f2e757017b10ebfaff73cb.png\" width=\"1478\" height=\"617\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5d8\/7f3\/fb4\/5d87f3fb44f2e757017b10ebfaff73cb.png\"\/><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e (rockGrups) \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043d\u0430 Identifiable<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u043a\u043e\u0434\u0430 \u0432\u0435\u0434\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u043b\u0443\u0447\u0448\u0435 \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u043a\u043e\u0434\u0430 \u0432\u043c\u0435\u0441\u0442\u043e 2\u0443\u0445. \u041d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440 \u043c\u044b\u0448\u0438 \u043d\u0430 HStack \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 ExtractSubview, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u0432\u044c\u044e \u0432 RockCell<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9e8\/e97\/afc\/9e8e97afc04c63994c83d26527e6c8c3.png\" width=\"706\" height=\"613\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9e8\/e97\/afc\/9e8e97afc04c63994c83d26527e6c8c3.png\"\/><\/figure>\n<pre><code class=\"swift\">struct RockCell: View { var body: some View { HStack { Image(group.groupImageName) .resizable() .frame(width: 80, height: 80) Text(\"\\(group.groupName)\") .font(.system(.title3)) .bold() } } }<\/code><\/pre>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u0430\u0448\u0430 \u044f\u0447\u0435\u0439\u043a\u0430 \u0440\u0443\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043e \u043a\u0430\u043a\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435 \u0438\u0434\u0435\u0442 \u0440\u0435\u0447\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043d\u0430\u0448\u0443 \u044f\u0447\u0435\u0439\u043a\u0443.<\/p>\n<pre><code class=\"swift\">struct RockCell: View { var group: RockGroup  var body: some View { HStack { Image(group.groupImageName) .resizable() .frame(width: 80, height: 80) Text(\"\\(group.groupName)\") .font(.system(.title3)) .bold() } } }<\/code><\/pre>\n<p>\u0418 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a ContentView \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in RockCell(group: group) } .listStyle(.plain) } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/007\/1e0\/c71\/0071e0c71da0c4d1731ad9bc6ff83e97.png\" width=\"1483\" height=\"594\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/007\/1e0\/c71\/0071e0c71da0c4d1731ad9bc6ff83e97.png\"\/><\/figure>\n<p>\u0412\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u044f\u0447\u0435\u0439\u043a\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b List<\/h4>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044f \u0441 \u0441\u0435\u0440\u043e\u0433\u043e \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 .listRowSeparatorTint<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in RockCell(group: group) .listRowSeparatorTint(.red) }  .listStyle(.plain) } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/179\/ab6\/77d\/179ab677d9d3fe5ff1b2c75d30cf0b98.png\" width=\"1467\" height=\"637\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/179\/ab6\/77d\/179ab677d9d3fe5ff1b2c75d30cf0b98.png\"\/><\/figure>\n<p>\u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0435\u0439? \u042d\u0442\u043e \u0442\u043e\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in RockCell(group: group) .listRowSeparator(.hidden) }  .listStyle(.plain) } }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0432 background \u043d\u0430\u0448\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0442\u043e\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430. .listRowBackground<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in RockCell(group: group) .listRowBackground(Color.red) .listRowSeparatorTint(.blue) }  .listStyle(.plain) } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8a4\/42b\/6a1\/8a442b6a1ffeec93dba193bbb00f8cee.png\" width=\"1459\" height=\"614\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8a4\/42b\/6a1\/8a442b6a1ffeec93dba193bbb00f8cee.png\"\/><\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043d\u0430\u0448\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 &#8212; .listRowInsets<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in RockCell(group: group) .listRowBackground(Color.red) .listRowSeparatorTint(.blue) .listRowInsets(EdgeInsets(top: 90, leading: 50, bottom: 90, trailing: 90)) }  .listStyle(.plain) } }<\/code><\/pre>\n<p>\u041d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043d\u0435 \u0441\u0430\u043c\u044b\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438, \u043d\u0430\u043c \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c &#8212; \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441 \u0447\u0435\u043c \u043b\u0438\u0447\u043d\u043e \u044f \u043f\u043e\u043a\u0430 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043c\u043e\u0433\u0443 \u0441\u043c\u0438\u0440\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0431\u0430\u0440 \u0431\u0435\u043b\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442 \u0432\u0441\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 List \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 ignoresSafeArea() \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0430.<\/p>\n<p>\u041c\u043e\u0439 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var rockGroups = RockGroupData.data  var body: some View { List(rockGroups) { group in RockCell(group: group) .listRowBackground(Color.red) .listRowSeparatorTint(.blue) .listRowInsets(EdgeInsets(top: 20, leading: 50, bottom: 20, trailing: 50)) } .ignoresSafeArea() .listStyle(.plain) } }  #Preview {     ContentView() }  struct RockCell: View { var group: RockGroup  var body: some View { HStack { Image(group.groupImageName) .resizable() .frame(width: 180, height: 180) Text(\"\\(group.groupName)\") .font(.system(.title3)) .bold() } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0dd\/19a\/635\/0dd19a635f8d6cb08b77c85967aa2cc1.png\" width=\"1459\" height=\"629\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0dd\/19a\/635\/0dd19a635f8d6cb08b77c85967aa2cc1.png\"\/><\/figure>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0434\u043e\u0448\u043b\u0430 \u043a \u043a\u043e\u043d\u0446\u0443, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0430\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0438\u0437 \u043a\u0430\u043a\u043e\u0433\u043e \u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b \u0431\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u0439\u0442\u0438 \u0432 AppStore \u043d\u0430 iPhone \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u00ab\u0421\u0435\u0433\u043e\u0434\u043d\u044f\u00bb<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d4d\/7dd\/e31\/d4d7dde31ddcf803e9fad3ab0995e416.jpg\" width=\"1284\" height=\"2637\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d4d\/7dd\/e31\/d4d7dde31ddcf803e9fad3ab0995e416.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041e\u043d\u0430 \u043a\u0430\u043a \u0440\u0430\u0437 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0437\u043d\u0430\u0447\u0438\u0442 \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0438\u043b\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 List.<\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0441 \u0432\u0430\u043c\u0438 \u0432 \u0445\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e.<\/p>\n<p>\u041a\u0430\u043a \u0438 \u043f\u0440\u0435\u0436\u0434\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043c\u043e\u0439 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b &#8212; <a href=\"https:\/\/t.me\/swiftexplorer\" rel=\"noopener noreferrer nofollow\">https:\/\/t.me\/swiftexplorer<\/a><\/p>\n<p>\u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c \u0438 \u043b\u0430\u0439\u043a\u0430\u043c!<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/809237\/\"> https:\/\/habr.com\/ru\/articles\/809237\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/807589\/\" rel=\"noopener noreferrer nofollow\"><strong>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 8\u044e \u0447\u0430\u0441\u0442\u044c<\/strong><\/a><\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441 List, ForEach and Identifiable\u00a0<\/h4>\n<p>\u0412 UIKit \u0434\u043b\u044f iOS \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c &#8212; \u044d\u0442\u043e UITableView. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u043f\u044b\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c UIKit, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e table view \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0438\u043b\u0438 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0432 \u043b\u044e\u0431\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Instagram, Twitter, Reddit \u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<p>\u0412 SwiftUI \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f List, \u0430 \u043d\u0435 UITableView. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e UIKit, \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0443\u0441\u0438\u043b\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430. SwiftUI \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438, \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0443\u0441\u0438\u043b\u0438\u0439. \u041d\u0435 \u0432\u043e\u043b\u043d\u0443\u0439\u0442\u0435\u0441\u044c, \u0435\u0441\u043b\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c. \u0412\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0443\u0432\u0438\u0434\u0435\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u044b. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043c\u0430\u043a\u0435\u0442\u0430\u043c.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430<\/h4>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 Xcode \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0448\u0430\u0431\u043b\u043e\u043d \u00abApp\u00bb. \u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u0438\u043c\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 &#171;SwiftUIList&#187; (\u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0438\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435), \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0446\u0438\u044f &#171;SwiftUI&#187; \u0431\u044b\u043b\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Xcode \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434\u00a0 \u0432 \u0444\u0430\u0439\u043b\u0435 ContentView.swift. \u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 &#171;Hello World&#187; \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List { Text(\"\u041f\u0435\u0440\u0432\u044b\u0439\") Text(\"\u0412\u0442\u043e\u0440\u043e\u0439\") Text(\"\u0422\u0440\u0435\u0442\u0438\u0439\") Text(\"\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439\") } } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435 \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 List, \u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>\u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0438\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c ForEach<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List { ForEach(1...4, id: \\.self) { index in Text(\"\u042f\u0447\u0435\u0439\u043a\u0430 \\(index)\") } } } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0430 \u0432\u044c\u044e Text() \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 ForEach \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0446\u0438\u043a\u043b\u0443 \u043e\u0442 1 \u0434\u043e 4 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0432\u044c\u044e.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 List \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b ForEach \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0447\u0438\u0441\u0435\u043b \u043e\u0442 1 \u0434\u043e 4. \u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u0447\u0438\u0441\u043b\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 (id), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0432\u0435\u043d \u0441\u0430\u043c\u043e\u043c\u0443 \u0447\u0438\u0441\u043b\u0443 (self).<\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0438\u0437 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Text, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 &#171;\u042f\u0447\u0435\u0439\u043a\u0430&#187; \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430. \u042d\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u044f\u0447\u0435\u0435\u043a, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c, \u0443\u0431\u0440\u0430\u0432 \u00abindex in\u00bb<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List { ForEach(1...4, id: \\.self) { Text(\"\u042f\u0447\u0435\u0439\u043a\u0430 \\($0)\") } } } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0435\u0449\u0435 \u0440\u0430\u0437 \u0438 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 ForEach, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a List \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { List(1...4, id: \\.self) { Text(\"\u042f\u0447\u0435\u0439\u043a\u0430 \\($0)\") } } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<h4>\u0421\u043e\u0437\u0434\u0430\u0435\u043c List \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438<\/h4>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0432\u0435\u0449\u0430\u043c\u0438 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0442\u0435\u043a\u0441\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u043d\u0430 UIKit \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u0447\u0442\u043e \u0432\u0430\u043c \u0431\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 TableViewDelegate \u0438 TableViewDataSource, \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443, \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u043a\u043e\u0434\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432\u0437\u043b\u0435\u0442\u0435\u043b\u0430 \u0441 \u0442\u0435\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0432 \u043d\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430 SUI<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/p>\n<p><a href=\"https:\/\/disk.yandex.ru\/d\/F-K2tbi8HKbdcg\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/a><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u043a\u0430\u0447\u0430\u0435\u0442\u0435 \u0438 \u0440\u0430\u0437\u0430\u0440\u0445\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0435, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0438\u0445 \u0432 \u0430\u0441\u0441\u0435\u0442\u044b \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u044c\u044e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">\/\/ \u041e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 - \u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \/\/ \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0438 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u043c\u0430 \u0443\u0440\u043e\u043a\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438, \u0430 \u043d\u0435 \u043a\u043e\u0434\u0441\u0442\u0430\u0439\u043b \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 var rockGroups = [\"The Beatles\", \"Rolling Stones\", \"Prince &amp; The Revolution\", \"Queen\",   \"Guns N' Roses\", \"AC:DC\", \"The Jimi Hendrix\", \"Led Zeppelin\", \"Bob Dylan\",   \"Joan Jett and the Blackhearts\", \"Pink Floyd\", \"Grateful Dead\", \"The Traveling Wilburys\",   \"Bruce Springsteen and The E Street Band\", \"Little Richard and The Upsetters\",   \"The Kinks\", \"Creedence Clearwater Revival\", \"The Band\", \"The Cure\",   \"Allman Brothers Band\"]<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0443\u043f\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u043c\u0435\u043d\u0430\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043d\u043e \u043f\u0440\u043e\u0448\u0443 \u0432\u0430\u0441 &#8212; \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a \u0432 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0432\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u043f\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e view \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435 \u0442\u0435\u043c\u0430 \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 &#8212; \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u044d\u0442\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0430 \u0441 \u0432\u0430\u043c\u0438 \u0446\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043d\u0430\u0448 List \u043d\u0435\u043a\u0438\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0 rockGroups \u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0435\u0435 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e indices, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u0440\u0430\u0437\u0443 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043f\u043b\u044e\u0441 \u043c\u0438\u043d\u0443\u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<pre><code class=\"swift\">var body: some View { List(rockGroups.indices, id: \\.self) { Image(rockGroups[$0]) } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0432\u0437\u043b\u0435\u0442\u0435\u043b\u0430 \u0438 \u0443\u0436\u0435 \u0434\u0430\u0436\u0435 \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u0441\u044f, \u0440\u0430\u0434\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0430 &#8212; \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 UIKit \u0438 \u0437\u0430\u0441\u0435\u043a\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043c \u043d\u0430 \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u043d\u0438\u043f\u0435\u0442\u044b.<\/p>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043d\u0430\u0448 UI, \u0432\u0435\u0434\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u0431\u044b\u043b\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code class=\"swift\">var body: some View { List(rockGroups.indices, id: \\.self) { index in HStack { Image(rockGroups[index]) .resizable() .frame(width: 80, height: 80) Text(\"\\(rockGroups[index])\") .font(.system(.title3)) .bold() } } .listStyle(.plain) }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0434\u0438\u043d \u0432 \u043e\u0434\u0438\u043d \u043a\u0430\u043a \u0432 UIKit \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e, \u0431\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u043a\u0443\u0432\u044b\u0440\u043a\u043e\u0432 \u0441 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u043c\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b 32 \u0441\u0442\u0440\u043e\u043a\u0435 .listStyle(.plain)<\/p>\n<figure class=\"\"><\/figure>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0443\u0440\u043e\u043a\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u044d\u0442\u043e\u0442 \u043a\u043e\u0434.<\/p>\n<p><strong>List(rockGroups.indices, id: \\.self) { index in &#8230; }<\/strong> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a (List), \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 <strong>rockGroups<\/strong>. <strong>rockGroups.indices<\/strong> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0434\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>rockGroups<\/strong>, \u0430 <strong>id: \\.self<\/strong> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c.<\/p>\n<p><strong>HStack { &#8230; }<\/strong> &#8212; \u044d\u0442\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0435\u043a (HStack), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p><strong>Image(rockGroups[index]) &#8230;<\/strong> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (Image) \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>rockGroups<\/strong> \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 <strong>index<\/strong>, <strong>.resizable()<\/strong> \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c, \u0430 <strong>.frame(width: 80, height: 80)<\/strong> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>Text(&#171;\\(rockGroups[index])&#187;) &#8230;<\/strong> &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 (Text) \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>rockGroups<\/strong> \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 <strong>index<\/strong>. <strong>.font(.system(.title3))<\/strong> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u0430 <strong>.bold()<\/strong> \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0436\u0438\u0440\u043d\u044b\u043c.<\/p>\n<p><strong>.listStyle(.plain)<\/strong> &#8212; \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u044c \u0441\u043f\u0438\u0441\u043a\u0430 (List) \u0432 &#171;plain&#187;, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 RockGroup, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438 \u0432\u043d\u0435\u0441\u0438\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">struct RockGroup { var groupName: String var groupImageName: String }<\/code><\/pre>\n<figure class=\"\"><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u043c.<\/p>\n<pre><code class=\"swift\">struct RockGroupData { static let data = [ RockGroup(groupName: \"The Beatles\", groupImageName: \"The Beatles\"), RockGroup(groupName: \"Rolling Stones\", groupImageName: \"Rolling Stones\"), RockGroup(groupName: \"Prince &amp; The Revolution\", groupImageName: \"Prince &amp; The Revolution\"), RockGroup(groupName: \"Queen\", groupImageName: \"Queen\"), RockGroup(groupName: \"Guns N' Roses\", groupImageName: \"Guns N' Roses\"), RockGroup(groupName: \"AC\/DC\", groupImageName: \"AC:DC\"), RockGroup(groupName: \"The Jimi Hendrix\", groupImageName: \"The Jimi Hendrix\"), RockGroup(groupName: \"Led Zeppelin\", groupImageName: \"Led Zeppelin\"), RockGroup(groupName: \"Bob Dylan\", groupImageName: \"Bob Dylan\"), RockGroup(groupName: \"Joan Jett and the Blackhearts\", groupImageName: \"Joan Jett and the Blackhearts\"), RockGroup(groupName: \"Pink Floyd\", groupImageName: \"Pink Floyd\"), RockGroup(groupName: \"Grateful Dead\", groupImageName: \"Grateful Dead\"), RockGroup(groupName: \"The Traveling Wilburys\", groupImageName: \"The Traveling Wilburys\"), RockGroup(groupName: \"Bruce Springsteen and The E Street Band\", groupImageName: \"Bruce Springsteen and The E Street Band\"), RockGroup(groupName: \"Little Richard and The Upsetters\", groupImageName: \"Little Richard and The Upsetters\"), RockGroup(groupName: \"The Kinks\", groupImageName: \"The Kinks\"), RockGroup(groupName: \"Creedence Clearwater Revival\", groupImageName: \"Creedence Clearwater Revival\"), RockGroup(groupName: \"The Band\", groupImageName: \"The Band\"), RockGroup(groupName: \"The Cure\", groupImageName: \"The Cure\"), RockGroup(groupName: \"Allman Brothers Band\", groupImageName: \"Allman Brothers Band\") ] }<\/code><\/pre>\n<p>\u041e\u043f\u044f\u0442\u044c \u0442\u0430\u043a\u0438 \u044f \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432\u0441\u0435 \u0438\u043c\u0435\u043d\u0430 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u044f \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u0447\u0442\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043d\u0435 \u0441\u0443\u043f\u0435\u0440 \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u0430 \u0433\u0440\u0443\u043f\u043f \u0443 \u043d\u0430\u0441 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e &#8212; \u043a \u0447\u0435\u043c\u0443 \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 RockGroup, \u043d\u043e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0438\u043c\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u044b \u0438\u043b\u0438 \u0447\u0435\u0433\u043e \u043b\u0438\u0431\u043e \u0435\u0449\u0435 \u0447\u0442\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0430 \u043d\u0430\u043c \u0441 \u0432\u0430\u043c\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-374221","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=374221"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374221\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=374221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=374221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}