{"id":370292,"date":"2024-05-21T04:21:52","date_gmt":"2024-05-21T04:21:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=370292"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=370292","title":{"rendered":"<span>SwiftUI \u0443\u0440\u043e\u043a\u0438 (\u0447\u0430\u0441\u0442\u044c 3)<\/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>\u2192 <a href=\"https:\/\/habr.com\/ru\/articles\/797381\/\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0447\u0430\u0441\u0442\u044c 2<\/a><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/46d\/4ed\/286\/46d4ed286ed024625276bdda75f88ee9.png\" width=\"1280\" height=\"720\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/46d\/4ed\/286\/46d4ed286ed024625276bdda75f88ee9.png\"\/><\/figure>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c UI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0435\u043a\u043e\u0432<\/h3>\n<p>\u0421\u0442\u0435\u043a\u0438 \u0432\u00a0SUI \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430\u00a0\u0441\u0442\u0435\u043a\u0432\u044c\u044e \u0432\u00a0UIKit. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0439 UI \u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u0442\u0438\u043f\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0412\u00a0UIKit \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI\u00a0\u2014 \u044d\u0442\u043e auto layout \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u044c\u044e\u0448\u0435\u043a \u043d\u0430\u00a0\u044d\u043a\u0440\u0430\u043d\u0435. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0434\u043b\u044f\u00a0\u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0430\u0432\u0442\u043e\u043b\u0435\u0439\u0430\u0443\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0447\u0435\u043c\u2011\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043a\u0430\u043a\u00a0\u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0430\u043a \u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e\u00a0\u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430\u00a0SUI\u00a0\u2014 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438, \u0430\u0432\u0442\u043e\u043b\u044d\u0439\u0430\u0443\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u00a0\u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u0430\u043a\u00a0VStack, HStack, ZStack.<\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u00a0\u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441\u0442\u044d\u043a\u043e\u0432 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c UI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u0442\u043e\u0447\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u0432\u044c\u044e\u0448\u0435\u043a. \u041a\u0430\u043a\u00a0\u0438 \u0432\u00a0\u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0436\u0435, \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u0432\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0435\u043a\u0438 \u0434\u043b\u044f\u00a0\u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f UI \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d64\/fb7\/7ba\/d64fb77bad6b542c04728f975f268573.png\" width=\"302\" height=\"556\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d64\/fb7\/7ba\/d64fb77bad6b542c04728f975f268573.png\"\/><\/figure>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 VStack, HStack \u0438 ZStack\u00a0<\/h3>\n<p>SwiftUI \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 Stack, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c View \u0432\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f\u0445. \u0412\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u00a0\u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c View, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><code>HStack<\/code>\u00a0\u2014 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 View \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p><code>VStack<\/code>\u00a0\u2014 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 View \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p><code>ZStack<\/code>\u00a0\u2014 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e View \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u043e\u0433\u043e<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u0438 \u0441\u0442\u0435\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 View.<\/p>\n<p><strong>VStack:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/67a\/75e\/fa0\/67a75efa09a0067dfbe261a600e0a485.png\" width=\"1033\" height=\"550\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/67a\/75e\/fa0\/67a75efa09a0067dfbe261a600e0a485.png\"\/><\/figure>\n<pre><code class=\"swift\">VStack { RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"1\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"2\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"3\") .font(.system(size: 50)) } }<\/code><\/pre>\n<p><strong>HStack:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/868\/dc4\/3c0\/868dc43c02e912e6ef2c437a920fb785.png\" width=\"1024\" height=\"555\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/868\/dc4\/3c0\/868dc43c02e912e6ef2c437a920fb785.png\"\/><\/figure>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { HStack { RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"1\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"2\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"3\") .font(.system(size: 50)) } } } }<\/code><\/pre>\n<p><strong>ZStack:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/80e\/e2a\/772\/80ee2a772b01049af62ca285263d705d.png\" width=\"1275\" height=\"626\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/80e\/e2a\/772\/80ee2a772b01049af62ca285263d705d.png\"\/><\/figure>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { ZStack { RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"1\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"2\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"3\") .font(.system(size: 50)) } } } }<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0435\u043a\u0430\u043c\u0438<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <em>SwiftUIStacks, \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 SwiftUI, \u0432\u0441\u0435 \u043a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0443\u0440\u043e\u043a\u0430\u0445.<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5ac\/3f4\/50b\/5ac3f450bdeb4cfd9598ae4cc28d30b0.png\" width=\"723\" height=\"514\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ac\/3f4\/50b\/5ac3f450bdeb4cfd9598ae4cc28d30b0.png\"\/><\/figure>\n<p>\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u0434\u0430\u043b\u0435\u0435 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c Mac, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u0435\u0435 \u0434\u043b\u044f \u0432\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>ContentView.swift<\/code>.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c VStack\u00a0<\/h3>\n<p>\u041c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u0431\u0440\u0430\u0442\u044c UI \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u044c\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438. \u041d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/27f\/bc7\/96a\/27fbc796a8fd98ffa8b8b1f337cf180d.png\" width=\"365\" height=\"170\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/27f\/bc7\/96a\/27fbc796a8fd98ffa8b8b1f337cf180d.png\"\/><\/figure>\n<p>\u0418\u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0432\u044c\u044e \u0432 \u043e\u0434\u043d\u043e\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) }     } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2fd\/19c\/fe7\/2fd19cfe71cd23e806ed717a2f6cede6.png\" width=\"1296\" height=\"605\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2fd\/19c\/fe7\/2fd19cfe71cd23e806ed717a2f6cede6.png\"\/><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u043d\u0430\u0448 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u044d\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0432\u044c\u044e \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438\u0441\u044c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u0440\u0438\u0447\u0435\u043c \u043a\u0430\u043a \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0442\u0430\u043a \u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u0432\u0438\u043d\u0435\u043c \u043d\u0430\u0448 \u0442\u0435\u043a\u0441\u0442 \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0439 X \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 <code>alignment<\/code><\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack(alignment: .leading) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) }     } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/005\/90c\/e7a\/00590ce7a72b3ad4ae57320c36a9b3ed.png\" width=\"1305\" height=\"550\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/005\/90c\/e7a\/00590ce7a72b3ad4ae57320c36a9b3ed.png\"\/><\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438 \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 <code>VStack<\/code> \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>spacing<\/code>.<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack(alignment: .leading, spacing: 2) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) }     } }<\/code><\/pre>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u0446\u0438\u0444\u0440\u043e\u0439 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435 \u0432 <code>spacing<\/code> \u0438 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0432 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c HStack\u00a0<\/h3>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b73\/09a\/433\/b7309a433074d3af8cd71261a7f4877c.png\" width=\"463\" height=\"255\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b73\/09a\/433\/b7309a433074d3af8cd71261a7f4877c.png\"\/><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430\u0448\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 Apple Watch \u0438 iPhone, \u0437\u0434\u0435\u0441\u044c \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u0445 \u0442\u0435\u043a\u0441\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0432 <code>VStack<\/code>, \u0430 \u0432\u043e\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c <code>HStack<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 Apple Watch, \u0433\u0434\u0435 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f? \u0422\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0430\u0448\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u043c \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e <code>VStack<\/code>, \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e <code>VStack<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0435\u0433\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441 Apple Watch, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 <code>VStack<\/code> \u043a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u0442\u0435\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043d\u0430\u0448\u0435 \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 <code>Embed in VStack<\/code>, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u0435\u043a \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0435\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c41\/632\/0a1\/c416320a107c66656abedc5f714d5fa0.png\" width=\"1318\" height=\"685\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c41\/632\/0a1\/c416320a107c66656abedc5f714d5fa0.png\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack { VStack(alignment: .leading, spacing: 2) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) } }     } }<\/code><\/pre>\n<h3>\u0418\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 View\u00a0<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0442\u0440\u044e\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434. \u041f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 <code>ContentView<\/code> \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c. \u0412\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0431\u043b\u043e\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0434 \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0412 Xcode \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u0434\u0430 SwiftUI. \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u043e <code>VStack<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0432\u044c\u044e. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u00ab<code>Extract subview<\/code>\u00bb \u0434\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/48a\/abc\/741\/48aabc741f6db1132260ba63a96a5cf5.png\" width=\"1245\" height=\"621\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/48a\/abc\/741\/48aabc741f6db1132260ba63a96a5cf5.png\"\/><\/figure>\n<p>Xcode \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>ExtractedView<\/code>. \u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 <code>ExtractedView<\/code> \u0432 <code>HeaderView<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/958\/7fb\/135\/9587fb135fd8bf619cf51afd378f2369.png\" width=\"1290\" height=\"679\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/958\/7fb\/135\/9587fb135fd8bf619cf51afd378f2369.png\"\/><\/figure>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack { HeaderView() }     } }   struct HeaderView: View { var body: some View { VStack(alignment: .leading, spacing: 2) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) } } }<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0432 <code>ContentView<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u0439 \u0438 \u043b\u0435\u0433\u043a\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u043b\u0438\u0442\u043e\u043a \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u043b\u0438\u0442\u043a\u0438 Apple Watch. \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 <code>ContentView<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { VStack { Text(\"Apple Watch\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.white) Text(\"$500\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.white) Text(\"Series X\") .font(.headline) .foregroundColor(.white) } .padding(40) .background(Color.gray) .cornerRadius(10) } } } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d <code>VStack<\/code> \u043f\u043e\u0434 <code>HeaderView<\/code>. \u042d\u0442\u043e\u0442 <code>VStack<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043b\u0438\u0442\u043a\u0438 Apple Watch. \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 <code>padding<\/code>, <code>background<\/code> \u0438 <code>cornerRadius<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u044d\u0442\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/67a\/75f\/6a2\/67a75f6a2c2b83a68568d70adabfda2d.png\" width=\"1283\" height=\"614\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/67a\/75f\/6a2\/67a75f6a2c2b83a68568d70adabfda2d.png\"\/><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043b\u0438\u0442\u043a\u0438 IPhone. \u042d\u0442\u0430 \u043f\u043b\u0438\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u043f\u0440\u044f\u043c\u043e \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u043b\u0438\u0442\u043a\u043e\u0439 Apple Watch. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043b\u043e\u0436\u0438\u0442\u044c <code>VStack<\/code> \u0441 Apple Watch \u0432 <code>HStack<\/code>. \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u043e <code>VStack<\/code> \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u00ab<code>Embed in HStack<\/code>\u00bb.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b6a\/ce8\/3e6\/b6ace83e629994aea0f3f2eb07eb7c41.png\" width=\"1341\" height=\"681\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b6a\/ce8\/3e6\/b6ace83e629994aea0f3f2eb07eb7c41.png\"\/><\/figure>\n<p>Xcode \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { HStack { VStack { Text(\"Apple Watch\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.white) Text(\"$500\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.white) Text(\"Series X\") .font(.headline) .foregroundColor(.white) } .padding(40) .background(Color.gray) .cornerRadius(10) } } } } } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043b\u0438\u0442\u043a\u0438 iPhone. \u041a\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043a\u043e\u0434 \u043f\u043b\u0438\u0442\u043a\u0438 Apple Watch, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0444\u043e\u043d\u0430 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0434 <code>cornerRadius(10)<\/code>:<\/p>\n<pre><code class=\"swift\">VStack { Text(\"Iphone\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.orange) Text(\"$999\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.orange) Text(\"Series X\") .font(.headline) .foregroundColor(.orange) } .padding(40) .background(Color.green) .cornerRadius(10)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/98d\/b17\/23f\/98db1723ff46402e6fdfeee8c4d7ec57.png\" width=\"1292\" height=\"717\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/98d\/b17\/23f\/98db1723ff46402e6fdfeee8c4d7ec57.png\"\/><\/figure>\n<p>\u041f\u043b\u0438\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c, \u043d\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043b\u0438\u0446\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2014 \u043e\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0438 \u043a\u0430\u043a\u043e\u0439 \u0432 \u043d\u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0421\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0435\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>frame<\/code> c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043f\u043b\u0438\u0442\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0435\u043a\u0430 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u043d\u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434 <code>VStack<\/code> \u043d\u0430\u0448\u0438\u0445 \u043f\u043b\u0438\u0442\u043e\u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443<\/p>\n<pre><code class=\"swift\">.frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 140)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c53\/9f5\/e54\/c539f5e549f6897748cabb23681c81e2.png\" width=\"1314\" height=\"765\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c53\/9f5\/e54\/c539f5e549f6897748cabb23681c81e2.png\"\/><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 28\u00a0\u0438 45\u00a0\u0441\u0442\u0440\u043e\u043a\u0438. \u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u0444\u0440\u0435\u0439\u043c \u043f\u043b\u0438\u0442\u043e\u043a \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, <code>minWidth<\/code> \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0430\u0432\u043d\u0430 \u043d\u0443\u043b\u044e, \u043d\u043e\u00a0<code>maxWidth<\/code> \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043a\u0430\u043a\u00a0\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u044c\u044e \u0438 \u0435\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0443\u00a0\u043d\u0430\u0441 \u0434\u0432\u0430 \u0432\u044c\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e <code>HStack<\/code> \u043e\u043d \u0432\u00a0\u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442 \u0438\u0445 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u00a0\u0432\u044b\u0441\u043e\u0442\u0435, \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0447\u0442\u043e\u00a0\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0441 \u0443\u0441\u0442\u0440\u043e\u0438\u0442 \u0431\u0443\u0434\u0435\u0442 100, \u0430\u00a0\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f 140\u00a0\u2014 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0444\u0440\u0435\u0439\u043c \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u0438\u043b\u0441\u044f \u043f\u043e\u0434\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0432\u043d\u043e\u0435 140\u00a0\u0438 \u0432\u00a0\u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u0432\u0435 \u0440\u0430\u0432\u043d\u044b\u0435 \u043f\u043b\u0438\u0442\u043a\u0438. <\/p>\n<p>\u0412\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430\u043c \u0435\u0449\u0435 \u043d\u0435\u00a0\u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043f\u043e\u00a0\u043a\u0440\u0430\u044f\u043c, \u0432\u0435\u0434\u044c \u043d\u0430\u0448\u043b\u0438 \u043f\u043b\u0438\u0442\u043a\u0438 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0438\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u0440\u0430\u044f \u0430\u0439\u0444\u043e\u043d\u0430, \u0445\u043e\u0442\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043d\u0435\u00a0\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043d\u0430\u00a0\u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0434\u0435\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>padding()<\/code> \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u043e\u0434\u00a0\u043d\u0430\u0448 <code>HStack<\/code>. <\/p>\n<pre><code class=\"swift\">.padding(.horizontal)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/33b\/19d\/95f\/33b19d95f8514e727f01644ed6ab7aa3.png\" width=\"1323\" height=\"770\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/33b\/19d\/95f\/33b19d95f8514e727f01644ed6ab7aa3.png\"\/><\/figure>\n<p><code>Padding<\/code> \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043f\u0440\u0438\u00a0\u044d\u0442\u043e\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u00a0\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u043b\u0438 \u043f\u043b\u0438\u0442\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u043e\u0442\u00a0\u043a\u0440\u0430\u0435\u0432, \u043f\u0440\u0438\u00a0\u044d\u0442\u043e\u043c \u043a\u0430\u043a\u00a0\u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0430\u0448 \u0442\u0435\u043a\u0441\u0442 \u043e\u043f\u044f\u0442\u044c \u0441\u044a\u0435\u0445\u0430\u043b, \u0432\u043e\u043e\u0431\u0449\u0435 \u0434\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0434\u043b\u044f\u00a0\u0442\u0435\u043a\u0441\u0442\u0430, \u043c\u043e\u0436\u0435\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442 \u0441\u0430\u043c \u0448\u0440\u0438\u0444\u0442, \u043d\u043e\u00a0\u0435\u0441\u0442\u044c \u043a\u0430\u043a\u00a0\u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u00a0\u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>minimumScaleFactor<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u00a0\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0432\u00a0\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. (\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0437\u0430\u00a0\u0432\u0430\u0441 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043a\u0430\u043a\u00a0\u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432\u00a0\u0442\u043e\u0439 \u0432\u044c\u044e \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0435\u0435 \u0432\u043f\u0438\u0441\u0430\u0442\u044c).<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043a\u00a0\u0442\u0435\u043a\u0441\u0442\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u00a0\u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0441\u044f \u043d\u0430\u00a0\u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"swift\">.minimumScaleFactor(0.5)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6f7\/5b7\/573\/6f75b75739f44410bdc8828d86dc096a.png\" width=\"1328\" height=\"756\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6f7\/5b7\/573\/6f75b75739f44410bdc8828d86dc096a.png\"\/><\/figure>\n<h3>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u043e\u0434\u0430<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043e\u0431\u0430 \u0441\u0442\u044d\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u043f\u043b\u0438\u0442\u043e\u043a, \u0442\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u0447\u0442\u043e \u043a\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0435\u0432\u0430\u0439\u0441\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0435\u0433\u043e \u0446\u0435\u043d\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u0434 \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0443\u0434\u0430 \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043a\u043e\u0434 \u0431\u043b\u043e\u043a\u0430 <code>VStack<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 Apple Watch, \u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0435\u0433\u043e. \u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u00ab<code>DeviceView<\/code>\u00bb.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a3e\/5ca\/481\/a3e5ca481736b4eeb6ab7f473ac0d5ea.png\" width=\"738\" height=\"441\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a3e\/5ca\/481\/a3e5ca481736b4eeb6ab7f473ac0d5ea.png\"\/><\/figure>\n<pre><code class=\"swift\">struct DeviceView: View { var body: some View { VStack { Text(\"Apple Watch\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.white) .minimumScaleFactor(0.5) Text(\"$500\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.white) .minimumScaleFactor(0.5) Text(\"Series X\") .font(.headline) .foregroundColor(.white) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 140) .padding(40) .background(Color.gray) .cornerRadius(10) } }<\/code><\/pre>\n<p>\u0418 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0442\u0430\u043a<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { HStack { DeviceView()  VStack { Text(\"Iphone\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.orange) .minimumScaleFactor(0.5) Text(\"$999\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.orange) .minimumScaleFactor(0.5) Text(\"Series X\") .font(.headline) .foregroundColor(.orange) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 140) .padding(40) .background(Color.green) .cornerRadius(10) } .padding(.horizontal) } } } }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0443 \u043d\u0430\u0448\u0438\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0435\u0432\u0430\u0439\u0441\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0435\u0433\u043e \u0446\u0435\u043d\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430,<\/p>\n<\/li>\n<li>\n<p>\u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043d\u0430\u0448\u0443 \u0432\u044c\u044e \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0438\u0445 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u0433\u0434\u0435 \u043e\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"swift\">struct DeviceView: View { \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 var device: String var price: String var textColor: Color var bgColor: Color  var body: some View { VStack { \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0435\u0432\u0430\u0439\u0441\u0430 Text(device) .font(.system(.title, design: .rounded)) .fontWeight(.black) \/\/ \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 .foregroundColor(textColor) .minimumScaleFactor(0.5) \/\/ \u0426\u0435\u043d\u0430 \u0434\u0435\u0432\u0430\u0439\u0441\u0430 Text(price) .font(.system(size: 40, weight: .heavy, design: .rounded)) \/\/ \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 .foregroundColor(textColor) .minimumScaleFactor(0.5) Text(\"Series X\") .font(.headline) \/\/ \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 .foregroundColor(textColor) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 140) .padding(40) \/\/ \u0426\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 .background(bgColor) .cornerRadius(10) } }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0443 \u043d\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/02e\/5d1\/d99\/02e5d1d995ce9fbbbceb97c0413f3249.png\" width=\"635\" height=\"205\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/02e\/5d1\/d99\/02e5d1d995ce9fbbbceb97c0413f3249.png\"\/><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0439\u0434\u0435\u0442:<\/p>\n<pre><code class=\"swift\">DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bb7\/32e\/a6f\/bb732ea6fb5f163da481e8bfeac0d629.png\" width=\"1294\" height=\"689\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bb7\/32e\/a6f\/bb732ea6fb5f163da481e8bfeac0d629.png\"\/><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0441\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u043c, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u043a\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439.<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green) } .padding(.horizontal) } } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c04\/b1a\/de9\/c04b1ade94effe9789b41e4151c1f062.png\" width=\"1259\" height=\"621\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c04\/b1a\/de9\/c04b1ade94effe9789b41e4151c1f062.png\"\/><\/figure>\n<p>\u041a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 <code>ContentView<\/code> \u0441\u0442\u0430\u043b \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u044b\u043c, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u0448 UI \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a\u0438\u043c \u043c\u044b \u0435\u0433\u043e \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u0438.<\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ZStack\u00a0<\/strong><\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u043b\u0438\u0442\u043a\u0438, \u043d\u043e \u043a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043d\u0430\u043c \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u043b\u0430\u0448\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u0430\u043a \u0431\u044b \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u043f\u043b\u0438\u0442\u043a\u0435 \u0441 \u0430\u0439\u0444\u043e\u043d\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u043d\u0438\u044f \u043e <code>ZStack<\/code>, \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u0432\u044c\u044e\u0448\u043a\u0438 \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0435 \u043f\u043e \u043e\u0441\u0438 z. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0442\u0440\u043e\u0438\u043c \u043d\u0430\u0448 <code>DeviceView<\/code> \u0441 \u0430\u0439\u0444\u043e\u043d\u043e\u043c \u0432 <code>ZStack<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) ZStack { DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green)  Text(\"\u041b\u0443\u0447\u0448\u0435\u0435 \u0434\u043b\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u043e\u0432\") .font(.system(.caption, design: .rounded)) .fontWeight(.bold) .foregroundColor(.white) .padding(5) .background(.orange) } } .padding(.horizontal) } } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5b2\/3b1\/13a\/5b23b113a0e15e68b95fca4163ed4531.png\" width=\"1112\" height=\"517\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5b2\/3b1\/13a\/5b23b113a0e15e68b95fca4163ed4531.png\"\/><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u043d\u0430\u0448\u0430 \u043f\u043b\u0430\u0448\u043a\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u0430 \u043f\u043b\u0438\u0442\u043a\u0435, \u043d\u043e \u043d\u0430\u043c \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u0438 \u043d\u0430 \u043f\u043b\u0438\u0442\u043a\u0435, \u0438 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435 \u043f\u043e\u0434 \u043d\u0435\u0439, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u044c\u0435\u043c\u0441\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u0432 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>.offset<\/code>.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0434 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u043e\u043c \u0434\u043b\u044f \u043f\u043b\u0430\u0448\u043a\u0438\u00a0<\/p>\n<pre><code class=\"swift\">.offset(x: 0, y: 110)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eaf\/83c\/a8e\/eaf83ca8e895bc81322aefbda80654ef.png\" width=\"1162\" height=\"606\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eaf\/83c\/a8e\/eaf83ca8e895bc81322aefbda80654ef.png\"\/><\/figure>\n<p>\u041f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432\u00a0y \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442 \u0432\u0430\u0448\u0443 \u0432\u044c\u044e \u0432\u043d\u0438\u0437, \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0432\u0432\u0435\u0440\u0445, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441\u00a0\u043e\u0444\u0444\u0441\u0435\u0442\u043e\u043c \u0442\u0430\u043a\u0436\u0435 \u0438 \u043f\u043e\u00a0\u043f\u043e\u0437\u0438\u0446\u0438\u0438 x, \u043a\u0441\u0442\u0430\u0442\u0438 \u043f\u043e\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u0435 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u00a0iPod touch \u0438\u043b\u0438\u00a0\u043d\u0430\u00a0iPad \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f\u00a0\u043b\u0438 \u043f\u043b\u0430\u0448\u043a\u0430 \u043d\u0430\u00a0\u0442\u043e\u043c\u00a0\u0436\u0435 \u043c\u0435\u0441\u0442\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u0432\u044b \u0432\u00a0\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0443\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u043f\u043b\u0438\u0442\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0441\u043d\u0438\u0437\u0443, \u0431\u0443\u0434\u0435\u0442 \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0435\u0440\u043d\u0435\u0442\u0435\u0441\u044c \u043a\u00a0\u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0443 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435 \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438\u00a0\u0436\u0435 \u043d\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c\u00a0\u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u0435<\/p>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u044f\u0442\u044c \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0438 \u0443\u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0448\u0443 \u043f\u043b\u0430\u0448\u043a\u0443 \u0432\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430\u00a0Text \u0432\u044c\u044e \u0441\u00a0\u043d\u0430\u0434\u043f\u0438\u0441\u044c\u044e \u043b\u0443\u0447\u0448\u0435\u0435 \u0434\u043b\u044f\u00a0\u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u043e\u0432 \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 <code>extract subview<\/code>. \u041d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 \u0432\u00a0<code>SmallLabelView<\/code>. \u0414\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a:<\/p>\n<pre><code class=\"swift\">struct SmallLabelView: View { var body: some View { Text(\"\u041b\u0443\u0447\u0448\u0435\u0435 \u0434\u043b\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u043e\u0432\") .font(.system(.caption, design: .rounded)) .fontWeight(.bold) .foregroundColor(.white) .padding(5) .background(.orange) .offset(x: 0, y: 110) } }  struct ContentView: View { var body: some View { VStack { HeaderView() VStack { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) ZStack { DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green) SmallLabelView() } } .padding(.horizontal) } } } } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u043f\u043b\u0438\u0442\u043a\u0443 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0443 \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u043a\u0430\u043a \u0438 \u0441\u0432\u0435\u0440\u0445\u0443, \u043d\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0443\u0442 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c, \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432 \u044d\u0442\u043e\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u0432\u0430, \u043b\u0438\u0431\u043e \u043c\u044b \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 <code>DeviceView<\/code>, \u043b\u0438\u0431\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u043e\u0431 \u043e\u0444\u0441\u0435\u0442\u0430\u0445, \u044f \u0432\u044b\u0431\u0438\u0440\u0430\u044e \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442.<\/p>\n<pre><code class=\"swift\"> struct ContentView: View { var body: some View { VStack { HeaderView() VStack(spacing: 20) { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) ZStack { DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green) SmallLabelView() } } .padding(.horizontal) ZStack { DeviceView(device: \"MacBook\", price: \"1499$\", textColor: .white, bgColor: .black) Image(systemName: \"macbook\") .font(.title) .foregroundStyle(.white) .offset(x: 0, y: -70) } .padding(.horizontal)  } } } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/448\/ca4\/0bf\/448ca40bfcb79c0764bc457355bb09f0.png\" width=\"1171\" height=\"587\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/448\/ca4\/0bf\/448ca40bfcb79c0764bc457355bb09f0.png\"\/><\/figure>\n<p>\u041a\u0430\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u043a\u0438 \u043c\u044b \u0432\u043d\u0435\u0441\u043b\u0438, \u0432\u043e\u00a0\u043f\u0435\u0440\u0432\u044b\u0445 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 <code>spacing<\/code> \u0434\u043b\u044f\u00a0<code>VStack<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b \u0432\u00a0\u0441\u0435\u0431\u0435 <code>HStack<\/code> \u0438 \u043d\u0438\u0436\u043d\u044e\u044e \u043f\u043b\u0438\u0442\u043a\u0443, \u0432\u043e\u00a0\u0432\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <code>ZStack<\/code> \u043f\u043e\u0434\u00a0\u043d\u0430\u0448\u0438\u043c <code>HStack<\/code>, \u043e\u043d \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0441\u044f \u043d\u0430\u043c \u0434\u043b\u044f\u00a0\u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043c\u0430\u043a\u0431\u0443\u043a\u0430, \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u043f\u043b\u0438\u0442\u043a\u0443 \u0441\u00a0\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u00a0\u043c\u0430\u043a\u0431\u0443\u043a\u0435 \u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 padding \u043f\u043e\u00a0\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0434\u043b\u044f\u00a0\u0432\u0441\u0435\u0433\u043e <code>ZStack<\/code> \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e\u00a0\u0431\u043e\u043a\u0430\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b\u0438 \u0441\u00a0\u0442\u0435\u043c\u0438 \u0447\u0442\u043e\u00a0\u0443\u00a0\u043d\u0430\u0441 \u0437\u0430\u0434\u0430\u043d\u044b \u0434\u043b\u044f\u00a0\u043f\u043b\u0438\u0442\u043e\u043a \u0432\u044b\u0448\u0435. \u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u044c\u044e\u0448\u043a\u0438, \u0442\u043e \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435\u00a0\u2014 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u044d\u0442\u043e!<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Spacer<\/h3>\n<p>\u041c\u044b \u043f\u043e\u0447\u0442\u0438 \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0438\u0441\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u043a\u0430\u043a\u00a0\u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u00a0\u0446\u0435\u043d\u0442\u0440\u0443, \u0430\u00a0\u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u0436\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u00a0\u2014 \u0432\u0435\u0434\u044c \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u00a0\u043b\u0435\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f. \u0414\u043b\u044f\u00a0\u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0442\u0430\u043a\u0430\u044f \u0432\u044c\u044e \u043a\u0430\u043a\u00a0<code>Spacer()<\/code> \u044d\u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0441\u043f\u0435\u0439\u0441\u0435\u0440 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0432\u0441\u0435 \u043f\u0443\u0441\u0442\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438 \u043a\u0430\u043a\u00a0\u0431\u044b \u043e\u0442\u043e\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u043e\u0439 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d \u0434\u043e\u0441\u0442\u0430\u0435\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043a\u0430\u043a\u00a0\u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0432 \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430\u0432\u0435\u0440\u0445 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Spacer()<\/code><\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack(spacing: 20) { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) ZStack { DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green) SmallLabelView() } } .padding(.horizontal) ZStack { DeviceView(device: \"MacBook\", price: \"1499$\", textColor: .white, bgColor: .black) Image(systemName: \"macbook\") .font(.title) .foregroundStyle(.white) .offset(x: 0, y: -70) } .padding(.horizontal)  } } Spacer() } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f1d\/611\/882\/f1d61188299d0b01191c614e2b0f55b3.png\" width=\"1107\" height=\"499\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f1d\/611\/882\/f1d61188299d0b01191c614e2b0f55b3.png\"\/><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0447\u0442\u043e <code>Spacer<\/code> \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c <code>VStack<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0435, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 Spacer \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u0430\u043a\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430.<\/p>\n<p>\u0418\u0442\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0446\u0435\u043b\u044c \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u00ab\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\u00bb \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e, \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043e\u043f\u044f\u0442\u044c \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u0441\u0442\u044d\u043a\u0430\u0445, \u043d\u0430\u0448\u0435 \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0435\u043a, \u0430 \u0432 \u043f\u0440\u0430\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c Spacer \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u043e\u0442\u043e\u0434\u0432\u0438\u043d\u0435\u0442 \u043d\u0430\u0448\u0435 \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0431\u043e\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HStack { HeaderView() Spacer() } VStack(spacing: 20) { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) ZStack { DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green) SmallLabelView() } } .padding(.horizontal) ZStack { DeviceView(device: \"MacBook\", price: \"1499$\", textColor: .white, bgColor: .black) Image(systemName: \"macbook\") .font(.title) .foregroundStyle(.white) .offset(x: 0, y: -70) } .padding(.horizontal) } } Spacer() } }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d89\/a54\/a4a\/d89a54a4ab55f1e872dd453976af5e7b.png\" width=\"1140\" height=\"658\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d89\/a54\/a4a\/d89a54a4ab55f1e872dd453976af5e7b.png\"\/><\/figure>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d! \u0412\u043f\u0435\u0440\u0435\u0434\u0438 \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u043d\u043e \u0432\u043e \u0432\u0441\u044f\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u0443\u0436\u0435 \u043e\u0441\u0432\u043e\u0438\u043b\u0438 \u0441\u0442\u044d\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0432\u0430\u0448\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u043e \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435, \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c DeviceView, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0443\u0434\u0430 \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0438\u043a\u043e\u043d\u043a\u0443 \u043d\u043e \u043d\u0438\u0436\u0435 \u0438 \u043f\u0443\u0441\u0442\u044c \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 <code>DeviceView<\/code><\/p>\n<pre><code class=\"swift\">var infoIcon: Image?<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u0434\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0433\u0434\u0435 \u044d\u0442\u0430 \u0438\u043a\u043e\u043d\u043a\u0430 \u0431\u0443\u0434\u0435\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0435 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u043a\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u0432 <code>infoIcon<\/code> \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0442\u043e \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0434\u043e.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u043f\u043e\u0434 <code>.foregroundColor(textColor)<\/code> \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043f\u043b\u0438\u0442\u043a\u0435:<\/p>\n<pre><code class=\"swift\">if infoIcon != nil { HStack { Spacer() infoIcon .foregroundStyle(.white) .offset(x: 30, y: 40) } }<\/code><\/pre>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d <code>HStack<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0441\u043b\u0435\u0432\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 <code>Spacer<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0436\u043c\u0435\u0442 \u043d\u0430\u0448\u0443 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u043f\u0440\u0430\u0432\u043e, \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>infoIcon<\/code> \u043a\u0430\u043a \u0446\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u044c\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044c\u044e \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439 \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u0435\u0433\u043a\u0443\u044e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0438 \u0442\u043e\u0447\u043d\u044b\u043c \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0433\u0434\u0435 \u0431\u044b \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u0443 \u0438\u043a\u043e\u043d\u043a\u0443.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043d\u0430\u0448\u0435\u0433\u043e <code>DeviceView<\/code> \u0441 \u043c\u0430\u043a\u0431\u0443\u043a\u043e\u043c<\/p>\n<pre><code class=\"swift\">DeviceView(device: \"MacBook\", price: \"1499$\", textColor: .white, bgColor: .black, infoIcon: Image(systemName: \"info.circle.fill\"))<\/code><\/pre>\n<p>\u0412\u0435\u0441\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"swift\">struct DeviceView: View { \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 var device: String var price: String var textColor: Color var bgColor: Color var infoIcon: Image?  var body: some View { VStack { \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0435\u0432\u0430\u0439\u0441\u0430 Text(device) .font(.system(.title, design: .rounded)) .fontWeight(.black) \/\/ \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 .foregroundColor(textColor) .minimumScaleFactor(0.5) \/\/ \u0426\u0435\u043d\u0430 \u0434\u0435\u0432\u0430\u0439\u0441\u0430 Text(price) .font(.system(size: 40, weight: .heavy, design: .rounded)) \/\/ \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 .foregroundColor(textColor) .minimumScaleFactor(0.5) Text(\"Series X\") .font(.headline) \/\/ \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 .foregroundColor(textColor) if infoIcon != nil { HStack { Spacer() infoIcon .foregroundStyle(.white) .offset(x: 30, y: 40) } }  } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 140) .padding(40) \/\/ \u0426\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 .background(bgColor) .cornerRadius(10) } }    struct ContentView: View { var body: some View { VStack { HStack { HeaderView() Spacer() } VStack(spacing: 20) { HStack { DeviceView(device: \"Apple Watch\", price: \"500$\", textColor: .white, bgColor: .gray) ZStack { DeviceView(device: \"Iphone\", price: \"999$\", textColor: .orange, bgColor: .green) SmallLabelView() } } .padding(.horizontal) ZStack { DeviceView(device: \"MacBook\", price: \"1499$\", textColor: .white, bgColor: .black, infoIcon: Image(systemName: \"info.circle.fill\")) Image(systemName: \"macbook\") .font(.title) .foregroundStyle(.white) .offset(x: 0, y: -70) } .padding(.horizontal) } } Spacer() } }<\/code><\/pre>\n<p>\u0418 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a4d\/ccc\/69f\/a4dccc69f98164d5e8f3b32b7e2e2ac1.png\" width=\"1155\" height=\"592\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a4d\/ccc\/69f\/a4dccc69f98164d5e8f3b32b7e2e2ac1.png\"\/><\/figure>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u044d\u043a\u0430\u043c\u0438, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c, \u043d\u043e \u044f \u0431\u044b \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043f\u043e\u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0438 \u043f\u043e\u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u044c\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u044d\u043a\u043e\u0432 \u0438 \u0441\u0442\u044d\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u044d\u043a\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430.<\/p>\n<p>\u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c \u0438 \u043b\u0430\u0439\u043a\u0430\u043c \u0435\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439! \u041a\u0430\u043a \u0438 \u043f\u0440\u0435\u0436\u0434\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043c\u043e\u0439 <a href=\"https:\/\/t.me\/swiftexplorer\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b<\/a>. \u0412 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0439\u0434\u0443\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0443\u0440\u043e\u043a\u043e\u0432 \u043f\u043e SwiftUI.\u00a0<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/798857\/\"> https:\/\/habr.com\/ru\/articles\/798857\/<\/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>\u2192 <a href=\"https:\/\/habr.com\/ru\/articles\/797381\/\" rel=\"noopener noreferrer nofollow\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0447\u0430\u0441\u0442\u044c 2<\/a><\/p>\n<figure class=\"full-width\"><\/figure>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c UI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0435\u043a\u043e\u0432<\/h3>\n<p>\u0421\u0442\u0435\u043a\u0438 \u0432\u00a0SUI \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430\u00a0\u0441\u0442\u0435\u043a\u0432\u044c\u044e \u0432\u00a0UIKit. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0439 UI \u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u0442\u0438\u043f\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0412\u00a0UIKit \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI\u00a0\u2014 \u044d\u0442\u043e auto layout \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u044c\u044e\u0448\u0435\u043a \u043d\u0430\u00a0\u044d\u043a\u0440\u0430\u043d\u0435. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0434\u043b\u044f\u00a0\u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0430\u0432\u0442\u043e\u043b\u0435\u0439\u0430\u0443\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0447\u0435\u043c\u2011\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043a\u0430\u043a\u00a0\u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0430\u043a \u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e\u00a0\u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430\u00a0SUI\u00a0\u2014 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438, \u0430\u0432\u0442\u043e\u043b\u044d\u0439\u0430\u0443\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u00a0\u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u0430\u043a\u00a0VStack, HStack, ZStack.<\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u00a0\u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441\u0442\u044d\u043a\u043e\u0432 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c UI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u0442\u043e\u0447\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u0432\u044c\u044e\u0448\u0435\u043a. \u041a\u0430\u043a\u00a0\u0438 \u0432\u00a0\u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0436\u0435, \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u0432\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0435\u043a\u0438 \u0434\u043b\u044f\u00a0\u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f UI \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d.<\/p>\n<figure class=\"\"><\/figure>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 VStack, HStack \u0438 ZStack\u00a0<\/h3>\n<p>SwiftUI \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 Stack, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c View \u0432\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f\u0445. \u0412\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u00a0\u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c View, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><code>HStack<\/code>\u00a0\u2014 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 View \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p><code>VStack<\/code>\u00a0\u2014 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 View \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p><code>ZStack<\/code>\u00a0\u2014 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e View \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u043e\u0433\u043e<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u0438 \u0441\u0442\u0435\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 View.<\/p>\n<p><strong>VStack:<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<pre><code class=\"swift\">VStack { RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"1\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"2\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"3\") .font(.system(size: 50)) } }<\/code><\/pre>\n<p><strong>HStack:<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { HStack { RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"1\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"2\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"3\") .font(.system(size: 50)) } } } }<\/code><\/pre>\n<p><strong>ZStack:<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { ZStack { RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"1\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"2\") .font(.system(size: 50)) } RoundedRectangle(cornerRadius: 20) .foregroundStyle(.orange) .overlay { Text(\"3\") .font(.system(size: 50)) } } } }<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0435\u043a\u0430\u043c\u0438<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <em>SwiftUIStacks, \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 SwiftUI, \u0432\u0441\u0435 \u043a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0443\u0440\u043e\u043a\u0430\u0445.<\/em><\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u0434\u0430\u043b\u0435\u0435 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c Mac, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u0435\u0435 \u0434\u043b\u044f \u0432\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>ContentView.swift<\/code>.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c VStack\u00a0<\/h3>\n<p>\u041c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u0431\u0440\u0430\u0442\u044c UI \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u044c\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438. \u041d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435:<\/p>\n<figure class=\"\"><\/figure>\n<p>\u0418\u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0432\u044c\u044e \u0432 \u043e\u0434\u043d\u043e\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) }     } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u043d\u0430\u0448 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u044d\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0432\u044c\u044e \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438\u0441\u044c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u0440\u0438\u0447\u0435\u043c \u043a\u0430\u043a \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0442\u0430\u043a \u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u0432\u0438\u043d\u0435\u043c \u043d\u0430\u0448 \u0442\u0435\u043a\u0441\u0442 \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0439 X \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 <code>alignment<\/code><\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack(alignment: .leading) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) }     } }<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438 \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 <code>VStack<\/code> \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>spacing<\/code>.<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack(alignment: .leading, spacing: 2) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) }     } }<\/code><\/pre>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u0446\u0438\u0444\u0440\u043e\u0439 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435 \u0432 <code>spacing<\/code> \u0438 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0432 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c HStack\u00a0<\/h3>\n<figure class=\"\"><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430\u0448\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 Apple Watch \u0438 iPhone, \u0437\u0434\u0435\u0441\u044c \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u0445 \u0442\u0435\u043a\u0441\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0432 <code>VStack<\/code>, \u0430 \u0432\u043e\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c <code>HStack<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 Apple Watch, \u0433\u0434\u0435 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f? \u0422\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0430\u0448\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u043c \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e <code>VStack<\/code>, \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e <code>VStack<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0435\u0433\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441 Apple Watch, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 <code>VStack<\/code> \u043a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u0442\u0435\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043d\u0430\u0448\u0435 \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 <code>Embed in VStack<\/code>, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u0435\u043a \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0435\u043a.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack { VStack(alignment: .leading, spacing: 2) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) } }     } }<\/code><\/pre>\n<h3>\u0418\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 View\u00a0<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0442\u0440\u044e\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434. \u041f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 <code>ContentView<\/code> \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c. \u0412\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0431\u043b\u043e\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0434 \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0412 Xcode \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u0434\u0430 SwiftUI. \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u043e <code>VStack<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0432\u044c\u044e. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u00ab<code>Extract subview<\/code>\u00bb \u0434\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>Xcode \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>ExtractedView<\/code>. \u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 <code>ExtractedView<\/code> \u0432 <code>HeaderView<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"swift\">struct ContentView: View {     var body: some View { VStack { HeaderView() }     } }   struct HeaderView: View { var body: some View { VStack(alignment: .leading, spacing: 2) { Text(\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) Text(\"\u0412\u0430\u0448 \u0434\u0435\u0432\u0430\u0439\u0441\") .font(.system(.largeTitle, design: .rounded)) .fontWeight(.black) .padding(.leading) } } }<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0432 <code>ContentView<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u0439 \u0438 \u043b\u0435\u0433\u043a\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u043b\u0438\u0442\u043e\u043a \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u043b\u0438\u0442\u043a\u0438 Apple Watch. \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 <code>ContentView<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { VStack { Text(\"Apple Watch\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.white) Text(\"$500\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.white) Text(\"Series X\") .font(.headline) .foregroundColor(.white) } .padding(40) .background(Color.gray) .cornerRadius(10) } } } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d <code>VStack<\/code> \u043f\u043e\u0434 <code>HeaderView<\/code>. \u042d\u0442\u043e\u0442 <code>VStack<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043b\u0438\u0442\u043a\u0438 Apple Watch. \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 <code>padding<\/code>, <code>background<\/code> \u0438 <code>cornerRadius<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u044d\u0442\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043b\u0438\u0442\u043a\u0438 IPhone. \u042d\u0442\u0430 \u043f\u043b\u0438\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u043f\u0440\u044f\u043c\u043e \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u043b\u0438\u0442\u043a\u043e\u0439 Apple Watch. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043b\u043e\u0436\u0438\u0442\u044c <code>VStack<\/code> \u0441 Apple Watch \u0432 <code>HStack<\/code>. \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u043e <code>VStack<\/code> \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u00ab<code>Embed in HStack<\/code>\u00bb.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>Xcode \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"swift\">struct ContentView: View { var body: some View { VStack { HeaderView() VStack { HStack { VStack { Text(\"Apple Watch\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.white) Text(\"$500\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.white) Text(\"Series X\") .font(.headline) .foregroundColor(.white) } .padding(40) .background(Color.gray) .cornerRadius(10) } } } } } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043b\u0438\u0442\u043a\u0438 iPhone. \u041a\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043a\u043e\u0434 \u043f\u043b\u0438\u0442\u043a\u0438 Apple Watch, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0444\u043e\u043d\u0430 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0434 <code>cornerRadius(10)<\/code>:<\/p>\n<pre><code class=\"swift\">VStack { Text(\"Iphone\") .font(.system(.title, design: .rounded)) .fontWeight(.black) .foregroundColor(.orange) Text(\"$999\") .font(.system(size: 40, weight: .heavy, design: .rounded)) .foregroundColor(.orange) Text(\"Series X\") .font(.headline) .foregroundColor(.orange) } .padding(40) .background(Color.green) .cornerRadius(10)<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043b\u0438\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c, \u043d\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043b\u0438\u0446\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2014 \u043e\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0438 \u043a\u0430\u043a\u043e\u0439 \u0432 \u043d\u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0421\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0435\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>frame<\/code> c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043f\u043b\u0438\u0442\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0435\u043a\u0430 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u043d\u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434 <code>VStack<\/code> \u043d\u0430\u0448\u0438\u0445 \u043f\u043b\u0438\u0442\u043e\u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443<\/p>\n<pre><code class=\"swift\">.frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 140)<\/code><\/pre>\n<figure class=\"full-width\"><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 28\u00a0\u0438 45\u00a0\u0441\u0442\u0440\u043e\u043a\u0438. \u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u0444\u0440\u0435\u0439\u043c \u043f\u043b\u0438\u0442\u043e\u043a \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, <code>minWidth<\/code> \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0430\u0432\u043d\u0430 \u043d\u0443\u043b\u044e, \u043d\u043e\u00a0<code>maxWidth<\/code> \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043a\u0430\u043a\u00a0\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u044c\u044e \u0438 \u0435\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0443\u00a0\u043d\u0430\u0441 \u0434\u0432\u0430 \u0432\u044c\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e <code>HStack<\/code> \u043e\u043d \u0432\u00a0\u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442 \u0438\u0445 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443, \u0442\u0435\u043f\u0435\u0440\u044c<\/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-370292","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/370292","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=370292"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/370292\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=370292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=370292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=370292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}