{"id":333989,"date":"2022-06-02T21:00:14","date_gmt":"2022-06-02T21:00:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=333989"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=333989","title":{"rendered":"<span>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Jeptack Compose<\/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<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6e3\/b97\/0ef\/6e3b970ef0a84afdee947626fbc0eeb8.png\" width=\"1600\" height=\"896\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6e3\/b97\/0ef\/6e3b970ef0a84afdee947626fbc0eeb8.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0430\u0448\u0430, \u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0411\u0430\u043d\u043a\u0430 \u0420\u041d\u041a\u0411. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Compose.<\/p>\n<p>\u0412 \u0438\u044e\u043b\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 Google <a href=\"https:\/\/android-developers.googleblog.com\/2021\/07\/jetpack-compose-announcement.html\" rel=\"noopener noreferrer nofollow\"><u>\u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b<\/u><\/a> \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Jetpack Compose, \u0430 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443\u0436\u0435 \u0432\u044b\u0448\u043b\u0430 \u0432\u0435\u0440\u0441\u0438\u044f 1.1. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u043e\u043b\u0433\u043e \u0434\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430, \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u0435\u0442\u0430\u043c\u043e\u0440\u0444\u043e\u0437\u044b API \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0438\u0441\u044c(\u0445\u043e\u0442\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438 \u0432\u0441\u0451 \u0435\u0449\u0451 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <em>@Experimental*Api<\/em>). \u0421\u0430\u043c Compose \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u043b production ready (\u043d\u0443 \u0442\u0430\u043a \u043e\u0431\u0435\u0449\u0430\u044e\u0442).<\/p>\n<h2>\u0424\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h2>\n<p>\u0412 Jetpack Compose \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 UI \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u0434\u0435. \u041d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f Android \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 (\u0432 \u043a\u043e\u0434\u0435), \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0414\u0443\u043c\u0430\u044e \u0442\u0435, \u043a\u0442\u043e \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 React \u0438\u043b\u0438 Flutter, \u0441\u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0445\u043e\u0434\u0443.<\/p>\n<p>\u0415\u0434\u0438\u043d\u0438\u0446\u0435\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u0430\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <em>@Composable<\/em>.\u00a0 \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u044c\u044e\u0448\u0435\u043a \u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435!<\/p>\n<p><em>AndroidStudio<\/em> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0442\u0443\u043b\u0438\u043d\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u0430 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <em>@Preview<\/em> \u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>@PreviewParameter<\/em>). <em>@Preview<\/em> \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <em>widthDp<\/em>, <em>heightDp<\/em> \u2500 \u0437\u0430\u0434\u0430\u044e\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d \u043f\u0440\u0435\u0432\u044c\u044e, <em>device<\/em> \u2500 \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c, <em>showSystemUi<\/em> \u2500 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0440\u0430\u043c\u043a\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441 app bar, status bar \u0438 bottom bar, locale \u2500 \u0437\u0430\u0434\u0430\u0451\u0442 \u043b\u043e\u043a\u0430\u043b\u044c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041a\u0440\u043e\u043c\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u0440\u0435\u0432\u044c\u044e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c live edit \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a, Int-\u043e\u0432, \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0435\u0439(Dp), \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 Boolean. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u043d\u0441\u043f\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 UI \u0432 \u0446\u0435\u043b\u043e\u043c.\u00a0\u00a0<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Jetpack Compose \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0432 Empty Compose Activity \u0432 \u0432\u0438\u0437\u0430\u0440\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0434\u0432\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"kotlin\">@Preview @Composable fun HelloCompose( \u00a0\u00a0\u00a0title: String = \"Hello compose\", \u00a0\u00a0\u00a0content: String = \"Text from Jetpack compose\", ) { \u00a0\u00a0\u00a0Text(text = title) \u00a0\u00a0\u00a0Text(text = content) }<\/code><\/pre>\n<p> \u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Preview \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/399\/89b\/a56\/39989ba566f8856598a52dda830a30e3.png\" width=\"472\" height=\"52\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/399\/89b\/a56\/39989ba566f8856598a52dda830a30e3.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0415\u0441\u0442\u044c \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: <em>Box<\/em>, <em>Column<\/em> \u0438 <em>Row<\/em>. <em>Box<\/em> \u2013 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0430\u043d\u0430\u043b\u043e\u0433 <em>FrameLayout<\/em>, \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0441\u043a\u043e\u0443\u043f BoxScope \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 <em>BoxScope.align<\/em>. \u041a\u0441\u0442\u0430\u0442\u0438, \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u2013 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <em>Box<\/em>:<\/p>\n<pre><code class=\"kotlin\">@Preview @Composable fun BoxSample() { \u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Red) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.size(200.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(32.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Green) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(32.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Blue) \u00a0\u00a0\u00a0) }<\/code><\/pre>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f6c\/eb0\/69e\/f6ceb069efd48629a39c7cb94c24560c.png\" width=\"550\" height=\"550\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f6c\/eb0\/69e\/f6ceb069efd48629a39c7cb94c24560c.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d Box, \u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0430\u0436 \u0442\u0440\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432. \u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c? \u0412\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u0445. \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0432\u0430\u0436\u0435\u043d: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0444\u043e\u043d \u0438 \u0437\u0430\u0434\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u043b\u043e\u043a\u0430, \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 <em>32dp<\/em> \u0438 \u0437\u0430\u043b\u0438\u043b\u0438 \u0437\u0435\u043b\u0435\u043d\u044b\u043c \u2500 \u0442\u0435\u043f\u0435\u0440\u044c \u0444\u043e\u043d \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u043c\u043e\u043a. \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0433\u0440\u0430\u043d\u0438\u0446. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0438 <em>margin<\/em>, \u0438<em> padding<\/em>, \u0438 <em>border<\/em> (\u0445\u043e\u0442\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440).<\/p>\n<h2>Column<\/h2>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <em>LinearLayout<\/em> \u0441 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u043e\u043c. \u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: <em>horizontalAlignment: Alignment.Horizontal<\/em> \u0438 <em>verticalArrangement: Arrangement.Vertical.<\/em> <em>HorizontalAlignment<\/em>  \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <em>Alignment.Start<\/em>, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e (\u043b\u0438\u0431\u043e \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u0432 right-to-left \u0440\u0435\u0436\u0438\u043c\u0435).<\/p>\n<p><em>VerticalArrangement<\/em> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <em>Arrangement.Top<\/em>, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u0432\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 (<em>Center<\/em>), \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (<em>SpaceAround<\/em>, <em>SpaceEvenly<\/em>, <em>SpaceBetween<\/em>) \u043b\u0438\u0431\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (<em>spacedBy()<\/em>).\u00a0<\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 180, heightDp = 200) @Composable fun ColumnSample() { \u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Top, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0repeat(5) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth(fraction = 0.9f) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(36.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(6.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Gray) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(4.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/967\/16c\/2dc\/96716c2dcad3b60e556d221e82d517d6.png\" width=\"495\" height=\"550\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/967\/16c\/2dc\/96716c2dcad3b60e556d221e82d517d6.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f Kotlin repeat. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0439\u0434\u044f \u0432 \u0446\u0438\u043a\u043b\u0435.\u00a0<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, <em>Column<\/em> \u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <em>fllMaxWidth()<\/em>. C \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <em>fraction<\/em> \u043c\u044b \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c 90% \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u2013 <em>clip()<\/em>. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u043c\u044b \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u043c \u043a\u0440\u0430\u044f \u0441 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c 6dp.<\/p>\n<p>\u0410 \u0435\u0449\u0451 \u043d\u0438\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <em>Spacer<\/em> \u2013 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c \u043c\u0435\u0441\u0442\u0430.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b \u0434\u043b\u044f <em>Column<\/em>, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <em>verticalScroll()<\/em>. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <em>ScrollState<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>rememberScrollState()<\/em>. <\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 320, heightDp = 600) @Composable fun ScrollableColumnSample() { \u00a0\u00a0\u00a0val scrollState = rememberScrollState()  \u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Top, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.verticalScroll(scrollState) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0repeat(20) { position ->  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0println(\"Build item at position $position\")  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Row { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0MyListItem( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position = position, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color = Color.Gray, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(4.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} } <\/code><\/pre>\n<h2>Row<\/h2>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c <em>Row<\/em>. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e <em>Row<\/em> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e.\u00a0<\/p>\n<h2>LazyColumn, LazyRow<\/h2>\n<p><em>Column<\/em> \u0438 <em>Row<\/em> \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u044d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435, \u0447\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <em>RecyclerView<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0433 \u0431\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0438 \u043e\u043d \u0435\u0441\u0442\u044c\u00a0 \u2013 <em>LazyColumn<\/em> \u0438 <em>LazyRow<\/em>.<\/p>\n<p>\u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0441\u043a\u043e\u0443\u043f <em>LazyListScope<\/em>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u0441\u0442\u0430\u0442\u0438, \u0441\u043a\u0440\u043e\u043b\u043b \u044d\u0442\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u2013 \u043e\u043d \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d.<\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 320, heightDp = 300) @Composable fun LazyColumnSample() { \u00a0\u00a0\u00a0LazyColumn( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Top, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0items(100) { position ->  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0println(\"Build item at position $position\")  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Row { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0MyListItem( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position = position, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color = Color.Gray, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(4.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}    }  @Preview(widthDp = 320, heightDp = 50) @Composable fun MyListItem( \u00a0\u00a0\u00a0position: Int = 0, \u00a0\u00a0\u00a0color: Color = Color.Gray, ) { \u00a0\u00a0\u00a0Row( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth(fraction = 0.9f) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(4.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(42.dp) \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.aspectRatio(1.0f, matchHeightConstraintsFirst = true) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(CircleShape) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = position.toString(), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = MaterialTheme.typography.subtitle1, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.align(Alignment.Center) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.width(6.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(12.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(2.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(8.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth(fraction = 0.6f) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(8.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(2.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043b\u0435\u043d\u0438\u0432\u043e. \u0415\u0449\u0451 \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438. \u0412 Compose \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e.<\/p>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043b\u0430\u0439\u0444\u0445\u0430\u043a: \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0432\u0440\u043e\u0434\u0435 <em>LazyColumn<\/em> \u0438 <em>LazyRow<\/em>, \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u0430\u043a <em>key<\/em>.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e: \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043f\u043c\u043e\u0437\u0438\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u041c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0430\u043d\u0430\u043b\u043e\u0433 <em>DiffUtil<\/em>.<\/p>\n<h2>BoxWithConstraints<\/h2>\n<p>\u0411\u043e\u043d\u0443\u0441\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u2013 <em>BoxWithConstraints<\/em>.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043a\u043e\u0443\u043f <em>BoxWithConstraintsScope<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: <em>minWidth<\/em>, <em>maxWidth<\/em>, <em>minHeight<\/em>, <em>maxHeight<\/em>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430.\u00a0<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c 60% \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"kotlin\">@Preview(device = Devices.PIXEL_4) @Composable fun BoxWithConstraintsSample( \u00a0\u00a0\u00a0splitFraction: Float = 0.6f, ) { \u00a0\u00a0\u00a0BoxWithConstraints( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentAlignment = Alignment.TopCenter, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0val offset = 24.dp  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Image( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0painter = painterResource(R.drawable.sample_mini), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentScale = ContentScale.FillHeight, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentDescription = stringResource(R.string.sample_description), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(maxHeight * splitFraction) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.offset(y = maxHeight * splitFraction - offset) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(percent = 6)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color = MaterialTheme.colors.background) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(offset) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = stringResource(R.string.box_constraints_title), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = MaterialTheme.typography.h6, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(8.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = stringResource(R.string.box_constraints_content), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = MaterialTheme.typography.body1, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<p>\u0418\u0437 \u043d\u043e\u0432\u0448\u0435\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u2500 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e <em>painterResource<\/em> \u2013 \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <em>Resources.getDrawable()<\/em>, <em>stringResource<\/em> \u2013 \u0430\u043d\u0430\u043b\u043e\u0433 <em>Resources.getString()<\/em>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>ContentScale.FillHeight<\/em> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Image \u043c\u044b \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <em>None,Crop, Fit, FillWidth, Inside, FillBounds.<\/em> \u0420\u0430\u0431\u043e\u0442\u0430 \u044d\u0442\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 <em>ImageView.ScaleType<\/em>. <\/p>\n<h2>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0439<\/h2>\n<p>\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0439: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 <em>Modifier.clickable()<\/em> \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a material \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (<em>Button, OutlinedButton, TextButton<\/em>). \u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u044d\u043a\u0440\u0430\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.\u00a0<\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 300, heightDp = 600) @Composable fun ButtonSample() { \u00a0\u00a0\u00a0val counter = remember { mutableStateOf(0) }  \u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Center, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = \"Counter value: ${counter.value}\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = MaterialTheme.typography.h4, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(12.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Button( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.align(Alignment.CenterHorizontally), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0counter.value++ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text(\"Increment\", color = Color.White) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<h2>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043c \u043a \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Compose: \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412\u0435\u0440\u043d\u0435\u0435 \u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f <em>rememberScrollState()<\/em>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0435\u043c\u0443 \u0437\u0430\u0431\u043b\u0430\u0433\u043e\u0440\u0430\u0441\u0441\u0443\u0434\u0438\u0442\u0441\u044f, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0438\u0434\u0435\u044f. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043b\u0438\u0448\u044c \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <em>remember()<\/em>. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432\u043d\u0443\u0442\u0440\u044c \u0431\u043b\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0434\u0430\u0435\u0442\u0441\u044f <em>mutableStateOf()<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u00a0 <em>MutableState&lt;T><\/em>, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u0411\u043b\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 remember() \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u00a0 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <em>MutableState<\/em> \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043a\u043e\u0443\u043f\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 300, heightDp = 600) @Composable fun ButtonSample() { \u00a0\u00a0\u00a0val counter = remember { mutableStateOf(0) }  \u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Center, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = \"Counter value: ${counter.value}\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = MaterialTheme.typography.h4, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(12.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Button( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.align(Alignment.CenterHorizontally), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0counter.value++ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text(\"Increment\", color = Color.White) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<h2>State Hoisting<\/h2>\n<p>\u0425\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0435\u0433\u043e \u0438\u0437\u0432\u043d\u0435. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u044c \u0434\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u043b\u044f\u043c\u0431\u0434\u044b, \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e9d\/1ca\/961\/e9d1ca961f739dba02b5fcf62990a517.gif\" width=\"398\" height=\"674\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e9d\/1ca\/961\/e9d1ca961f739dba02b5fcf62990a517.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <em>remember()<\/em> \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u2013 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 <em>Activity<\/em> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u044f\u043d\u043e.<\/p>\n<p>\u0412\u044b\u0445\u043e\u0434\u043e\u043c \u0438\u0437 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442\u044c \u0442\u043e\u0442 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 \u043c\u0435\u0442\u043e\u0434 \u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <em>ViewModel<\/em>. <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <em>LiveData<\/em>, <em>StateFlow<\/em>, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u044f \u0438\u0445 \u0432 <em>State<\/em>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <em>observeAsState()<\/em> \u0438 <em>collectAsState()<\/em> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <em>ViewModel<\/em> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>viewModel()<\/em>.\u00a0<\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u044b \u0438\u043c\u0435\u0435\u043c <em>LocalViewModelStoreOwner<\/em>, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043e\u0434\u0438\u043d \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <em>ViewModel<\/em> \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043a\u043e\u0443\u043f\u0435.\u00a0<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 ViewModel<\/h2>\n<pre><code class=\"kotlin\">@ExperimentalMaterialApi @Preview @Composable fun ScreenViewViewModelSample( \u00a0\u00a0\u00a0viewModel: SocialNetworksListViewModel = viewModel(), ) { \u00a0\u00a0\u00a0val scrollState = rememberScrollState()  \u00a0\u00a0\u00a0Scaffold( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0topBar = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0TopAppBar( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title = { Text(stringResource(R.string.social_networks_list_title)) }, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0val socialNetworksState = viewModel.state.collectAsState()  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0val allSocialNetworks = socialNetworksState.value.allSocialNetworks \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0val favourite = socialNetworksState.value.favourite  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column(modifier = Modifier.verticalScroll(scrollState)) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allSocialNetworks.forEach { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ListItem( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier.clickable( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0interactionSource = remember { MutableInteractionSource() }, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0indication = rememberRipple(bounded = true), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0viewModel.setFavourite(it) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetworkIcon( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = it.name.take(1), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backgroundColor = Color(it.backgroundColorHex), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text(it.name) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0secondaryText = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text(it.url) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0trailing = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (it == favourite) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FavouriteIcon() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }  @Composable private fun FavouriteIcon() { \u00a0\u00a0\u00a0Icon( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageVector = Icons.Filled.Favorite, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentDescription = stringResource(R.string.favourite), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tint = Color.Red, \u00a0\u00a0\u00a0) }  @Composable private fun SocialNetworkIcon( \u00a0\u00a0\u00a0text: String = \"A\", \u00a0\u00a0\u00a0backgroundColor: Color, ) { \u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.size(42.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(CircleShape) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(backgroundColor) \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = text, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = TextStyle( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize = 24.sp, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight = FontWeight.SemiBold, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color = Color.White, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0shadow = Shadow( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color = Color.DarkGray, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0offset = Offset(6f, 4f), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0blurRadius = 6f, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier.align(Alignment.Center) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>SocialNetworksListViewModel.kt<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">class SocialNetworksListViewModel : ViewModel() {  \u00a0\u00a0\u00a0data class SocialNetworksListState( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0val allSocialNetworks: List&lt;SocialNetwork> = emptyList(), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0val favourite: SocialNetwork? = null, \u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0private val _state = MutableStateFlow( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetworksListState( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allSocialNetworks = listOf( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetwork(\"Facebook\", \"https:\/\/facebook.com\", 0xFF4267B2L), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetwork(\"WhatsApp\", \"https:\/\/whatsapp.com\/\", 0xFF25D366L), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetwork(\"Instagram\", \"https:\/\/instagram.com\/\", 0xFFE1306CL), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetwork(\"Twitter\", \"https:\/\/twitter.com\/\", 0xFF1DA1F2L), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetwork(\"VK\", \"https:\/\/vk.com\/\", 0xFF4C75A3L), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SocialNetwork(\"Telegram\", \"https:\/\/telegram.org\/\", 0xFF0088CCL), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0val state: StateFlow&lt;SocialNetworksListState> = _state.asStateFlow()  \u00a0\u00a0\u00a0fun setFavourite(socialNetwork: SocialNetwork) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_state.tryEmit( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_state.value.copy( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0favourite = socialNetwork \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>SocialNetwork.kt<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">data class SocialNetwork( \u00a0\u00a0\u00a0val name: String, \u00a0\u00a0\u00a0val url: String, \u00a0\u00a0\u00a0val backgroundColorHex: Long, )<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2013 <em>Scaffold<\/em>. <em>Scaffold<\/em> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0448\u0432\u0435\u0439\u0446\u0430\u0440\u0441\u043a\u0438\u0439 \u043d\u043e\u0436, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b Material \u044d\u043a\u0440\u0430\u043d\u0430: TopBar, BottomBar, Drawer, Floating action button. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/723\/016\/f68\/723016f680ce6b2766a5d694133dff83.gif\" width=\"486\" height=\"864\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/723\/016\/f68\/723016f680ce6b2766a5d694133dff83.gif\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/h2>\n<p>\u0414\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u0430 \u4e00 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. Compose \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0440\u0443\u0442\u0435\u0439\u0448\u0438\u0439 API \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0414\u043b\u044f \u0435\u0433\u043e \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0432\u044f\u0442\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e. \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u4e00 \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>FavouriteIcon()<\/em>.<\/p>\n<pre><code class=\"kotlin\">@Preview @Composable private fun FavouriteIcon( \u00a0\u00a0\u00a0visible: Boolean = true, ) { \u00a0\u00a0\u00a0val scale by animateFloatAsState( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0targetValue = if (visible) 1f else 0f, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0animationSpec = tween( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0durationMillis = 300, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0easing = FastOutSlowInEasing, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0Icon( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageVector = Icons.Filled.Favorite, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentDescription = stringResource(R.string.favourite), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tint = Color.Red, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier.scale(scale), \u00a0\u00a0\u00a0) }<\/code><\/pre>\n<p>Property \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432 Compose \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430.\u00a0 \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>animate*AsState()<\/em>, \u0433\u0434\u0435 \u201c*\u201d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c: <em>Float, Dp, Size, Offset, Rect, Int, IntOffset,<\/em> <em>IntSize<\/em> \u043b\u0438\u0431\u043e \u043b\u044e\u0431\u043e\u0439 \u0442\u0438\u043f, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>TwoWayConverter<\/em>. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <em>targetValue<\/em> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 <em>animationSpec<\/em> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0442\u0438\u043f \u043a\u0440\u0438\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.\u00a0<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0438\u043f\u044b <em>AnimationSpec<\/em>:\u00a0<\/p>\n<ul>\n<li>\n<p><em>TweenSpec<\/em>  \u2013 \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441 \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439  \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p><em>SpringSpec<\/em>  \u2013 physics-based \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><em>KeyframesSpec<\/em>  \u2013 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445  \u043a\u0430\u0434\u0440\u0430\u0445<\/p>\n<\/li>\n<\/ul>\n<p> \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e5c\/cb6\/7dc\/e5ccb67dcef3760b0dcf200c94f620ce.gif\" width=\"486\" height=\"864\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e5c\/cb6\/7dc\/e5ccb67dcef3760b0dcf200c94f620ce.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0432\u0435\u0441\u0442\u0438 \u0438\u0442\u043e\u0433\u0438. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Compose. \u041c\u044b \u043f\u0440\u043e\u0448\u043b\u0438\u0441\u044c \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043c, \u0430 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043d\u043e\u0439. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043f\u0440\u043e\u0448\u043b\u0438\u0441\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e.\u00a0<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c UI \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 Compose Desktop \u0438 Compose Web \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c copy-paste. Jetpack Compose \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p>\u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0432\u0441\u0435 \u043f\u043b\u044e\u0441\u044b, \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438.\u00a0<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Jetpack Compose \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Kotlin (\u0445\u043e\u0442\u044f \u043f\u043e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e Android \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0443\u0436\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u043d\u0430 Kotlin).\u00a0<\/p>\n<\/li>\n<li>\n<p> \u041d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 SDK 21+ (\u043a\u0442\u043e-\u0442\u043e \u0435\u0449\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Android 4).<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438  \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043d\u0430\u0447\u0430\u043b\u0438 \u0432\u044b\u043b\u0435\u0437\u0430\u0442\u044c \u0444\u0430\u043d\u0442\u043e\u043c\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 Backend Internal error: Exception during IR lowering \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a Compose \u044d\u043a\u0440\u0430\u043d\u0430\u043c (\u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0430\u0434\u043d\u043e, \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u0441 \u0438\u043d\u0442\u0435\u0440\u043e\u043f\u0435\u0440\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e  \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u043e). <\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435. \u042d\u0442\u043e \u043d\u0430\u0448\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. \u041d\u0435 \u043a\u0438\u0434\u0430\u0439\u0442\u0435\u0441\u044c \u043a\u0430\u043c\u043d\u044f\u043c\u0438. \u0411\u0443\u0434\u0435\u043c \u0440\u0430\u0434\u044b \u0432\u044b\u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043a\u0440\u0438\u0442\u0438\u043a\u0443.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/post\/669374\/\"> https:\/\/habr.com\/ru\/post\/669374\/<\/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<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0430\u0448\u0430, \u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0411\u0430\u043d\u043a\u0430 \u0420\u041d\u041a\u0411. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Compose.<\/p>\n<p>\u0412 \u0438\u044e\u043b\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 Google <a href=\"https:\/\/android-developers.googleblog.com\/2021\/07\/jetpack-compose-announcement.html\" rel=\"noopener noreferrer nofollow\"><u>\u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b<\/u><\/a> \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Jetpack Compose, \u0430 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443\u0436\u0435 \u0432\u044b\u0448\u043b\u0430 \u0432\u0435\u0440\u0441\u0438\u044f 1.1. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u043e\u043b\u0433\u043e \u0434\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430, \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u0435\u0442\u0430\u043c\u043e\u0440\u0444\u043e\u0437\u044b API \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0438\u0441\u044c(\u0445\u043e\u0442\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438 \u0432\u0441\u0451 \u0435\u0449\u0451 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <em>@Experimental*Api<\/em>). \u0421\u0430\u043c Compose \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u043b production ready (\u043d\u0443 \u0442\u0430\u043a \u043e\u0431\u0435\u0449\u0430\u044e\u0442).<\/p>\n<h2>\u0424\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h2>\n<p>\u0412 Jetpack Compose \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 UI \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u0434\u0435. \u041d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f Android \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 (\u0432 \u043a\u043e\u0434\u0435), \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0414\u0443\u043c\u0430\u044e \u0442\u0435, \u043a\u0442\u043e \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 React \u0438\u043b\u0438 Flutter, \u0441\u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0445\u043e\u0434\u0443.<\/p>\n<p>\u0415\u0434\u0438\u043d\u0438\u0446\u0435\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u0430\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <em>@Composable<\/em>.\u00a0 \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u044c\u044e\u0448\u0435\u043a \u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435!<\/p>\n<p><em>AndroidStudio<\/em> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0442\u0443\u043b\u0438\u043d\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u0430 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <em>@Preview<\/em> \u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>@PreviewParameter<\/em>). <em>@Preview<\/em> \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <em>widthDp<\/em>, <em>heightDp<\/em> \u2500 \u0437\u0430\u0434\u0430\u044e\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d \u043f\u0440\u0435\u0432\u044c\u044e, <em>device<\/em> \u2500 \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c, <em>showSystemUi<\/em> \u2500 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0440\u0430\u043c\u043a\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441 app bar, status bar \u0438 bottom bar, locale \u2500 \u0437\u0430\u0434\u0430\u0451\u0442 \u043b\u043e\u043a\u0430\u043b\u044c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041a\u0440\u043e\u043c\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u0440\u0435\u0432\u044c\u044e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c live edit \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a, Int-\u043e\u0432, \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0435\u0439(Dp), \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 Boolean. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u043d\u0441\u043f\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 UI \u0432 \u0446\u0435\u043b\u043e\u043c.\u00a0\u00a0<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Jetpack Compose \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0432 Empty Compose Activity \u0432 \u0432\u0438\u0437\u0430\u0440\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0434\u0432\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"kotlin\">@Preview @Composable fun HelloCompose( \u00a0\u00a0\u00a0title: String = \"Hello compose\", \u00a0\u00a0\u00a0content: String = \"Text from Jetpack compose\", ) { \u00a0\u00a0\u00a0Text(text = title) \u00a0\u00a0\u00a0Text(text = content) }<\/code><\/pre>\n<p> \u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Preview \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:  <\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0415\u0441\u0442\u044c \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: <em>Box<\/em>, <em>Column<\/em> \u0438 <em>Row<\/em>. <em>Box<\/em> \u2013 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0430\u043d\u0430\u043b\u043e\u0433 <em>FrameLayout<\/em>, \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0441\u043a\u043e\u0443\u043f BoxScope \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 <em>BoxScope.align<\/em>. \u041a\u0441\u0442\u0430\u0442\u0438, \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u2013 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <em>Box<\/em>:<\/p>\n<pre><code class=\"kotlin\">@Preview @Composable fun BoxSample() { \u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Red) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.size(200.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(32.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Green) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(32.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Blue) \u00a0\u00a0\u00a0) }<\/code><\/pre>\n<figure class=\"bordered full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d Box, \u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0430\u0436 \u0442\u0440\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432. \u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c? \u0412\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u0445. \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0432\u0430\u0436\u0435\u043d: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0444\u043e\u043d \u0438 \u0437\u0430\u0434\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u043b\u043e\u043a\u0430, \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 <em>32dp<\/em> \u0438 \u0437\u0430\u043b\u0438\u043b\u0438 \u0437\u0435\u043b\u0435\u043d\u044b\u043c \u2500 \u0442\u0435\u043f\u0435\u0440\u044c \u0444\u043e\u043d \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u043c\u043e\u043a. \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0433\u0440\u0430\u043d\u0438\u0446. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0438 <em>margin<\/em>, \u0438<em> padding<\/em>, \u0438 <em>border<\/em> (\u0445\u043e\u0442\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440).<\/p>\n<h2>Column<\/h2>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <em>LinearLayout<\/em> \u0441 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u043e\u043c. \u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: <em>horizontalAlignment: Alignment.Horizontal<\/em> \u0438 <em>verticalArrangement: Arrangement.Vertical.<\/em> <em>HorizontalAlignment<\/em>  \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <em>Alignment.Start<\/em>, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e (\u043b\u0438\u0431\u043e \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u0432 right-to-left \u0440\u0435\u0436\u0438\u043c\u0435).<\/p>\n<p><em>VerticalArrangement<\/em> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <em>Arrangement.Top<\/em>, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u0432\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 (<em>Center<\/em>), \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (<em>SpaceAround<\/em>, <em>SpaceEvenly<\/em>, <em>SpaceBetween<\/em>) \u043b\u0438\u0431\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (<em>spacedBy()<\/em>).\u00a0<\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 180, heightDp = 200) @Composable fun ColumnSample() { \u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Top, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0repeat(5) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth(fraction = 0.9f) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(36.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(6.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.Gray) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(4.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f Kotlin repeat. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0439\u0434\u044f \u0432 \u0446\u0438\u043a\u043b\u0435.\u00a0<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, <em>Column<\/em> \u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <em>fllMaxWidth()<\/em>. C \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <em>fraction<\/em> \u043c\u044b \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c 90% \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u2013 <em>clip()<\/em>. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u043c\u044b \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u043c \u043a\u0440\u0430\u044f \u0441 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c 6dp.<\/p>\n<p>\u0410 \u0435\u0449\u0451 \u043d\u0438\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <em>Spacer<\/em> \u2013 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c \u043c\u0435\u0441\u0442\u0430.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b \u0434\u043b\u044f <em>Column<\/em>, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <em>verticalScroll()<\/em>. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <em>ScrollState<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>rememberScrollState()<\/em>. <\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 320, heightDp = 600) @Composable fun ScrollableColumnSample() { \u00a0\u00a0\u00a0val scrollState = rememberScrollState()  \u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Top, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.verticalScroll(scrollState) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0repeat(20) { position ->  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0println(\"Build item at position $position\")  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Row { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0MyListItem( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position = position, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color = Color.Gray, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(4.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} } <\/code><\/pre>\n<h2>Row<\/h2>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c <em>Row<\/em>. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e <em>Row<\/em> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e.\u00a0<\/p>\n<h2>LazyColumn, LazyRow<\/h2>\n<p><em>Column<\/em> \u0438 <em>Row<\/em> \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u044d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435, \u0447\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <em>RecyclerView<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0433 \u0431\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0438 \u043e\u043d \u0435\u0441\u0442\u044c\u00a0 \u2013 <em>LazyColumn<\/em> \u0438 <em>LazyRow<\/em>.<\/p>\n<p>\u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0441\u043a\u043e\u0443\u043f <em>LazyListScope<\/em>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u0441\u0442\u0430\u0442\u0438, \u0441\u043a\u0440\u043e\u043b\u043b \u044d\u0442\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u2013 \u043e\u043d \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d.<\/p>\n<pre><code class=\"kotlin\">@Preview(widthDp = 320, heightDp = 300) @Composable fun LazyColumnSample() { \u00a0\u00a0\u00a0LazyColumn( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0horizontalAlignment = Alignment.CenterHorizontally, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0verticalArrangement = Arrangement.Top, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxSize() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(Color.White), \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0items(100) { position ->  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0println(\"Build item at position $position\")  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Row { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0MyListItem( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position = position, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color = Color.Gray, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(4.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}    }  @Preview(widthDp = 320, heightDp = 50) @Composable fun MyListItem( \u00a0\u00a0\u00a0position: Int = 0, \u00a0\u00a0\u00a0color: Color = Color.Gray, ) { \u00a0\u00a0\u00a0Row( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth(fraction = 0.9f) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.padding(4.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(42.dp) \u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.aspectRatio(1.0f, matchHeightConstraintsFirst = true) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(CircleShape) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text = position.toString(), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style = MaterialTheme.typography.subtitle1, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.align(Alignment.Center) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.width(6.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Column( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth() \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(12.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(2.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Spacer(modifier = Modifier.height(8.dp))  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Box( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0modifier = Modifier \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.fillMaxWidth(fraction = 0.6f) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.height(8.dp) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.clip(shape = RoundedCornerShape(2.dp)) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.background(color) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0} }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043b\u0435\u043d\u0438\u0432\u043e. \u0415\u0449\u0451 \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438. \u0412 Compose \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e.<\/p>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043b\u0430\u0439\u0444\u0445\u0430\u043a: \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0432\u0440\u043e\u0434\u0435 <em>LazyColumn<\/em> \u0438 <em>LazyRow<\/em>, \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u0430\u043a <em>key<\/em>.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e: \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043f\u043c\u043e\u0437\u0438\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u041c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0430\u043d\u0430\u043b\u043e\u0433 <em>DiffUtil<\/em>.<\/p>\n<h2>BoxWithConstraints<\/h2>\n<p>\u0411\u043e\u043d\u0443\u0441\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u2013 <em>BoxWithConstraints<\/em>.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043a\u043e\u0443\u043f <em>BoxWithConstraintsScope<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: <em>minWidth<\/em>, <em>maxWidth<\/em>, <em>minHeight<\/em>, <em>maxHeight<\/em>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430.\u00a0<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-333989","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333989","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=333989"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333989\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}