{"id":443459,"date":"2024-12-26T08:53:52","date_gmt":"2024-12-26T08:53:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443459"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443459","title":{"rendered":"<span>SwiftUI: \u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0435 containerRelativeFrame (\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435)<\/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>\u041d\u0430 WWDC 2023 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Apple \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>containerRelativeFrame<\/code> \u0434\u043b\u044f SwiftUI. \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>containerRelativeFrame<\/code>, \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0443\u044e \u0440\u0435\u043f\u043b\u0438\u043a\u0443 <code>containerRelativeFrame<\/code> \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 SwiftUI.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/containerrelativeframe(_:alignment:)\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> Apple containerRelativeFrame \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><em>\u041f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0444\u0440\u0435\u0439\u043c, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/em><\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0438\u0440\u0438\u043d\u044b \u0438\/\u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445:<\/em><\/p>\n<ul>\n<li>\n<p>\u041e\u043a\u043d\u043e, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043d\u0430 iPadOS \u0438\u043b\u0438 macOS, \u0438\u043b\u0438 \u044d\u043a\u0440\u0430\u043d \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 iOS.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043b\u043e\u043d\u043a\u0430 NavigationSplitView<\/p>\n<\/li>\n<li>\n<p>NavigationStack<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 TabView<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 ScrollView \u0438\u043b\u0438 List<\/p>\n<\/li>\n<\/ul>\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0435, \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u0432\u044b\u0448\u0435, \u0437\u0430 \u0432\u044b\u0447\u0435\u0442\u043e\u043c \u043b\u044e\u0431\u044b\u0445 \u0432\u0441\u0442\u0430\u0432\u043e\u043a \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443.<\/em><\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u0434\u043e\u0432, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430. \u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b, \u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u043f\u0438\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438:<\/p>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>containerRelativeFrame<\/code>, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438\u0449\u0435\u0442 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432. \u041e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u043e\u043d \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 frame, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b<\/h2>\n<p><code>containerRelativeFrame<\/code> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0442\u0440\u0438 \u0432\u0438\u0434\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c \u0432 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435:<\/p>\n<p><strong>1) \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f:<\/strong> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440, \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043e\u043d \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<pre><code>public func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center) -&gt; some View<\/code><\/pre>\n<p><strong>2) \u0412\u0435\u0440\u0441\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438:<\/strong> \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0445\u0432\u0430\u0442\u0438\u0442\u044c, \u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043e\u0441\u044f\u043c. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code>public func containerRelativeFrame(_ axes: Axis.Set, count: Int, span: Int = 1, spacing: CGFloat, alignment: Alignment = .center) -&gt; some View<\/code><\/pre>\n<p><strong>3) \u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f:<\/strong> \u042d\u0442\u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043c\u0430\u043a\u0435\u0442\u0443.<\/p>\n<pre><code>public func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center, _ length: @escaping (CGFloat, Axis) -&gt; CGFloat) -&gt; some View<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043c\u043e\u0449\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443.<\/p>\n<h2>\u041f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u0445<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0433\u043b\u0443\u0431\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 <code>containerRelativeFrame<\/code>, \u043c\u044b \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439, \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0432 \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438.<\/p>\n<h2>\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432<\/h2>\n<p>\u0412 SwiftUI, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>frame<\/code>, \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043e\u0441\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437 <code>frame<\/code>.<\/p>\n<pre><code class=\"swift\">VStack {   Rectangle()     .frame(width: 200, height: 200)     \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f     ... } .frame(width: 400, height: 500)<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430 iPhone, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0441\u043e\u0442\u0430 <code>Rectangle<\/code> \u0431\u044b\u043b\u0430 \u0440\u0430\u0432\u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443:<\/p>\n<pre><code class=\"swift\">var screenAvailableHeight: CGFloat \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u0430\u043a\u0438\u043c-\u043b\u0438\u0431\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c  VStack {   Rectangle()     .frame(width: 200, height: screenHeight \/ 2)     \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f     ... } .frame(width: 400, height: 500)<\/code><\/pre>\n<p>\u0414\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <code>containerRelativeFrame<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0442\u0438\u043f\u0430 <code>GeometryReader<\/code> \u0438\u043b\u0438 <code>UIScreen.main.bounds<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u0433\u043e \u0436\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c:<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       VStack {         Rectangle()           \/\/ \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0441\u044c \u043d\u0430 \u0434\u0432\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c           .containerRelativeFrame(.vertical){ height, _ in height \/ 2}       }       .frame(width: 400, height: 500)     }   } }<\/code><\/pre>\n<p>\u0418\u043b\u0438<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       VStack {         Rectangle()           \/\/ \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0441\u044c \u043d\u0430 \u0434\u0432\u0435 \u0440\u0430\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c \u043e\u0434\u043d\u0443, \u0431\u0435\u0437 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u043e\u0432           .containerRelativeFrame(.vertical, count: 2, span: 1, spacing: 0)       }       .frame(width: 400, height: 500)     }   } }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435 <code>Rectangle()<\/code> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 <code>VStack<\/code> \u0440\u0430\u0437\u043c\u0435\u0440 400 x 500 \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0449\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d iPhone.<\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e <code>containerRelativeFrame<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 (\u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a \u043e\u043a\u043d\u043e, <code>ScrollView<\/code>, <code>TabView<\/code>, <code>NavigationStack<\/code> \u0438 \u0442. \u0434.).<\/p>\n<h2>\u0411\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c, <code>containerRelativeFrame<\/code> \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0438\u0437 \u043d\u0438\u0445 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 <code>Rectangle<\/code> \u0440\u0430\u0432\u043d\u0430 100, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u0442\u0430 <code>NavigationStack<\/code> (200), \u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u043d\u0430 2, \u0430 \u043d\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       NavigationStack {         VStack {           Rectangle() \/\/ \u0432\u044b\u0441\u043e\u0442\u0430 \u0440\u0430\u0432\u043d\u0430 100             .containerRelativeFrame(.vertical) { height, _ in height \/ 2 }         }         .frame(width: 400, height: 500)       }       .frame(height: 200) \/\/ \u0432\u044b\u0441\u043e\u0442\u0430 NavigationStack \u0440\u0430\u0432\u043d\u0430 200     }   } }<\/code><\/pre>\n<p>\u041d\u043e \u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u0443\u044e \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>containerRelativeFrame<\/code> \u0432 <code>overlay<\/code> \u0438\u043b\u0438 <code>background<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 <code>containerRelativeFrame<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u042d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f overlay \u0438\u043b\u0438 background \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p><em>\u041e\u0431\u044b\u0447\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0435\u0433\u043e <\/em><code>overlay<\/code><em> \u0438 <\/em><code>background<\/code><em> \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445 &#171;master-slave&#187;. \u0427\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u0442\u0430\u0442\u044c\u044e <\/em><a href=\"https:\/\/fatbobman.com\/en\/posts\/in-depth-exploration-of-overlay-and-background-modifiers-in-swiftui\/\">\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 Overlay \u0438 Background \u0432 SwiftUI<\/a><em>.<\/em><\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a <code>NavigationStack<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>overlay<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 <code>Rectangle<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u0442\u044b <code>containerRelativeFrame<\/code>. \u0417\u0434\u0435\u0441\u044c <code>containerRelativeFrame<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 <code>NavigationStack<\/code>, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u2014 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       NavigationStack {         VStack {           Rectangle()         }         .frame(width: 400, height: 500)       }       .frame(height: 200) \/\/ \u0432\u044b\u0441\u043e\u0442\u0430 NavigationStack \u0440\u0430\u0432\u043d\u0430 200       .overlay(         Rectangle()           .containerRelativeFrame(.vertical) { height, _ in height \/ 2 } \/\/ \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \/ 2       )     }   } }<\/code><\/pre>\n<h2>\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/h2>\n<p>\u0421\u0440\u0435\u0434\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0445 <code>containerRelativeFrame<\/code>, \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"swift\">public func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center, _ length: @escaping (CGFloat, Axis) -&gt; CGFloat) -&gt; some View<\/code><\/pre>\n<p>\u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 <code>length<\/code> \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u0434\u0432\u0443\u043c \u0440\u0430\u0437\u043d\u044b\u043c \u043e\u0441\u044f\u043c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0441\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u0434\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 <code>Rectangle<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0439 \u0434\u0432\u0443\u043c \u0442\u0440\u0435\u0442\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u2014 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b:<\/p>\n<pre><code class=\"swift\">Rectangle()   .containerRelativeFrame([.horizontal, .vertical]) { length, axis in     if axis == .vertical {       return length \/ 2     } else {       return length * (2 \/ 3)     }   }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043e\u0441\u0435\u0439, \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 <code>axes<\/code>, <code>containerRelativeFrame<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b (\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c).<\/p>\n<pre><code class=\"swift\">struct TransformsDemo: View {   var body: some View {     VStack {       Rectangle()         .containerRelativeFrame(.horizontal) { length, axis in           if axis == .vertical {             return length \/ 2 \/\/ \u042d\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e .vertical \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0432 axes           } else {             return length * (2 \/ 3)           }         }     }.frame(height: 100)   } }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 <code>Rectangle<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0439 \u0434\u0432\u0443\u043c \u0442\u0440\u0435\u0442\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0439 100 (\u0447\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e <code>VStack<\/code>).<\/p>\n<p><em>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/em><\/p>\n<h2>\u0420\u0430\u0437\u043c\u0435\u0440, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c\u00a0<\/h2>\n<p>\u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c <code>containerRelativeFrame<\/code>, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: &#171;\u0420\u0430\u0437\u043c\u0435\u0440, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443, \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0430 \u0432\u044b\u0447\u0435\u0442\u043e\u043c \u043b\u044e\u0431\u044b\u0445 \u0432\u0441\u0442\u0430\u0432\u043e\u043a \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443&#187;. \u042d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0432\u0435\u0440\u043d\u043e, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 <code>NavigationSplitView<\/code> <code>containerRelativeFrame<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 (<code>SideBar<\/code>, <code>Content<\/code>, <code>Detail<\/code>). \u041f\u043e\u043c\u0438\u043c\u043e \u0443\u0447\u0435\u0442\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439, \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u044b\u0447\u0442\u0435\u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 (<code>navigationBarHeight<\/code>). \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 <code>NavigationStack<\/code> \u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>containerRelativeFrame<\/code> \u0432 <code>TabView<\/code> \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u2014 \u044d\u0442\u043e \u043e\u0431\u0449\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 <code>TabView<\/code> \u043c\u0438\u043d\u0443\u0441 \u0432\u044b\u0441\u043e\u0442\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0432\u0435\u0440\u0445\u0443 \u0438 <code>TabBar<\/code> \u0432\u043d\u0438\u0437\u0443.<\/p>\n<\/li>\n<li>\n<p>\u0412 <code>ScrollView<\/code>, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u043b <code>padding<\/code> \u0447\u0435\u0440\u0435\u0437 <code>safeAreaPadding<\/code>, \u0442\u043e <code>containerRelativeFrame<\/code> \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0447\u0442\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0440\u0435\u0434\u0430\u0445, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043a\u043e\u043d (iPadOS, macOS), \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u043e\u043a\u043d\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0425\u043e\u0442\u044f \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e <code>containerRelativeFrame<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 <code>List<\/code>, \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0432 Xcode \u0432\u0435\u0440\u0441\u0438\u0438 15.3 (15E204a) \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>\u041e\u0441\u0432\u043e\u0438\u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 <code>containerRelativeFrame<\/code>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0438\u043b\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c\u044b. \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u0430\u043b\u0435\u0440\u0435\u0439, \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/h2>\n<p>\u042d\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e <code>containerRelativeFrame<\/code>. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443: \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0433\u0430\u043b\u0435\u0440\u0435\u0438, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 App Store \u0438\u043b\u0438 Apple Music, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435) \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0442\u0440\u0435\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438 \u0434\u0432\u0435 \u0442\u0440\u0435\u0442\u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043e\u0442 \u0435\u0435 \u0448\u0438\u0440\u0438\u043d\u044b.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>containerRelativeFrame<\/code>, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 <a href=\"https:\/\/fatbobman.com\/en\/posts\/mastring-geometrygroup\/\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 SwiftUI geometryGroup(): \u041e\u0442 \u0442\u0435\u043e\u0440\u0438\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 background\u2018\u0430 \u043a <code>ScrollView<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043a\u0430\u043a\u0438\u043c-\u043b\u0438\u0431\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u0441\u0447\u0435\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0441 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b <code>ScrollView<\/code>.<\/p>\n<p>\u042d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>containerRelativeFrame<\/code>,:<\/p>\n<pre><code class=\"swift\">struct ScrollViewDemo:View {   var body: some View {     ScrollView(.horizontal) {       HStack(spacing: 10) {         ForEach(0..&lt;10){ _ in           Rectangle()             .fill(.purple)             .aspectRatio(3 \/ 2, contentMode: .fit)             \/\/ \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0438\u043c \u043d\u0430 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c \u043e\u0434\u043d\u0443, \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u0432             .containerRelativeFrame(.horizontal, count: 3, span: 1, spacing: 0)         }       }     }   } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/641\/72e\/66c\/64172e66cd2b3053379bf1fa4a973e37.png\" width=\"800\" height=\"484\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/641\/72e\/66c\/64172e66cd2b3053379bf1fa4a973e37.png\"\/><\/figure>\n<p>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0430\u043c <code>HStack<\/code> \u0438\u043c\u0435\u0435\u0442 <code>spacing: 10<\/code>, \u0442\u0440\u0435\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (\u043a\u0440\u0430\u0439\u043d\u0435\u0435 \u0441\u043f\u0440\u0430\u0432\u0430) \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u2014 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0435 \u0432\u043b\u0435\u0437\u0435\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0432 HStack \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 <code>spacing<\/code> <code>containerRelativeFrame<\/code>. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0447\u0443\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0439 \u0442\u0440\u0435\u0442\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 <code>ScrollView<\/code> \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u0440\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<pre><code class=\"swift\">struct ScrollViewDemo:View {   var body: some View {     ScrollView(.horizontal) {       HStack(spacing: 10) {         ForEach(0..&lt;10){ _ in           Rectangle()             .fill(.purple)             .aspectRatio(3 \/ 2, contentMode: .fit)             .border(.yellow, width: 3)             \/\/ \u0423\u0447\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445             .containerRelativeFrame(.horizontal, count: 3, span: 1, spacing: 10)         }       }     }   } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c8c\/c01\/c72\/c8cc01c729f038cbca3f932a5cdcdf8c.gif\" width=\"1152\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c8c\/c01\/c72\/c8cc01c729f038cbca3f932a5cdcdf8c.gif\"\/><\/figure>\n<p>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>spacing<\/code> \u0432 <code>containerRelativeFrame<\/code> \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>spacing<\/code> \u0432 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445, \u043a\u0430\u043a <code>VStack<\/code> \u0438 <code>HStack<\/code>. \u041e\u043d \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430 \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0440\u043e\u043b\u044c <code>count<\/code>, <code>span<\/code> \u0438 <code>spacing<\/code> \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b:<\/p>\n<pre><code class=\"swift\">let availableWidth = (containerWidth - (spacing * (count - 1))) let columnWidth = (availableWidth \/ count) let itemWidth = (columnWidth * span) + ((span - 1) * spacing)<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 <code>ScrollView<\/code> (\u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0430 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0431\u0435\u0437 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439) \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>containerRelativeFrame<\/code> \u0432 <code>ScrollView<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>axes<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 (\u0435\u0441\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b). \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0430\u043d\u043e\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0448 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"swift\">struct ScrollViewDemo:View {   var body: some View {     ScrollView {       HStack(spacing: 10) {         ForEach(0..&lt;10){ _ in           Rectangle()             .fill(.purple)             .aspectRatio(3 \/ 2, contentMode: .fit)             .border(.yellow, width: 3)             \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438             .containerRelativeFrame(.horizontal, count: 3, span: 1, spacing: 0)         }       }     }     .border(.red)   } }<\/code><\/pre>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/strong> \u0418\u0437-\u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439 \u0432 \u043b\u043e\u0433\u0438\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 <code>LazyHStack<\/code> \u0438 <code>HStack<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>LazyHStack<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>HStack<\/code> \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e ScrollView \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0435 (\u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>LazyHStack<\/code>). \u0412 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445, \u0433\u0434\u0435 <code>LazyHStack<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c, \u043b\u0443\u0447\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>GeometryReader<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b <code>ScrollView<\/code> \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0432\u044b\u0441\u043e\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u043a\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f\u043c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/93f\/c20\/c5d\/93fc20c5d576fa028602399e18d1cde6.gif\" width=\"1152\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/93f\/c20\/c5d\/93fc20c5d576fa028602399e18d1cde6.gif\"\/><\/figure>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0435 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u0435\u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u044b, \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0442\u0440\u0435\u0442\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439: \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>NavigationStack<\/code> \u0438\u043b\u0438 <code>TabView<\/code>) \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0444\u043e\u043d, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u2014 \u0441\u0438\u043d\u0435\u0433\u043e \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e \u0441\u043d\u0438\u0437\u0443, \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u0437\u043e\u043b\u043e\u0442\u043e\u043c \u0441\u0435\u0447\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (0.618).<\/p>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>containerRelativeFrame<\/code>, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"swift\">struct SplitDemo:View {   var body: some View {     NavigationStack {       ZStack {         Color.blue           .overlay(             GeometryReader { proxy in               Color.clear                 .overlay(alignment: .bottom) {                   Color.orange                     .frame(height: proxy.size.height * (1 - 0.618))                 }             }           )         Text(\"Hello World\")           .font(.title)           .foregroundStyle(.yellow)       }     }   } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/43a\/9a8\/917\/43a9a8917c7dd8e858618b135c4d61e0.png\" width=\"800\" height=\"535\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/43a\/9a8\/917\/43a9a8917c7dd8e858618b135c4d61e0.png\"\/><\/figure>\n<p>\u0421 <code>containerRelativeFrame<\/code> \u043d\u0430\u0448\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439:<\/p>\n<pre><code class=\"swift\">struct SplitDemo: View {   var body: some View {     NavigationStack {       Text(\"Hello World\")         .font(.title)         .foregroundStyle(.yellow)         .background(           Color.blue             \/\/ \u0421\u0438\u043d\u0438\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430             .containerRelativeFrame([.horizontal, .vertical])             .overlay(alignment: .bottom) {               Color.orange                 \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u2014 \u044d\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u043d\u0430 (1 - 0.618), \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u043d\u0430\u044f \u043f\u043e \u043d\u0438\u0437\u0443 \u0441\u0438\u043d\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430                 .containerRelativeFrame(.vertical) { length, _ in                   length * (1 - 0.618)                 }             }         )     }   } }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043d\u0438\u0439 \u0438 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439 \u0444\u043e\u043d\u044b \u0432\u044b\u0445\u043e\u0434\u0438\u043b\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>ignoresSafeArea<\/code>:<\/p>\n<pre><code class=\"swift\">NavigationStack {   Text(\"Hello World\")     .font(.title)     .foregroundStyle(.yellow)     .background(       Color.blue         .ignoresSafeArea()         .containerRelativeFrame([.horizontal, .vertical])         .overlay(alignment: .bottom) {           Color.orange             .ignoresSafeArea()             .containerRelativeFrame(.vertical) { length, _ in               length * (1 - 0.618)             }         }     ) }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/796\/80a\/431\/79680a4317029e17ce852f5b030b06dd.gif\" alt=\"\" title=\"\" width=\"1092\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/796\/80a\/431\/79680a4317029e17ce852f5b030b06dd.gif\"\/><\/figure>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/fatbobman.com\/en\/posts\/geometryreader-blessing-or-curse\/\">GeometryReader: \u0414\u0430\u0440 \u0438\u043b\u0438 \u043f\u0440\u043e\u043a\u043b\u044f\u0442\u0438\u0435?<\/a> \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>GeometryReader<\/code> \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. \u0425\u043e\u0442\u044f <code>containerRelativeFrame<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043c\u044b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e.<\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>GeometryReader<\/code>:<\/p>\n<pre><code class=\"swift\">struct RatioSplitHStack&lt;L, R&gt;: View where L: View, R: View {     let leftWidthRatio: CGFloat     let leftContent: L     let rightContent: R     init(leftWidthRatio: CGFloat, @ViewBuilder leftContent: @escaping () -&gt; L, @ViewBuilder rightContent: @escaping () -&gt; R) {         self.leftWidthRatio = leftWidthRatio         self.leftContent = leftContent()         self.rightContent = rightContent()     }      var body: some View {         GeometryReader { proxy in             HStack(spacing: 0) {                 Color.clear                     .frame(width: proxy.size.width * leftWidthRatio)                     .overlay(leftContent)                 Color.clear                     .overlay(rightContent)             }         }     } }<\/code><\/pre>\n<p>\u0412 \u0432\u0435\u0440\u0441\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0439 <code>containerRelativeFrame<\/code>, \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0431\u0435\u0437 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ScrollView<\/code>:<\/p>\n<pre><code class=\"swift\">struct RatioSplitHStack&lt;L, R&gt;: View where L: View, R: View {   let leftWidthRatio: CGFloat   let leftContent: L   let rightContent: R   init(leftWidthRatio: CGFloat, @ViewBuilder leftContent: @escaping () -&gt; L, @ViewBuilder rightContent: @escaping () -&gt; R) {     self.leftWidthRatio = leftWidthRatio     self.leftContent = leftContent()     self.rightContent = rightContent()   }    var body: some View {     ScrollView(.horizontal) {       HStack(spacing: 0) {         Color.clear           .containerRelativeFrame(.horizontal) { length, _ in length * leftWidthRatio }           .overlay(leftContent)         Color  .clear           .overlay(rightContent)           .containerRelativeFrame(.horizontal) { length, _ in length * (1 - leftWidthRatio) }       }     }     .scrollDisabled(true) \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ScrollView \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430   } }  struct RatioSplitHStackDemo: View {     var body: some View {         RatioSplitHStack(leftWidthRatio: 0.25) {             Rectangle().fill(.red)         } rightContent: {             Color.clear                 .overlay(                     Text(\"Hello World\")                 )         }         .border(.blue)         .frame(width: 300, height: 60)     } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/986\/e87\/7df\/986e877df1371d0201be68fde1fcbde9.png\" width=\"800\" height=\"557\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/986\/e87\/7df\/986e877df1371d0201be68fde1fcbde9.png\"\/><\/figure>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u043b\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439<\/h2>\n<p>\u0412\u0430\u0436\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e <code>containerRelativeFrame<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u042d\u0442\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u044f\u0442 \u043d\u0430\u0440\u0443\u0448\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c <code>GeometryReader<\/code>.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c <code>ViewModifier<\/code> \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>ContainerSizeGetter<\/code>, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u043f\u0438\u0441\u043a\u0430):<\/p>\n<pre><code class=\"swift\">\/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0446\u0438\u043a\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f class ContainerSize {   var width: CGFloat? {     didSet {       sendSize()     }   }    var height: CGFloat? {     didSet {       sendSize()     }   }    func sendSize() {     if let width = width, let height = height {       publisher.send(.init(width: width, height: height))     }   }    var publisher = PassthroughSubject&lt;CGSize, Never&gt;() }  \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 struct ContainerSizeGetter: ViewModifier {   @Binding var size: CGSize?   @State var containerSize = ContainerSize()   func body(content: Content) -&gt; some View {     content       .overlay(         Color.yellow           .containerRelativeFrame([.vertical, .horizontal]) { length, axes in             if axes == .vertical {               containerSize.height = length             } else {               containerSize.width = length             }             return 0           }       )       .onReceive(containerSize.publisher) { size in         self.size = size       }   } }  extension View {   func containerSizeGetter(size: Binding&lt;CGSize?&gt;) -&gt; some View {     modifier(ContainerSizeGetter(size: size))   } }<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 <code>ViewModifier<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>containerRelativeFrame<\/code> \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 <code>PassthroughSubject<\/code> \u0434\u043b\u044f \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>size<\/code> \u043e \u043b\u044e\u0431\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0441\u043b\u0443\u0436\u0430 \u043b\u0438\u0448\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/16f\/b62\/152\/16fb621525e0f64cf8d91215a7113ebd.gif\" width=\"936\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/16f\/b62\/152\/16fb621525e0f64cf8d91215a7113ebd.gif\"\/><\/figure>\n<h2>\u0420\u0435\u043f\u043b\u0438\u043a\u0430 containerRelativeFrame<\/h2>\n<p>\u0412 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0435, \u044f \u0447\u0430\u0441\u0442\u043e \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u043f\u043b\u0438\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438. \u0422\u0430\u043a\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0433\u043b\u0443\u0431\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043d\u043e \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u0445 \u043b\u043e\u0433\u0438\u043a\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0442\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u0438 \u0440\u0435\u043f\u043b\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043a \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u043d\u043d\u0438\u043c \u0432\u0435\u0440\u0441\u0438\u044f\u043c SwiftUI (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, iOS 13+).<\/p>\n<p><em>\u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0440\u0435\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e iOS. \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <\/em><a href=\"https:\/\/gist.github.com\/fatbobman\/dca984afab837a72c2da30a427f312ef\">\u0437\u0434\u0435\u0441\u044c<\/a><em>.<\/em><\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h2>\n<p>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 <code>containerRelativeFrame<\/code> \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u043d\u0438\u0437 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u044f <code>containerRelativeFrame<\/code> \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u0432\u0435\u0440\u0445 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 (\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 <code>containerRelativeFrame<\/code> \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f) \u0438 \u0447\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u0447\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u043f\u043b\u0438\u043a\u0438 \u043c\u044b \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u0438\u0441\u043a \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432\u0432\u0435\u0440\u0445 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438.<\/p>\n<pre><code class=\"swift\">extension UIView {   fileprivate func findRelevantContainer() -&gt; (container: UIResponder, type: ContainerType)? {     var responder: UIResponder? = this      while let currentResponder = responder {       if let viewController = currentResponder as? UIViewController {         if viewController is UITabBarController {           return (viewController, .tabview) \/\/ UITabBarController         }         if viewController is UINavigationController {           return (viewController, .navigator) \/\/ UINavigationController         }       }       if let scrollView = currentResponder as? UIScrollView {         return (scrollView, .scrollView) \/\/ UIScrollView       }       responder = currentResponder.next     }      if let currentWindow = UIApplication.shared.windows.filter({$0.isKeyWindow}).first {       return (currentWindow, .window) \/\/ UIWindow     } else {       return nil     }   } }<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0432 \u043c\u0435\u0442\u043e\u0434 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <code>findRelevantContainer<\/code> \u043a <code>UIView<\/code>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 \u0442\u0438\u043f <code>UIResponder<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0431\u043b\u0438\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e (<code>UIView<\/code>).<\/p>\n<h2>\u0420\u0430\u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c\u044b\u0445 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0432\u044b\u0441\u043e\u0442\u0443 <code>TabBar<\/code>, \u0432\u044b\u0441\u043e\u0442\u0443 <code>NavigationBarHeight<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>frame<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432:<\/p>\n<pre><code class=\"swift\">@MainActor   class Coordinator: ObservableObject {     weak var container: UIResponder?     var type: ContainerType?     var size: Binding&lt;CGSize?&gt;     var cancellables = Set&lt;AnyCancellable&gt;()      init(size: Binding&lt;CGSize?&gt;) {       self.size = size     }      func trackContainerSizeChanges(_ container: UIResponder, ofType type: ContainerType) {       self.container = container       self.type = type       switch type {       case .window:         if let window = container as? UIWindow {           window.publisher(for: \\.frame)             .receive(on: RunLoop.main)             .sink(receiveValue: { _ in               let size = self.calculateContainerSize(container, ofType: type)               self.size.wrappedValue = size             })             .store(in: &amp;cancellables)         }       ....     }      func calculateContainerSize(_ container: UIResponder, ofType type: ContainerType) -&gt; CGSize? {       switch type {       case .window:         if let window = container as? UIWindow {           let windowSize = window.frame.size           let safeAreaInsets = window.safeAreaInsets           let width = windowSize.width - safeAreaInsets.left - safeAreaInsets.right           let height = windowSize.height - safeAreaInsets.top - safeAreaInsets.bottom           return CGSize(width: width, height: height)         }       ....       return nil     }   } }<\/code><\/pre>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 ViewModifier<\/h2>\n<p>\u041c\u044b \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0432\u044b\u0448\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 SwiftUI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>UIViewRepresentable<\/code> \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0435 \u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>frame<\/code> \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e:<\/p>\n<pre><code class=\"swift\">private struct ContainerDetectorModifier: ViewModifier {   let type: DetectorType   @State private var containerSize: CGSize?   func body(content: Content) -&gt; some View {     content       .background(         ContainerDetector(size: $containerSize)       )       .frame(width: result.width, height: result.height, alignment: result.alignment)   }      ... }<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0434\u0435\u043b\u0430\u0432 \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u0435\u0440\u0441\u0438\u044e \u0440\u0435\u043f\u043b\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c\u0443 <code>containerRelativeFrame<\/code>, \u0438 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b \u043e \u0434\u0435\u0442\u0430\u043b\u044f\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fb8\/443\/d55\/fb8443d553de2b194841f03293b1f2c7.gif\" width=\"936\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fb8\/443\/d55\/fb8443d553de2b194841f03293b1f2c7.gif\"\/><\/figure>\n<p><em>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u0447\u0442\u043e <\/em><code>containerRelativeFrame<\/code> <em>\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 <\/em><code>frame<\/code><em>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u0443\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <\/em><code>alignment<\/code><em>, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0435 <\/em><code>frame<\/code><em>.<\/em><\/p>\n<h4>\u0421\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/h4>\n<ul>\n<li>\n<p>\u041d\u0430 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 iOS \u043d\u0438\u0436\u0435 17, \u0435\u0441\u043b\u0438 \u0440\u0435\u043f\u043b\u0438\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, <code>ScrollView<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439, \u0440\u0435\u043f\u043b\u0438\u043a\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0435 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f <code>List<\/code>.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0431\u043e\u0440\u0443 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0435 <code>containerRelativeFrame<\/code> \u0432 SwiftUI, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438. \u041c\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u043e\u0449\u043d\u044b\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0438\u0445 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438, \u043d\u043e \u0438 \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 SwiftUI, \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0443\u043b\u0443\u0447\u0448\u0438\u0432 \u043d\u0430\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 SwiftUI. \u042f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u0440\u043e\u0431\u0443\u0434\u0438\u0442 \u0432\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0432 SwiftUI \u0438 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u0430\u0441 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<blockquote>\n<p>26 \u0434\u0435\u043a\u0430\u0431\u0440\u044f \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043c\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0430 SwiftUI \u0431\u0435\u0437 UIKit. \u041d\u0430 \u043d\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043d\u0430 SwiftUI. <\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 SwiftUI \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 iOS 14, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f OpenSource-\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u0435\u0437 UIKit. <\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0434\u0438\u043f\u043b\u0438\u043d\u043a\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u043a \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/otus.pw\/EPNI\/\">\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0443\u0440\u0441\u0430 &#171;iOS Developer. Professional&#187;.<\/a><\/p>\n<\/blockquote>\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\/869346\/\"> https:\/\/habr.com\/ru\/articles\/869346\/<\/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>\u041d\u0430 WWDC 2023 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Apple \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>containerRelativeFrame<\/code> \u0434\u043b\u044f SwiftUI. \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>containerRelativeFrame<\/code>, \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0443\u044e \u0440\u0435\u043f\u043b\u0438\u043a\u0443 <code>containerRelativeFrame<\/code> \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 SwiftUI.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/containerrelativeframe(_:alignment:)\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> Apple containerRelativeFrame \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><em>\u041f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0444\u0440\u0435\u0439\u043c, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/em><\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0438\u0440\u0438\u043d\u044b \u0438\/\u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445:<\/em><\/p>\n<ul>\n<li>\n<p>\u041e\u043a\u043d\u043e, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043d\u0430 iPadOS \u0438\u043b\u0438 macOS, \u0438\u043b\u0438 \u044d\u043a\u0440\u0430\u043d \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 iOS.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043b\u043e\u043d\u043a\u0430 NavigationSplitView<\/p>\n<\/li>\n<li>\n<p>NavigationStack<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 TabView<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 ScrollView \u0438\u043b\u0438 List<\/p>\n<\/li>\n<\/ul>\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0435, \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u0432\u044b\u0448\u0435, \u0437\u0430 \u0432\u044b\u0447\u0435\u0442\u043e\u043c \u043b\u044e\u0431\u044b\u0445 \u0432\u0441\u0442\u0430\u0432\u043e\u043a \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443.<\/em><\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u0434\u043e\u0432, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430. \u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b, \u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u043f\u0438\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438:<\/p>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>containerRelativeFrame<\/code>, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438\u0449\u0435\u0442 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432. \u041e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u043e\u043d \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 frame, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b<\/h2>\n<p><code>containerRelativeFrame<\/code> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0442\u0440\u0438 \u0432\u0438\u0434\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c \u0432 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435:<\/p>\n<p><strong>1) \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f:<\/strong> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440, \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043e\u043d \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<pre><code>public func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center) -&gt; some View<\/code><\/pre>\n<p><strong>2) \u0412\u0435\u0440\u0441\u0438\u044f \u0441 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438:<\/strong> \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0445\u0432\u0430\u0442\u0438\u0442\u044c, \u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043e\u0441\u044f\u043c. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code>public func containerRelativeFrame(_ axes: Axis.Set, count: Int, span: Int = 1, spacing: CGFloat, alignment: Alignment = .center) -&gt; some View<\/code><\/pre>\n<p><strong>3) \u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f:<\/strong> \u042d\u0442\u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043c\u0430\u043a\u0435\u0442\u0443.<\/p>\n<pre><code>public func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center, _ length: @escaping (CGFloat, Axis) -&gt; CGFloat) -&gt; some View<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043c\u043e\u0449\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443.<\/p>\n<h2>\u041f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u0445<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0433\u043b\u0443\u0431\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 <code>containerRelativeFrame<\/code>, \u043c\u044b \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439, \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0432 \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438.<\/p>\n<h2>\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432<\/h2>\n<p>\u0412 SwiftUI, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>frame<\/code>, \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043e\u0441\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437 <code>frame<\/code>.<\/p>\n<pre><code class=\"swift\">VStack {   Rectangle()     .frame(width: 200, height: 200)     \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f     ... } .frame(width: 400, height: 500)<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430 iPhone, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0441\u043e\u0442\u0430 <code>Rectangle<\/code> \u0431\u044b\u043b\u0430 \u0440\u0430\u0432\u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443:<\/p>\n<pre><code class=\"swift\">var screenAvailableHeight: CGFloat \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u0430\u043a\u0438\u043c-\u043b\u0438\u0431\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c  VStack {   Rectangle()     .frame(width: 200, height: screenHeight \/ 2)     \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f     ... } .frame(width: 400, height: 500)<\/code><\/pre>\n<p>\u0414\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <code>containerRelativeFrame<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0442\u0438\u043f\u0430 <code>GeometryReader<\/code> \u0438\u043b\u0438 <code>UIScreen.main.bounds<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u0433\u043e \u0436\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c:<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       VStack {         Rectangle()           \/\/ \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0441\u044c \u043d\u0430 \u0434\u0432\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c           .containerRelativeFrame(.vertical){ height, _ in height \/ 2}       }       .frame(width: 400, height: 500)     }   } }<\/code><\/pre>\n<p>\u0418\u043b\u0438<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       VStack {         Rectangle()           \/\/ \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0441\u044c \u043d\u0430 \u0434\u0432\u0435 \u0440\u0430\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c \u043e\u0434\u043d\u0443, \u0431\u0435\u0437 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u043e\u0432           .containerRelativeFrame(.vertical, count: 2, span: 1, spacing: 0)       }       .frame(width: 400, height: 500)     }   } }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435 <code>Rectangle()<\/code> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 <code>VStack<\/code> \u0440\u0430\u0437\u043c\u0435\u0440 400 x 500 \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0449\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d iPhone.<\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e <code>containerRelativeFrame<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 (\u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a \u043e\u043a\u043d\u043e, <code>ScrollView<\/code>, <code>TabView<\/code>, <code>NavigationStack<\/code> \u0438 \u0442. \u0434.).<\/p>\n<h2>\u0411\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c, <code>containerRelativeFrame<\/code> \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0438\u0437 \u043d\u0438\u0445 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 <code>Rectangle<\/code> \u0440\u0430\u0432\u043d\u0430 100, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u0442\u0430 <code>NavigationStack<\/code> (200), \u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u043d\u0430 2, \u0430 \u043d\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       NavigationStack {         VStack {           Rectangle() \/\/ \u0432\u044b\u0441\u043e\u0442\u0430 \u0440\u0430\u0432\u043d\u0430 100             .containerRelativeFrame(.vertical) { height, _ in height \/ 2 }         }         .frame(width: 400, height: 500)       }       .frame(height: 200) \/\/ \u0432\u044b\u0441\u043e\u0442\u0430 NavigationStack \u0440\u0430\u0432\u043d\u0430 200     }   } }<\/code><\/pre>\n<p>\u041d\u043e \u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u0443\u044e \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>containerRelativeFrame<\/code> \u0432 <code>overlay<\/code> \u0438\u043b\u0438 <code>background<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 <code>containerRelativeFrame<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u042d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f overlay \u0438\u043b\u0438 background \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p><em>\u041e\u0431\u044b\u0447\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0435\u0433\u043e <\/em><code>overlay<\/code><em> \u0438 <\/em><code>background<\/code><em> \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445 &#171;master-slave&#187;. \u0427\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u0442\u0430\u0442\u044c\u044e <\/em><a href=\"https:\/\/fatbobman.com\/en\/posts\/in-depth-exploration-of-overlay-and-background-modifiers-in-swiftui\/\">\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 Overlay \u0438 Background \u0432 SwiftUI<\/a><em>.<\/em><\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a <code>NavigationStack<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>overlay<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 <code>Rectangle<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u0442\u044b <code>containerRelativeFrame<\/code>. \u0417\u0434\u0435\u0441\u044c <code>containerRelativeFrame<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 <code>NavigationStack<\/code>, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u2014 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"swift\">@main struct containerRelativeFrameDemoApp: App {   var body: some Scene {     WindowGroup {       NavigationStack {         VStack {           Rectangle()         }         .frame(width: 400, height: 500)       }       .frame(height: 200) \/\/ \u0432\u044b\u0441\u043e\u0442\u0430 NavigationStack \u0440\u0430\u0432\u043d\u0430 200       .overlay(         Rectangle()           .containerRelativeFrame(.vertical) { height, _ in height \/ 2 } \/\/ \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \/ 2       )     }   } }<\/code><\/pre>\n<h2>\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/h2>\n<p>\u0421\u0440\u0435\u0434\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0445 <code>containerRelativeFrame<\/code>, \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"swift\">public func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center, _ length: @escaping (CGFloat, Axis) -&gt; CGFloat) -&gt; some View<\/code><\/pre>\n<p>\u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 <code>length<\/code> \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u0434\u0432\u0443\u043c \u0440\u0430\u0437\u043d\u044b\u043c \u043e\u0441\u044f\u043c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0441\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u0434\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 <code>Rectangle<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0439 \u0434\u0432\u0443\u043c \u0442\u0440\u0435\u0442\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u2014 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b:<\/p>\n<pre><code class=\"swift\">Rectangle()   .containerRelativeFrame([.horizontal, .vertical]) { length, axis in     if axis == .vertical {       return length \/ 2     } else {       return length * (2 \/ 3)     }   }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043e\u0441\u0435\u0439, \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 <code>axes<\/code>, <code>containerRelativeFrame<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b (\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c).<\/p>\n<pre><code class=\"swift\">struct TransformsDemo: View {   var body: some View {     VStack {       Rectangle()         .containerRelativeFrame(.horizontal) { length, axis in           if axis == .vertical {             return length \/ 2 \/\/ \u042d\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e .vertical \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0432 axes           } else {             return length * (2 \/ 3)           }         }     }.frame(height: 100)   } }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 <code>Rectangle<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0439 \u0434\u0432\u0443\u043c \u0442\u0440\u0435\u0442\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0439 100 (\u0447\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e <code>VStac<\/code><\/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-443459","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443459","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=443459"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443459\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}