{"id":376087,"date":"2024-05-21T06:41:32","date_gmt":"2024-05-21T06:41:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=376087"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=376087","title":{"rendered":"<span>DivKit \u0442\u0435\u043f\u0435\u0440\u044c \u0438 \u0434\u043b\u044f Flutter. \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 BDUI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u042f\u043d\u0434\u0435\u043a\u0441\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043c\u044b <a href=\"https:\/\/habr.com\/ru\/companies\/yandex\/articles\/683886\/\">\u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438<\/a> \u0432 \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441 DivKit \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d \u0443\u0436\u0435 \u043f\u0440\u043e\u0448\u0451\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u042f\u043d\u0434\u0435\u043a\u0441, \u0410\u043b\u0438\u0441\u0435, \u041c\u0430\u0440\u043a\u0435\u0442\u0435, \u0415\u0434\u0430\u0434\u0438\u043b\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0448\u0451\u043b \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c. \u0418 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441 \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0432\u0430\u0436\u043d\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c: \u043c\u044b \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e\u043b\u0433\u043e\u0436\u0434\u0430\u043d\u043d\u044b\u0439 <a href=\"https:\/\/pub.dev\/packages\/divkit\">\u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043b\u044f Flutter<\/a>.\u00a0<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0432 DivKit \u0438 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 UI. \u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u0444\u0438\u0447\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Flutter \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u041f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/956\/580\/b1e\/956580b1e54fa59c1115d5f7dbe7a406.png\" width=\"1560\" height=\"880\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/956\/580\/b1e\/956580b1e54fa59c1115d5f7dbe7a406.png\"\/><\/figure>\n<h2>\u0427\u0442\u043e \u0438 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0435\u043b\u0430\u0442\u044c<\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0438\u0447\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e. \u041d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0445\u0435\u043c\u0430\u0445 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d presentation, \u0437\u0435\u043b\u0451\u043d\u044b\u043c \u2014 domain, \u0430 \u0441\u0438\u043d\u0438\u043c \u2014 data. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 <em>divkit\/lib\/src\/core\/protocol\/\u2026<\/em><\/p>\n<h3>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/072\/7e1\/825\/0727e182599d7e69ca071370c65b1c50.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430\" width=\"1266\" height=\"1174\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/072\/7e1\/825\/0727e182599d7e69ca071370c65b1c50.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 <em>\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 DivKit \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438: \u0431\u0430\u0437\u043e\u0432\u0443\u044e (\u043e\u0431\u0449\u0443\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 DTO \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0435\u0451 \u0441\u0442\u0440\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0430\u043c\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043f\u043e \u043c\u0435\u0440\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <\/p>\n<\/li>\n<\/ul>\n<h3>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0432 DivKit \u0438 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 UI<\/h3>\n<p>\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b DivKit \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438 UI \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043a \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0412\u0451\u0440\u0441\u0442\u043a\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <em>container<\/em>, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u043e Flutter \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <em>flex<\/em>, <em>wrap<\/em> \u0438 <em>stack<\/em> \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435.\u00a0<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0442\u0440\u0438 \u0432\u0438\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u2014 <em>fixed<\/em>, <em>match-parent<\/em>, <em>wrap-content<\/em>. \u0414\u043b\u044f Flutter \u044d\u0442\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043d\u0435 \u0441\u0430\u043c\u044b\u043c\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u00a0 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438: <em>SizedBox<\/em>, <em>Flexible<\/em> \u0438 <em>Expanded<\/em>. \u0414\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (<em>match-parent<\/em>, <em>wrap-content<\/em>) \u0441\u0442\u0430\u043b\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 <em>row<\/em>, <em>column<\/em> \u0438 <em>stack<\/em>.\u00a0<\/p>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f \u0432\u0441\u0451 \u043d\u043e\u0432\u044b\u0435 \u0438 \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c\u044e API \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0442\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0443 DivKit \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <em>BorderSide<\/em> \u0432\u043e Flutter \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u0432 \u043d\u0430\u0442\u0438\u0432\u0435 \u2014 \u0441\u043d\u0430\u0440\u0443\u0436\u0438. \u0414\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043d\u0430\u0448\u043b\u0438 \u0441\u0432\u043e\u0451 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u044b \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u0436\u0438\u0437\u043d\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434 \u0432 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u0431\u0430\u0433\u043e\u0432.<\/p>\n<h3>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c DivKit \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0451. \u0421\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/951\/607\/7b5\/9516077b5f69eb19b3720b36bbc99f29.png\" width=\"1266\" height=\"819\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/951\/607\/7b5\/9516077b5f69eb19b3720b36bbc99f29.png\"\/><\/figure>\n<p>\u041e\u043d\u0438 \u043d\u0435 \u043d\u0430 100% \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e DivKit. \u0427\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/structure\">\u0432 \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a> \u0432 \u0434\u043e\u043a\u0435. <\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438\u00a0<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 DivKit \u0435\u0441\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c <a href=\"https:\/\/divkit.tech\/docs\/en\/concepts\/divs\/2\/div-custom\">\u043a\u0430\u0441\u0442\u043e\u043c\u043e\u0432<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Flutter-\u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <em>DivCustomHandler<\/em>:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"dart\">\/\/\/ Handles specific div-custom. Creates Flutter Widget from custom model abstract class DivCustomHandler { \/\/\/ Returns TRUE if custom widget can be handled. \/\/\/ [type] \u2014 DivCustom.customType, custom alias to handle. Bool isCustomTypeSupported(String type);  \/\/\/ Returns Widget to use for div-custom. \/\/\/ [div] \u2014 div-custom model. Widget createCustom(DivCustom div);  factory DivCustomHandler.none() => _DefaultDivCustomHandler(); }  class PlaygroundAppCustomHandler implements DivCustomHandler {  late final factories = {    'new_custom_card_1': _createCustomCard,    'new_custom_card_2': _createCustomCard,    'new_custom_container_1': _createCustomContainer,  };   @override  Widget createCustom(DivCustom div) {    final child = factories[div.customType]?.call(div) ??        (throw Exception(            'Unsupported DivCustom with custom_type: ${div.customType}'));     return child;  }   @override  bool isCustomTypeSupported(String type) => factories.containsKey(type);   Widget _createCustomCard(DivCustom div) {    const gradientColors = [      -0xFF0000,      -0xFF7F00,      -0xF00F00,      -0x00FF00,      -0x0000FF,      -0x2E2B5F,      -0x8B00FF,    ];     return Material(      child: Container(        width: double.infinity,        decoration: BoxDecoration(          gradient: LinearGradient(            begin: Alignment.bottomLeft,            end: Alignment.topRight,            colors: gradientColors.map((item) => Color(item)).toList(),          ),        ),        alignment: Alignment.centerLeft,        padding: const EdgeInsets.only(          left: 12,          top: 12,          right: 12,          bottom: 12,        ),        child: _ChronographWidget(),      ),    );  }   Widget _createCustomContainer(DivCustom div) {    return Column(      children: _createItems(div.items ?? []),    );  }   List&lt;Widget> _createItems(List&lt;Div> items) {    return items.map((item) => DivWidget(item)).toList();  } }  class _ChronographWidget extends StatefulWidget {  @override  State&lt;StatefulWidget> createState() => _ChronographState(); }  class _ChronographState extends State&lt;_ChronographWidget> {  late final timer = Timer.periodic(    const Duration(      seconds: 1,    ),    (timer) {      if (mounted) {        setState(() {});      } else {        timer.cancel();      }    },  );   @override  Widget build(BuildContext context) => Text(        '${(timer.tick ~\/ 60).toString().padLeft(2, '0')}:${(timer.tick % 60).toString().padLeft(2, '0')}',        style: const TextStyle(          fontSize: 20,          color: Colors.black,          backgroundColor: Colors.transparent,        ),      ); }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <em>CustomHandler<\/em> \u043a <em>DivKitView<\/em> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0430\u043a: <\/p>\n<pre><code class=\"dart\">DivKitView(      data: data,      customHandler: MyCustomHandler(),    )<\/code><\/pre>\n<p><em>isCustomTypeSupported<\/em> \u0438 <em>createCustom<\/em> \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 UI, \u0430 \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u043c \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c placeholder \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043b\u0430\u0433\u0430 <em>showUnsupportedDivs<\/em> \u0443 <em>DivKitView<\/em>.<\/p>\n<h3>\u041c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u043b\u043e\u0439\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 DTO \u0438 Flutter\u00a0<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 JSON \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0432 DTO-\u0434\u0435\u0440\u0435\u0432\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0438 \u0441\u0430\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u044b\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Flutter. \u042d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430.\u00a0<\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <em>div-text<\/em>:<\/p>\n<pre><code class=\"dart\">class DivTextModel with EquatableMixin {     final String text;     final int? maxLines;      const DivTextModel(this.text, this.maxLines);      static Stream&lt;DivTextModel> from(BuildContext context, DivText data) {         final variables = DivKitProvider.watch&lt;DivContext>(context)!.variableManager;         return variables.watch&lt;DivTextModel>((context) async {             return DivTextModel(                 await data.text.resolveValue(context: context),                 await data.maxLines?.resolveValue(context: context),             );         }).distinct(); \/\/ The widget is redrawn when the model changes.     }      @override      List&lt;Object?> get props => [text, maxLines]; }<\/code><\/pre>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u043c\u043e\u0434\u0435\u043b\u0438 \u2014 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0435, \u0438 \u0431\u044b\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u043c\u043e\u0439, \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a. \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0435\u0451 \u0438\u0437 DTO \u0438 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0435\u0435 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443. <\/p>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0438\u0447\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>\u041c\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0444\u0438\u0447\u0438 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0423\u0432\u0438\u0434\u0435\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0433\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<h3>\u0421\u0447\u0451\u0442\u0447\u0438\u043a<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u0441 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c?<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c65\/315\/cf9\/c65315cf963eacc2e3b4b081c2ebc3bd.gif\" alt=\"JSON\" title=\"JSON\" width=\"400\" height=\"800\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c65\/315\/cf9\/c65315cf963eacc2e3b4b081c2ebc3bd.gif\"\/><\/p>\n<div><figcaption><a href=\"https:\/\/raw.githubusercontent.com\/divkit\/divkit\/main\/test_data\/tutorials\/counter.json\">JSON<\/a><\/figcaption><\/div>\n<\/figure>\n<h4>\u0422\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0438\u043d\u0433 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/h4>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0451\u043c\u0430 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0435\u043c\u044b\u0445 \u043f\u043e \u0441\u0435\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043e\u043d\u0438 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 \u0431\u043b\u043e\u043a\u0435 <em>templates<\/em> \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u0442\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u0441\u0445\u0435\u043c\u044b.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438. \u0421\u0442\u043e\u0438\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445. \u0412 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <em>card<\/em> \u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/28b\/4c8\/c0d\/28b4c8c0dbbb634198525cd5c0aec531.png\" width=\"1266\" height=\"321\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/28b\/4c8\/c0d\/28b4c8c0dbbb634198525cd5c0aec531.png\"\/><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c, \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u0431\u043e\u043b\u044c\u0448\u0435. \u0422\u043e\u0433\u0434\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u043e\u0432\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043b\u0433\u043e \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043e\u0431\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f <em>circle_button<\/em>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d71\/050\/598\/d710505985b15c3c48d6899f549d84b2.png\" width=\"1266\" height=\"1023\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d71\/050\/598\/d710505985b15c3c48d6899f549d84b2.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b \u043e\u0431\u044a\u0451\u043c \u0441\u0430\u043c\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. \u041d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u2014 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441:<\/p>\n<p><em>&#171;<\/em><strong><em>$<\/em><\/strong><em>real_prop_name&#187;: &#171;new_prop_name&#187;<\/em><\/p>\n<p>\u0412 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435. \u041e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u043d\u0443\u044e \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0446\u0432\u0435\u0442\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <em>color<\/em> \u0432 <em>background<\/em> \u043d\u043e\u0432\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c <em>bg_color<\/em> (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a8e\/707\/23f\/a8e70723f2e15d445f8e42ac4aab0a74.png\" width=\"1266\" height=\"855\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a8e\/707\/23f\/a8e70723f2e15d445f8e42ac4aab0a74.png\"\/><\/figure>\n<p>\u041d\u0443 \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/templates\">\u0428\u0430\u0431\u043b\u043e\u043d\u044b<\/a>. \u0410 \u043c\u044b \u043f\u043e\u0439\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h4>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/h4>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u0430\u044f \u0438 \u0433\u0438\u0431\u043a\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u043a\u0435 <em>variables<\/em> \u0432 &#171;<em>card<\/em>&#171;-\u0441\u0435\u043a\u0446\u0438\u0438 JSON-\u0444\u0430\u0439\u043b\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0438:<\/p>\n<pre><code class=\"json\">{    \"card\": {         \"log_id\": \"main_screen\",         \"variables\": [             {                 \"type\": \"integer\",                 \"name\": \"count\",                 \"value\": 0             },             {                 \"type\": \"number\",                 \"name\": \"alpha\",                 \"value\": 0.5             }         ]    } }<\/code><\/pre>\n<p>\u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e <em>count = 0<\/em>, \u0430 \u043a\u0430\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0443\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 <em>alpha = 0.5<\/em>.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0432 <em>DivKitView<\/em> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u0445\u043e\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0440\u0435\u0434\u044b. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 <em>DivVariableStorage<\/em>:<\/p>\n<pre><code class=\"dart\">abstract class DivVariableStorage {  \/\/\/ The parent storage. There is full access to it.  DivVariableStorage? get inheritedStorage;   \/\/\/ A list of variable names under the control of the current storage.  Set&lt;String> get names;   \/\/\/ Update an existing variable.  \/\/\/ If successful, it will return true  bool update(DivVariable variable);   \/\/\/ Update if it exists and will create otherwise.  void put(DivVariable variable);   \/\/\/ The current snapshot of the raw representation of the storage.  Map&lt;String, DivVariable> get value;   \/\/\/ The raw data stream of storage changes.  Stream&lt;Map&lt;String, DivVariable>> get stream;   \/\/\/ Safely destroy storage.  Future&lt;void> dispose(); }<\/code><\/pre>\n<p>\u0412 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0435\u0441\u0442\u044c <em>default<\/em>-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u041e\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u043e\u0432\u0430\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e. \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <em>put<\/em>. \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u043d\u0430 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438 (\u0440\u0430\u0437\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u043d\u043e\u0441\u0442\u044c). \u041a\u0440\u0443\u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0442\u0430\u043a\u0438\u0445 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u0445 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 <em>DivKitView<\/em>.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449, \u0438\u0434\u0451\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0438. <em>View<\/em>-\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0443\u0436\u0435 \u0432 <em>DivKitView<\/em> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"dart\">final system = DefaultDivVariableStorage(  variables: [    DivVariable(name: 'isDark', value: false),  ], );  final page = DefaultDivVariableStorage(  inheritedStorage: system,  variables: [    DivVariable(name: 'token', value: \"...\"),  ], );  final view = DefaultDivVariableStorage(  inheritedStorage: page,  variables: [    DivVariable(name: 'id', value: '...'),  ], );<\/code><\/pre>\n<h4>\u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0442\u0432\u043e\u0440\u0438\u0442\u044c \u0447\u0443\u0434\u0435\u0441\u0430, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u0435\u0439 \u0432 \u0441\u0445\u0435\u043c\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442. \u041e\u043d\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439 \u0432\u0438\u0434\u0430 <em>&#171;@{&#8230;}&#187;<\/em>. \u0414\u0430\u043b\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u00ab\u0412\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439\u00bb. \u042d\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0440\u043e\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0430 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f DTO-\u043c\u043e\u0434\u0435\u043b\u0435\u0439.\u00a0<\/p>\n<p>\u0412 DivKit \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430, \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445. \u0412\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e, \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438\u0434\u0451\u0442 \u043f\u043e \u0438\u043c\u0435\u043d\u0438:<\/p>\n<ul>\n<li>\n<p>\u00a0<em>&#171;@{<\/em><strong><em>isDark<\/em><\/strong><em> ? 1 : 0}&#187; \u2192 0\u00a0<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u00a0&#171;url?token=@{<\/em><strong><em>token<\/em><\/strong><em>}&#187; \u2192 url?token=&#8230;<\/em><\/p>\n<\/li>\n<li>\n<p><em>&#171;set_state?state_id=@{<\/em><strong><em>id<\/em><\/strong><em>}&#187; \u2192 set_state?state_id=&#8230;<\/em><\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430 (<strong>count<\/strong>) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c (<strong>alpha<\/strong>):<\/p>\n<pre><code class=\"json\">{   \"type\": \"text\",   \"font_size\": 100,   \"alpha\": \"@{min(1.0, max(alpha, 0.0))}\",   \"width\": {\"type\": \"wrap_content\", \"constrained\": true},   \"text_alignment_horizontal\": \"center\",   \"alignment_horizontal\": \"center\",   \"alignment_vertical\": \"center\",   \"text\": \"@{count}\" }<\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0440\u0430\u0437\u0434\u0435\u043b <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/expressions#about\">\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a>.<\/p>\n<h4>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u043a\u0448\u0435\u043d\u043e\u0432<\/h4>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u044d\u043a\u0448\u0435\u043d\u044b (\u0438\u0432\u0435\u043d\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438). \u042d\u043a\u0448\u0435\u043d\u044b \u0435\u0441\u0442\u044c \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u043e\u0432: \u00ab\u0434\u0438\u043f\u043b\u0438\u043d\u043a\u00bb \u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439. \u041f\u0435\u0440\u0432\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u044e \u043d\u0443\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 <em>set_state<\/em>,\u00a0 <em>set_variable<\/em>, <em>timer<\/em>. \u0423 \u0432\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u2014 <em>DivActionFocusElement<\/em> \u0438 <em>DivActionSetVariable<\/em>.<\/p>\n<p>\u0412\u0441\u0435 \u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b <em>DivActionHandler<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0438 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044d\u043a\u0448\u0435\u043d. \u0415\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>DefaultDivActionHandler<\/em>. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u044d\u043a\u0448\u0435\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 default \u0438\u043b\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0443 \u0441\u0435\u0431\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e: <\/p>\n<pre><code class=\"dart\">\/\/\/ Handles any div-action abstract class DivActionHandler {  const DivActionHandler();   \/\/\/ Returns TRUE if action can be handled.  \/\/\/ [action] \u2014 Action to handle. Maybe typed or contain a non-null url  \/\/\/ [context] \u2014 DivContext to use variables and access stateManager  bool canHandle(DivContext context, DivAction action);   \/\/\/ Returns TRUE if action was handled.  \/\/\/ [action] \u2014 Action to handle. Maybe typed or contain a non-null url  \/\/\/ [context] \u2014 DivContext to use variables and access stateManager  FutureOr&lt;bool> handleAction(DivContext context, DivAction action); }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 <em>DivKitView<\/em>:\u00a0<\/p>\n<pre><code class=\"dart\">DivKitView(        data: DefaultDivKitData.fromJson(data),        actionHandler: CustomDivActionHandler(navigator: navigatorKey), )<\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0434\u043e\u043a\u0435 \u2014 \u0440\u0430\u0437\u0434\u0435\u043b <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/interaction\">\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0434\u0438\u043f\u043b\u0438\u043d\u043a\u043e\u043c. \u0412 \u043d\u0451\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u043c\u044f \u0438 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0442\u043e\u0433\u043e \u0436\u0435 \u0442\u0438\u043f\u0430, \u0447\u0442\u043e \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f. \u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"json\">\"actions\": [     {         \"log_id\": \"action_id\",         \"url\": \"div-action:\/\/set_variable?name=count&amp;value=@{count - 1}\"     },     {         \"log_id\": \"action_id\",         \"url\": \"div-action:\/\/set_variable?name=alpha&amp;value=@{alpha - 0.1}\"     } ]<\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/variables#modify\">\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/a>.<\/p>\n<h3>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430<\/h3>\n<p>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0443\u043c\u0435\u044e\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0442\u0430\u043f\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0422\u0443\u0442 \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441\u043e \u0441\u0442\u0435\u0439\u0442\u0430\u043c\u0438 \u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430\u043c\u0438.\u00a0<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/828\/dc8\/874\/828dc8874b585866523c79a9b9c99e35.png\" alt=\"JSON\" title=\"JSON\" width=\"400\" height=\"493\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/828\/dc8\/874\/828dc8874b585866523c79a9b9c99e35.png\"\/><\/p>\n<div><figcaption><a href=\"https:\/\/raw.githubusercontent.com\/divkit\/divkit\/main\/test_data\/tutorials\/stateful_card.json\">JSON<\/a><\/figcaption><\/div>\n<\/figure>\n<h4>\u0421\u0442\u0435\u0439\u0442\u044b<\/h4>\n<p>\u0421\u0442\u0435\u0439\u0442\u044b \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e <em>div<\/em> (\u0438\u0437 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u043d\u0430\u0431\u043e\u0440\u0430) \u043f\u043e <em>stateId<\/em>. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0441\u0442\u0435\u0439\u0442 DivKitView, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e\u043c, \u0438 \u0441\u0442\u0435\u0439\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <em>div-state<\/em>.<\/p>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0434\u0435\u0440\u0435\u0432\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b1c\/b36\/b8f\/b1cb36b8fa0941e0670ca11a8c969fee.png\" width=\"1266\" height=\"669\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b1c\/b36\/b8f\/b1cb36b8fa0941e0670ca11a8c969fee.png\"\/><\/figure>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0441\u0442\u0435\u0439\u0442\u0430, \u0433\u0440\u0443\u043f\u043f\u0443 \u043d\u0430\u0437\u043e\u0432\u0451\u043c <em>sample<\/em>, \u0438 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 <em>divkit<\/em> \u0438\u043b\u0438 <em>flutter<\/em><strong>. <\/strong>\u0422\u0430\u043a\u0438\u043c \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0435\u0439\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <em>action<\/em>:\u00a0<\/p>\n<p><em>div-action:\/\/set_state?state_id=0\/sample\/flutter<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/525\/e00\/4ec\/525e004ec8b804adc24fe6093a4c3e93.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0444\u0438\u0447\u0438 \u0441\u0442\u0435\u0439\u0442\u043e\u0432\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0444\u0438\u0447\u0438 \u0441\u0442\u0435\u0439\u0442\u043e\u0432\" width=\"1266\" height=\"1244\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/525\/e00\/4ec\/525e004ec8b804adc24fe6093a4c3e93.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 <em>\u0444\u0438\u0447\u0438 \u0441\u0442\u0435\u0439\u0442\u043e\u0432<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e <em>card<\/em> \u0438 <em>div-state<\/em>. \u041f\u043e \u043c\u0435\u0440\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0435\u0439\u0442\u044b \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435.<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 <em>div-state<\/em> \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0438 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0442\u0435\u0439\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c. \u042d\u0442\u043e\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0434\u043e\u043a\u0435 \u2014 \u0440\u0430\u0437\u0434\u0435\u043b <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/interaction#states\">\u041d\u0430\u0431\u043e\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439<\/a>.<\/p>\n<h4>\u0422\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0422\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u043d\u0443\u0436\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u044d\u043a\u0448\u0435\u043d\u044b \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u043e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430 \u0432 \u0431\u043b\u043e\u043a\u0435 <em>variable_triggers<\/em>:<\/p>\n<pre><code class=\"json\">\"card\": {         \"variables\": [             {                 \"name\": \"change_state\",                 \"type\": \"string\",                 \"value\": \"none\"             },             {                 \"name\": \"block_state\",                 \"type\": \"string\",                 \"value\": \"divkit\"             }         ],         \"variable_triggers\": [             {                 \"condition\": \"@{change_state == 'block' &amp;&amp; block_state == 'divkit'}\",                 \"mode\": \"on_variable\",                 \"actions\": [                     {                         \"log_id\": \"update change_state\",                         \"url\": \"div-action:\/\/set_variable?name=change_state&amp;value=none\"                     },                     {                         \"log_id\": \"update block_state\",                         \"url\": \"div-action:\/\/set_variable?name=block_state&amp;value=flutter\"                     },                     {                         \"log_id\": \"update state\",                         \"url\": \"div-action:\/\/set_state?state_id=0\/sample\/flutter\"                     }                 ]             },             {                 \"condition\": \"@{change_state == 'block' &amp;&amp; block_state == 'flutter'}\",                 \"mode\": \"on_variable\",                 \"actions\": [                     {                         \"log_id\": \"update change_state\",                         \"url\": \"div-action:\/\/set_variable?name=change_state&amp;value=none\"                     },                     {                         \"log_id\": \"update block_state\",                         \"url\": \"div-action:\/\/set_variable?name=block_state&amp;value=divkit\"                     },                     {                         \"log_id\": \"update state\",                         \"url\": \"div-action:\/\/set_state?state_id=0\/sample\/divkit\"                     }                 ]             }         ] }<\/code><\/pre>\n<p>\u0423 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0436\u0438\u043c (\u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <em>on_variable<\/em> \u0438\u043b\u0438 \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u044f <em>on_condition<\/em>).<\/p>\n<p>\u041f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0434 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f: \u0435\u0441\u043b\u0438 <em>true<\/em>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044d\u043a\u0448\u0435\u043d\u044b \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e4d\/0f7\/3cd\/e4d0f73cddade07dfe62f838adc8f3e3.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\" width=\"1266\" height=\"819\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e4d\/0f7\/3cd\/e4d0f73cddade07dfe62f838adc8f3e3.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 <em>\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u0441\u0445\u0435\u043c\u044b, \u043c\u044b \u043d\u0435 \u0437\u0430\u0441\u0442\u0440\u0430\u0445\u043e\u0432\u0430\u043d\u044b \u043e\u0442 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430 (\u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u043c\u0441\u044f \u043d\u0430 \u0435\u0451 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043d\u043e\u0432\u0430). \u0421 \u044d\u0442\u0438\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u043c, \u0432 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u043b\u044f \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u0432\u0435\u043d\u0442.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/variables#actions\">\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/a>.<\/p>\n<h3>\u0422\u0430\u0439\u043c\u0435\u0440<\/h3>\n<p>\u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443, \u2014 \u0442\u0438\u043a\u0430\u044e\u0449\u0438\u0439 \u0442\u0430\u0439\u043c\u0435\u0440.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/86d\/20a\/2ca\/86d20a2caa7ea024d5b48327e4ddee7e.gif\" alt=\"JSON\" title=\"JSON\" width=\"400\" height=\"800\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/86d\/20a\/2ca\/86d20a2caa7ea024d5b48327e4ddee7e.gif\"\/><\/p>\n<div><figcaption><a href=\"https:\/\/raw.githubusercontent.com\/divkit\/divkit\/main\/test_data\/tutorials\/ticking_timer.json\">JSON<\/a><\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043e, \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 (\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0438\u043b\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430 \u0432 \u0431\u043b\u043e\u043a\u0435 <em>timers<\/em>:<\/p>\n<pre><code class=\"json\">{      \"timers\": [             {                 \"id\": \"ticker\",                 \"duration\": \"@{timer_duration}\",                 \"tick_interval\": \"@{timer_interval}\",                 \"value_variable\": \"timer_value\",                 \"tick_actions\": [                     {                         \"log_id\": \"tick\",                         \"url\": \"div-action:\/\/set_variable?name=timer_state&amp;value=ticking\"                     },                     {                         \"log_id\": \"tick\",                         \"url\": \"div-action:\/\/set_variable?name=tick_count_value&amp;value=@{tick_count_value+1}\"                     }                 ],                 \"end_actions\": [                     {                         \"log_id\": \"end\",                         \"url\": \"div-action:\/\/set_variable?name=timer_state&amp;value=ended\"                     }                 ]             }         ] }<\/code><\/pre>\n<p>\u0422\u0430\u0439\u043c\u0435\u0440\u0443 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b. \u041c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0442\u0440\u0451\u0445 \u0440\u0435\u0436\u0438\u043c\u0430\u0445:<\/p>\n<ul>\n<li>\n<p><em>duration<\/em> \u2014 \u043e\u0434\u0438\u043d \u0432\u044b\u0437\u043e\u0432 <em>end_action<\/em>;<\/p>\n<\/li>\n<li>\n<p><em>duration<\/em> \u0438 <em>tick_interval<\/em> \u2014 <em>tick_action<\/em>\u00a0 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0434\u043e \u043a\u043e\u043d\u0446\u0430 <em>duration<\/em> \u0438 \u043e\u0434\u0438\u043d \u0432\u044b\u0437\u043e\u0432 <em>end_action<\/em>;<\/p>\n<\/li>\n<li>\n<p><em>tick_interval<\/em> \u2014 <em>tick_action<\/em> \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0431\u0435\u0437 \u043a\u043e\u043d\u0446\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e <em>id<\/em> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043a\u0448\u0435\u043d\u0430:<\/p>\n<p><em>div-action:\/\/<\/em><strong><em>timer<\/em><\/strong><em>?id=ticker&amp;action=start\/stop\/reset\/pause\/resume\/cancel<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/112\/f05\/77f\/112f0577ffd02bcb175153ab0b325a46.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0444\u0438\u0447\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0444\u0438\u0447\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432\" width=\"1278\" height=\"1170\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/112\/f05\/77f\/112f0577ffd02bcb175153ab0b325a46.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0444\u0438\u0447\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0423 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. <em>TimerManager<\/em> \u2014 \u043f\u0440\u043e\u0441\u043b\u043e\u0439\u043a\u0430 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 <em>Scheduler<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 <em>Timers<\/em> (DTO) \u0438 \u043c\u043e\u0436\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 <em>Clockworks<\/em> \u043f\u043e <em>id<\/em>. \u0421\u0430\u043c <em>Clockwork<\/em> \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043b\u0431\u044d\u043a\u043e\u0432 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u2014 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043e \u0438\u043b\u0438 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u0442\u043e <em>Clockwork<\/em> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c <em>onEnd<\/em>, \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 <em>duration<\/em>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 <em>interval<\/em>, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f <em>onTick<\/em> \u0434\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e <em>duration<\/em>. \u0421\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 <em>Clockwork<\/em> \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0430\u044f \u0441\u0442\u0435\u0439\u0442-\u043c\u0430\u0448\u0438\u043d\u0430 \u0441 \u0442\u0440\u0435\u043c\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438: <em>started\/stopped\/paused<\/em>.<\/p>\n<h3>\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c<\/h3>\n<h4>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 DivKitView<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/100\/fd1\/6a1\/100fd16a187d8f9e36413494f39ad18d.png\" width=\"1266\" height=\"485\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/100\/fd1\/6a1\/100fd16a187d8f9e36413494f39ad18d.png\"\/><\/figure>\n<p>\u0421\u0432\u044f\u0437\u0443\u044e\u0449\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u044d\u043a\u0448\u0435\u043d\u0430\u0445 \u0438 <em>onInit<\/em>-\u043a\u043e\u043b\u0431\u044d\u043a\u0435 <em>DivKitView<\/em>. \u0423 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0441\u0442\u0435\u0439\u0442\u0430\u043c, \u0442\u0430\u0439\u043c\u0435\u0440\u0430\u043c. \u0422\u0430\u043a\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u043a\u0448\u0435\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>ActionHandler<\/em>. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0444\u043e\u043a\u0443\u0441\u044b <em>FocusNode<\/em>.<\/p>\n<h4>\u0412\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b75\/b0a\/eae\/b75b0aeae2c53f4d97849417e4a0f665.png\" alt=\"\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\" title=\"\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\" width=\"1266\" height=\"505\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b75\/b0a\/eae\/b75b0aeae2c53f4d97849417e4a0f665.png\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 (\u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f). \u0414\u043b\u044f \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (\u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0438\u043c\u0435\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f), \u0442\u0430\u043a\u0436\u0435 \u043e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u0430\u043c\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0438\u0449\u0435\u0442 \u0432\u0441\u0435 \u0438\u043c\u0435\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u043e\u0431\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0433\u043e.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u0435\u0439 \u2014 \u043f\u043b\u0430\u0433\u0438\u043d <em>div_expressions_resolver<\/em> (\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Platform Channel). \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0430\u044f.\u00a0<\/p>\n<p>\u0414\u043b\u044f <em>iOS<\/em> \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c \u043f\u043e\u043a\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0442\u0438\u043f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u043e\u043d\u044f\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0438, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043a\u0438 \u0432 \u0442\u0438\u043f\u0430\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8db\/885\/e9e\/8db885e9ecdcb287532ed4f7ec727f4f.png\" width=\"1266\" height=\"167\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8db\/885\/e9e\/8db885e9ecdcb287532ed4f7ec727f4f.png\"\/><\/figure>\n<p>\u0414\u043b\u044f Android, \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u043f\u043e\u043b\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u043e\u043f \u0442\u0438\u043f\u043e\u0432 \u0431\u0435\u0437 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044f \u043d\u0435 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0430\u0434\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0441\u0442\u044b:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/29f\/8a7\/a86\/29f8a7a86b4f426a7b8301ac1ca6794f.png\" width=\"1266\" height=\"167\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/29f\/8a7\/a86\/29f8a7a86b4f426a7b8301ac1ca6794f.png\"\/><\/figure>\n<p>\u0421\u0430\u043c\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0434\u0451\u0442 \u0436\u0451\u0441\u0442\u043a\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u2014 \u0442\u043e\u043b\u044c\u043a\u043e iOS \u0438 Android, \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0445 \u043f\u043b\u0430\u043d\u0430\u0445 \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 Dart\/C++ (Rust).<\/p>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Flutter-\u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/h2>\n<details class=\"spoiler\">\n<summary>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<p>1. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u00a0 <em>pubspec.yaml:<\/em><\/p>\n<pre><code class=\"yaml\">dependencies:      divkit: any<\/code><\/pre>\n<p>2. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443:<\/p>\n<pre><code class=\"dart\">import 'package:divkit\/divkit.dart';<\/code><\/pre>\n<p>3. \u0421\u0442\u0440\u043e\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>DivKitData<\/em> \u0438\u0437 <em>JSON<\/em>:<\/p>\n<pre><code class=\"dart\">final data = DefaultDivKitData.fromJson(json); \/\/ Map&lt;String, dynamic><\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e \u0441\u0445\u0435\u043c\u0435:<\/p>\n<pre><code class=\"dart\"> final data = DefaultDivKitData.fromScheme(        card: json['card'], \/\/ Map&lt;String, dynamic>        templates: json['templates'], \/\/ Map&lt;String, dynamic>?    );<\/code><\/pre>\n<p>4. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <em>DivKitView<\/em> \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 (data):<\/p>\n<pre><code class=\"dart\"> DivKitView(        data: data,    )<\/code><\/pre>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0447\u0442\u043e <em>Directionality<\/em>-\u0432\u0438\u0434\u0436\u0435\u0442 \u0435\u0441\u0442\u044c \u0432 \u0432\u0430\u0448\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u0435.<\/p>\n<p><em>DivKitView<\/em> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043e\u0432, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430:<\/p>\n<pre><code class=\"dart\">DivKitView(      data: data,      customHandler: MyCustomHandler(), \/\/ DivCustomHandler?      actionHandler: MyCustomActionHandler(), \/\/ DivActionHandler?      variableStorage: MyOwnVariableStorage(), \/\/ DivVariableStorage?    )<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u043e! \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 <em>DefaultDivActionHandler<\/em>.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e, \u0430 JSON \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c <a href=\"https:\/\/divkit.tech\/playground\">\u043e\u0442\u0441\u044e\u0434\u0430<\/a>. <\/p>\n<\/div>\n<\/details>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0440\u0435\u043b\u0438\u0437\u0430, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u043c. \u041f\u0440\u043e\u0431\u0443\u0439\u0442\u0435, \u0432\u043d\u0435\u0434\u0440\u044f\u0439\u0442\u0435, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0439\u0442\u0435. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0434\u044b \u0432\u043a\u043b\u0430\u0434\u0443 \u0432 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430, \u0432\u0435\u0434\u044c \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0449\u0451 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u2014 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b, \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u043c\u0435\u0441\u0442\u0435!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/814187\/\"> https:\/\/habr.com\/ru\/articles\/814187\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043c\u044b <a href=\"https:\/\/habr.com\/ru\/companies\/yandex\/articles\/683886\/\">\u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438<\/a> \u0432 \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441 DivKit \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d \u0443\u0436\u0435 \u043f\u0440\u043e\u0448\u0451\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u042f\u043d\u0434\u0435\u043a\u0441, \u0410\u043b\u0438\u0441\u0435, \u041c\u0430\u0440\u043a\u0435\u0442\u0435, \u0415\u0434\u0430\u0434\u0438\u043b\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0448\u0451\u043b \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c. \u0418 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441 \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0432\u0430\u0436\u043d\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c: \u043c\u044b \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e\u043b\u0433\u043e\u0436\u0434\u0430\u043d\u043d\u044b\u0439 <a href=\"https:\/\/pub.dev\/packages\/divkit\">\u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043b\u044f Flutter<\/a>.\u00a0<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0432 DivKit \u0438 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 UI. \u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u0444\u0438\u0447\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Flutter \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u041f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u0427\u0442\u043e \u0438 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0435\u043b\u0430\u0442\u044c<\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0438\u0447\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e. \u041d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0445\u0435\u043c\u0430\u0445 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d presentation, \u0437\u0435\u043b\u0451\u043d\u044b\u043c \u2014 domain, \u0430 \u0441\u0438\u043d\u0438\u043c \u2014 data. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 <em>divkit\/lib\/src\/core\/protocol\/\u2026<\/em><\/p>\n<h3>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/h3>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 <em>\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 DivKit \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438: \u0431\u0430\u0437\u043e\u0432\u0443\u044e (\u043e\u0431\u0449\u0443\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 DTO \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0435\u0451 \u0441\u0442\u0440\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0430\u043c\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043f\u043e \u043c\u0435\u0440\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <\/p>\n<\/li>\n<\/ul>\n<h3>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0432 DivKit \u0438 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 UI<\/h3>\n<p>\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b DivKit \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438 UI \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043a \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0412\u0451\u0440\u0441\u0442\u043a\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <em>container<\/em>, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u043e Flutter \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <em>flex<\/em>, <em>wrap<\/em> \u0438 <em>stack<\/em> \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435.\u00a0<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0442\u0440\u0438 \u0432\u0438\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u2014 <em>fixed<\/em>, <em>match-parent<\/em>, <em>wrap-content<\/em>. \u0414\u043b\u044f Flutter \u044d\u0442\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043d\u0435 \u0441\u0430\u043c\u044b\u043c\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u00a0 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438: <em>SizedBox<\/em>, <em>Flexible<\/em> \u0438 <em>Expanded<\/em>. \u0414\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (<em>match-parent<\/em>, <em>wrap-content<\/em>) \u0441\u0442\u0430\u043b\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 <em>row<\/em>, <em>column<\/em> \u0438 <em>stack<\/em>.\u00a0<\/p>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f \u0432\u0441\u0451 \u043d\u043e\u0432\u044b\u0435 \u0438 \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c\u044e API \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0442\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0443 DivKit \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <em>BorderSide<\/em> \u0432\u043e Flutter \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u0432 \u043d\u0430\u0442\u0438\u0432\u0435 \u2014 \u0441\u043d\u0430\u0440\u0443\u0436\u0438. \u0414\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043d\u0430\u0448\u043b\u0438 \u0441\u0432\u043e\u0451 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u044b \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u0436\u0438\u0437\u043d\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434 \u0432 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u0431\u0430\u0433\u043e\u0432.<\/p>\n<h3>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c DivKit \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0451. \u0421\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041e\u043d\u0438 \u043d\u0435 \u043d\u0430 100% \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e DivKit. \u0427\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/structure\">\u0432 \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a> \u0432 \u0434\u043e\u043a\u0435. <\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438\u00a0<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 DivKit \u0435\u0441\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c <a href=\"https:\/\/divkit.tech\/docs\/en\/concepts\/divs\/2\/div-custom\">\u043a\u0430\u0441\u0442\u043e\u043c\u043e\u0432<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Flutter-\u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <em>DivCustomHandler<\/em>:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"dart\">\/\/\/ Handles specific div-custom. Creates Flutter Widget from custom model abstract class DivCustomHandler { \/\/\/ Returns TRUE if custom widget can be handled. \/\/\/ [type] \u2014 DivCustom.customType, custom alias to handle. Bool isCustomTypeSupported(String type);  \/\/\/ Returns Widget to use for div-custom. \/\/\/ [div] \u2014 div-custom model. Widget createCustom(DivCustom div);  factory DivCustomHandler.none() => _DefaultDivCustomHandler(); }  class PlaygroundAppCustomHandler implements DivCustomHandler {  late final factories = {    'new_custom_card_1': _createCustomCard,    'new_custom_card_2': _createCustomCard,    'new_custom_container_1': _createCustomContainer,  };   @override  Widget createCustom(DivCustom div) {    final child = factories[div.customType]?.call(div) ??        (throw Exception(            'Unsupported DivCustom with custom_type: ${div.customType}'));     return child;  }   @override  bool isCustomTypeSupported(String type) => factories.containsKey(type);   Widget _createCustomCard(DivCustom div) {    const gradientColors = [      -0xFF0000,      -0xFF7F00,      -0xF00F00,      -0x00FF00,      -0x0000FF,      -0x2E2B5F,      -0x8B00FF,    ];     return Material(      child: Container(        width: double.infinity,        decoration: BoxDecoration(          gradient: LinearGradient(            begin: Alignment.bottomLeft,            end: Alignment.topRight,            colors: gradientColors.map((item) => Color(item)).toList(),          ),        ),        alignment: Alignment.centerLeft,        padding: const EdgeInsets.only(          left: 12,          top: 12,          right: 12,          bottom: 12,        ),        child: _ChronographWidget(),      ),    );  }   Widget _createCustomContainer(DivCustom div) {    return Column(      children: _createItems(div.items ?? []),    );  }   List&lt;Widget> _createItems(List&lt;Div> items) {    return items.map((item) => DivWidget(item)).toList();  } }  class _ChronographWidget extends StatefulWidget {  @override  State&lt;StatefulWidget> createState() => _ChronographState(); }  class _ChronographState extends State&lt;_ChronographWidget> {  late final timer = Timer.periodic(    const Duration(      seconds: 1,    ),    (timer) {      if (mounted) {        setState(() {});      } else {        timer.cancel();      }    },  );   @override  Widget build(BuildContext context) => Text(        '${(timer.tick ~\/ 60).toString().padLeft(2, '0')}:${(timer.tick % 60).toString().padLeft(2, '0')}',        style: const TextStyle(          fontSize: 20,          color: Colors.black,          backgroundColor: Colors.transparent,        ),      ); }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <em>CustomHandler<\/em> \u043a <em>DivKitView<\/em> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0430\u043a: <\/p>\n<pre><code class=\"dart\">DivKitView(      data: data,      customHandler: MyCustomHandler(),    )<\/code><\/pre>\n<p><em>isCustomTypeSupported<\/em> \u0438 <em>createCustom<\/em> \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 UI, \u0430 \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u043c \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c placeholder \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043b\u0430\u0433\u0430 <em>showUnsupportedDivs<\/em> \u0443 <em>DivKitView<\/em>.<\/p>\n<h3>\u041c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u043b\u043e\u0439\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 DTO \u0438 Flutter\u00a0<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 JSON \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0432 DTO-\u0434\u0435\u0440\u0435\u0432\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0438 \u0441\u0430\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u044b\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Flutter. \u042d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430.\u00a0<\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <em>div-text<\/em>:<\/p>\n<pre><code class=\"dart\">class DivTextModel with EquatableMixin {     final String text;     final int? maxLines;      const DivTextModel(this.text, this.maxLines);      static Stream&lt;DivTextModel> from(BuildContext context, DivText data) {         final variables = DivKitProvider.watch&lt;DivContext>(context)!.variableManager;         return variables.watch&lt;DivTextModel>((context) async {             return DivTextModel(                 await data.text.resolveValue(context: context),                 await data.maxLines?.resolveValue(context: context),             );         }).distinct(); \/\/ The widget is redrawn when the model changes.     }      @override      List&lt;Object?> get props => [text, maxLines]; }<\/code><\/pre>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u043c\u043e\u0434\u0435\u043b\u0438 \u2014 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0435, \u0438 \u0431\u044b\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u043c\u043e\u0439, \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a. \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0435\u0451 \u0438\u0437 DTO \u0438 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0435\u0435 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443. <\/p>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0438\u0447\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>\u041c\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0444\u0438\u0447\u0438 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0423\u0432\u0438\u0434\u0435\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0433\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<h3>\u0421\u0447\u0451\u0442\u0447\u0438\u043a<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u0441 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c?<\/p>\n<figure class=\"\">\n<div><figcaption><a href=\"https:\/\/raw.githubusercontent.com\/divkit\/divkit\/main\/test_data\/tutorials\/counter.json\">JSON<\/a><\/figcaption><\/div>\n<\/figure>\n<h4>\u0422\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0438\u043d\u0433 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/h4>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0451\u043c\u0430 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0435\u043c\u044b\u0445 \u043f\u043e \u0441\u0435\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043e\u043d\u0438 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 \u0431\u043b\u043e\u043a\u0435 <em>templates<\/em> \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u0442\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u0441\u0445\u0435\u043c\u044b.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438. \u0421\u0442\u043e\u0438\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445. \u0412 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <em>card<\/em> \u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c, \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u0431\u043e\u043b\u044c\u0448\u0435. \u0422\u043e\u0433\u0434\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u043e\u0432\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043b\u0433\u043e \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043e\u0431\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f <em>circle_button<\/em>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b \u043e\u0431\u044a\u0451\u043c \u0441\u0430\u043c\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. \u041d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u2014 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441:<\/p>\n<p><em>&#171;<\/em><strong><em>$<\/em><\/strong><em>real_prop_name&#187;: &#171;new_prop_name&#187;<\/em><\/p>\n<p>\u0412 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435. \u041e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u043d\u0443\u044e \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0446\u0432\u0435\u0442\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <em>color<\/em> \u0432 <em>background<\/em> \u043d\u043e\u0432\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c <em>bg_color<\/em> (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f).<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0443 \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/divkit.tech\/docs\/ru\/concepts\/templates\">\u0428\u0430\u0431\u043b\u043e\u043d\u044b<\/a>. \u0410 \u043c\u044b \u043f\u043e\u0439\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h4>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/h4>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u0430\u044f \u0438 \u0433\u0438\u0431\u043a\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u043a\u0435 <em>variables<\/em> \u0432 &#171;<em>card<\/em>&#171;-\u0441\u0435\u043a\u0446\u0438\u0438 JSON-\u0444\u0430\u0439\u043b\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0438:<\/p>\n<pre><code class=\"json\">{    \"card\": {         \"log_id\": \"main_screen\",         \"variables\": [             {                 \"type\": \"integer\",                 \"name\": \"count\",                 \"value\": 0      <\/code><\/pre>\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-376087","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/376087","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=376087"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/376087\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=376087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=376087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=376087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}