{"id":465892,"date":"2025-07-03T15:06:22","date_gmt":"2025-07-03T15:06:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=465892"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=465892","title":{"rendered":"<span>2D-\u0441\u043a\u0440\u043e\u043b\u043b \u0432\u043e Flutter<\/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>\u0414\u0430 \u043a\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u044d\u0442\u043e\u0442 \u0432\u0430\u0448 2D-\u0441\u043a\u0440\u043e\u043b\u043b? \u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433 excel? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043d\u0443\u0436\u0435\u043d \u0432 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u2014 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0448 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.\u00a0<\/p>\n<p>\u0415\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Yappy \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439, \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Flutter, \u0438 \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c 2D-\u0441\u043a\u0440\u043e\u043b\u043b \u2014 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c-\u0442\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e, \u0432 \u0447\u0451\u043c \u0431\u044b\u043b\u0430 \u0431\u044b\u043b\u0430 \u0437\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432\u043e Flutter \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u043a\u0430\u043a\u0438\u0445 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439.\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bfc\/be2\/37e\/bfcbe237e789a2c7d5036c50ea4d00e3.png\" width=\"780\" height=\"440\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/bfc\/be2\/37e\/bfcbe237e789a2c7d5036c50ea4d00e3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bfc\/be2\/37e\/bfcbe237e789a2c7d5036c50ea4d00e3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0424\u0451\u0434\u043e\u0440 \u0411\u043b\u0430\u0433\u043e\u0434\u044b\u0440\u044c, \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439, \u044f\u0432\u043b\u044f\u044e\u0441\u044c \u0442\u0435\u0445\u043b\u0438\u0434\u043e\u043c \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Yappy \u0438 \u0441\u043e\u0432\u0435\u0434\u0443\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u00ab<a href=\"https:\/\/t.me\/ohmyflutter\" rel=\"noopener noreferrer nofollow\">Oh, my Flutter<\/a>\u00bb, \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u0438\u043b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 Flutter, \u043f\u043e\u043a\u0430 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f \u0442\u0430\u043c \u043d\u0435 <a href=\"https:\/\/habr.com\/ru\/news\/879478\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043b\u0438<\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430 Flutter \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0438 \u0447\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u0430\u0442\u044c. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 (\u0432\u0435\u0441\u044c \u0435\u0451 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b\u043b\u043e\u0436\u0435\u043d \u043d\u0430 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\" rel=\"noopener noreferrer nofollow\">github<\/a>), \u0438 \u043e\u0446\u0435\u043d\u0438\u043c \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Yappy \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0443\u043c\u0430\u0441\u0448\u0435\u0434\u0448\u0438\u0439.\u00a0\u00a0\u00a0\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/341\/e91\/3bf\/341e913bf1119da08270b70f62d542fd.gif\" alt=\"\u042d\u0442\u043e 2D-\u0441\u043a\u0440\u043e\u043b\u043b \u0438\u043b\u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043d\u0435\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438\" title=\"\u042d\u0442\u043e 2D-\u0441\u043a\u0440\u043e\u043b\u043b \u0438\u043b\u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043d\u0435\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438\" width=\"800\" height=\"582\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/341\/e91\/3bf\/341e913bf1119da08270b70f62d542fd.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/341\/e91\/3bf\/341e913bf1119da08270b70f62d542fd.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u042d\u0442\u043e 2D-\u0441\u043a\u0440\u043e\u043b\u043b \u0438\u043b\u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043d\u0435\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<h3>\u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0440\u0430\u043d\u044c\u0448\u0435 <\/h3>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432\u043e Flutter \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0438\u0437 \u0434\u0432\u0443\u0445 <code>SingleChildScrollView<\/code> \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c: \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439. \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 DataTable \u0432\u043a\u0443\u043f\u0435 \u0441 <code>SingleChildScrollView<\/code>, \u0432\u0435\u0434\u044c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c.<\/p>\n<pre><code class=\"dart\">@override  Widget build(BuildContext context) {    return SingleChildScrollView(  scrollDirection: Axis.horizontal,  child: SingleChildScrollView(    scrollDirection: Axis.vertical,    child: DataTable(      columns: \/*columns*\/,      rows: \/*rows*\/,  ),    );  }<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u0442\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0431\u0443\u0434\u0435\u0442 FPS \u0432 \u0442\u0430\u043a\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438. \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u0427\u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u0437\u0432\u0443\u0447\u0438\u0442 \u043a\u0430\u043a \u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u0434\u0435\u0433\u0440\u0430\u0434\u0438\u0440\u0443\u0435\u0442 \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\/\u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044f\u0447\u0435\u0435\u043a.<\/p>\n<p>\u0412 <a href=\"https:\/\/web.archive.org\/web\/20240224120232\/https:\/\/api.flutter.dev\/flutter\/material\/DataTable-class.html\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443 \u0431\u044b\u043b\u043e \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e: \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u00bb, \u00ab\u0431\u043e\u043b\u044c\u043d\u043e\u00bb, \u00ab\u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0439\u00bb, \u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 SingleChildScrollView, \u0432\u043e\u0437\u044c\u043c\u0438\u0442\u0435 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/PaginatedDataTable-class.html\" rel=\"noopener noreferrer nofollow\">PaginatedDataTable<\/a>.\u00a0<\/p>\n<blockquote>\n<p>Displaying data in a table is <strong>expensive<\/strong>, because to lay out the table all the data must be <strong>measured twice<\/strong>, once to negotiate the dimensions to use for each column, and once to actually lay out the table given the results of the negotiation.<\/p>\n<p>For this reason, if you have a lot of data (say, more than a dozen rows with a dozen columns, though the precise limits depend on the target device), it is suggested that you use a <strong>PaginatedDataTable<\/strong> which automatically splits the data into multiple pages.<\/p>\n<p>Wrapping a DataTable with SingleChildScrollView is expensive as SingleChildScrollView <strong>mounts and paints the entire DataTable even when only some rows are visible<\/strong>. If scrolling in one direction is necessary, then consider using a CustomScrollView, otherwise use PaginatedDataTable to split the data into smaller pages.<\/p>\n<\/blockquote>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Flutter \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0437\u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e \u2014 \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043c\u044b \u0437\u0430\u0441\u0442\u0440\u044f\u043b\u0438 \u0432 2010-\u043c.\u00a0<\/p>\n<figure class=\"bordered\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d48\/592\/b0b\/d48592b0b0fe3e824801b204de31130d.gif\" width=\"498\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d48\/592\/b0b\/d48592b0b0fe3e824801b204de31130d.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d48\/592\/b0b\/d48592b0b0fe3e824801b204de31130d.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0442\u0430\u043a\u0430\u044f \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u044d\u0442\u043e \u044f\u0432\u043d\u043e \u043d\u0435 user-friendly \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439. \u0418\u00a0\u043c\u044b, \u0438\u00a0\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u043b\u0435\u043d\u0442\u0430\u043c \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u0438\u043c \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043a\u0443\u0434\u0430 \u0438 \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e.\u00a0<\/p>\n<p>\u041d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e <a href=\"https:\/\/web.archive.org\/web\/20240224120232\/https:\/\/api.flutter.dev\/flutter\/material\/DataTable-class.html\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> DataTable \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0430\u0441\u044c \u0438 \u0432 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u0438\u044f\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043e\u043f\u0446\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u2014\u00a0 <a href=\"https:\/\/pub.dev\/documentation\/two_dimensional_scrollables\/latest\/two_dimensional_scrollables\/TableView-class.html\" rel=\"noopener noreferrer nofollow\">TableView<\/a> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables\" rel=\"noopener noreferrer nofollow\">two_dimensional_scrollables<\/a>.\u00a0<\/p>\n<blockquote>\n<p>Performance considerations<\/p>\n<p>Columns are sized automatically based on the table&#8217;s contents. It&#8217;s expensive to display large amounts of data with this widget, since it must be measured twice: once to negotiate each column&#8217;s dimensions, and again when the table is laid out.<\/p>\n<p>A SingleChildScrollView mounts and paints the entire child, even when only some of it is visible. For a table that effectively handles large amounts of data, here are some other options to consider:<\/p>\n<ul>\n<li>\n<p><strong>TableView, a widget from the two_dimensional_scrollables package.<\/strong><\/p>\n<\/li>\n<li>\n<p>PaginatedDataTable, which automatically splits the data into multiple pages.<\/p>\n<\/li>\n<li>\n<p>CustomScrollView, for greater control over scrolling effects.<\/p>\n<\/li>\n<\/ul>\n<\/blockquote>\n<h3>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 TwoDimensionalScrollView<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/TwoDimensionalScrollView-class.html\" rel=\"noopener noreferrer nofollow\">TwoDimensionalScrollView<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \u043d\u0430\u043c \u0448\u0442\u0443\u043a\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u0441\u044f: \u043e\u0441\u044c, \u0441\u043a\u0440\u043e\u043b\u043b-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b, build-\u0434\u0435\u043b\u0435\u0433\u0430\u0442\u044b \u0438 \u0442.\u0434.\u00a0<\/p>\n<pre><code class=\"dart\">abstract class TwoDimensionalScrollView extends StatelessWidget {  const TwoDimensionalScrollView({    super.key,    this.primary,    this.mainAxis = Axis.vertical,    this.verticalDetails = const ScrollableDetails.vertical(),    this.horizontalDetails = const ScrollableDetails.horizontal(),    required this.delegate,    this.cacheExtent,    this.diagonalDragBehavior = DiagonalDragBehavior.none,    this.dragStartBehavior = DragStartBehavior.start,    this.keyboardDismissBehavior,    this.clipBehavior = Clip.hardEdge,    this.hitTestBehavior = HitTestBehavior.opaque,  }); }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 TableView.builder, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 2D-\u0441\u043a\u0440\u043e\u043b\u043b. \u0411\u0443\u0434\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f DataTable \u0438 \u0434\u0432\u0430 SingleChildScrollView? \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440\u0435 \u043d\u0430 \u0442\u0435\u0441\u0442\u0435 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 1000 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f4\/d86\/849\/5f4d868494ce5f0bacba93a6c2414eb8.gif\" alt=\"\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c DataTable \u2014 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c 10\u201311 FPS\" title=\"\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c DataTable \u2014 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c 10\u201311 FPS\" width=\"424\" height=\"182\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f4\/d86\/849\/5f4d868494ce5f0bacba93a6c2414eb8.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f4\/d86\/849\/5f4d868494ce5f0bacba93a6c2414eb8.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c DataTable \u2014 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c 10\u201311 FPS<\/em><\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f11\/644\/d70\/f11644d709242b7f44bb54da2702a6f3.gif\" alt=\"\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c TableView.builder \u2014 60 FPS\" title=\"\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c TableView.builder \u2014 60 FPS\" width=\"424\" height=\"182\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f11\/644\/d70\/f11644d709242b7f44bb54da2702a6f3.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f11\/644\/d70\/f11644d709242b7f44bb54da2702a6f3.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c TableView.builder \u2014 60 FPS<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u0430\u044f: 60 FPS c TableView.builder \u0432\u043c\u0435\u0441\u0442\u043e 11 FPS \u0432 \u0441\u0442\u0430\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435. \u042d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441 \u2014 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0432 \u043e\u0434\u0438\u043d \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e TableView \u0431\u0438\u043b\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0441\u0432\u044f\u0437\u043a\u0438 DataTable \u0438 SingleChildScrollView.\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7a1\/57d\/358\/7a157d358842aa40b1d7f89e37f41a00.png\" alt=\"\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TableView \u0432 build() 32 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u0451\u043c\u043d\u044b\u043c \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435\" title=\"\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TableView \u0432 build() 32 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u0451\u043c\u043d\u044b\u043c \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435\" width=\"1803\" height=\"1792\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/7a1\/57d\/358\/7a157d358842aa40b1d7f89e37f41a00.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7a1\/57d\/358\/7a157d358842aa40b1d7f89e37f41a00.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TableView \u0432 build() 32 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u0451\u043c\u043d\u044b\u043c \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435<\/em><\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0430\u043a\u0435\u0442 two_dimensional_scrollables<\/h3>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f TwoDimensionalScrollView, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442\u00a0 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables\" rel=\"noopener noreferrer nofollow\">two_dimensional_scrollables<\/a>, \u044d\u0442\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0430 \u0436\u0435\u00a0 Flutter-\u043a\u043e\u043c\u0430\u043d\u0434\u0430.\u00a0<\/p>\n<p>\u0412 \u043f\u0430\u043a\u0435\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables#tableview\" rel=\"noopener noreferrer nofollow\">TableView<\/a> \u0438 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables#treeview\" rel=\"noopener noreferrer nofollow\">TreeView<\/a> (\u043e\u0431\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430\u043c\u0438 TwoDimensionalScrollView). \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c \u043f\u043e \u0441\u0443\u0442\u0438 <strong>\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e<\/strong>. DataTable \u0438 \u0434\u0432\u0430 SingleChildScrollView \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u2014 \u043c\u043e\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c two_dimensional_scrollables.\u00a0<\/p>\n<figure class=\"bordered\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/077\/c4e\/5da\/077c4e5daad8eee09266afecb01b339e.gif\" width=\"360\" height=\"781\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/077\/c4e\/5da\/077c4e5daad8eee09266afecb01b339e.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/077\/c4e\/5da\/077c4e5daad8eee09266afecb01b339e.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<div class=\"floating-image\"><\/div>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/207\/365\/79c\/20736579c529ff95993132e2b36ed924.gif\" width=\"360\" height=\"781\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/207\/365\/79c\/20736579c529ff95993132e2b36ed924.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/207\/365\/79c\/20736579c529ff95993132e2b36ed924.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<div class=\"floating-image\">\n<p>\u041d\u043e! \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<\/div>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430?<\/h3>\n<p>\u041f\u043e\u043a\u0430\u0436\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Yappy, \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442. \u0415\u0441\u0442\u044c \u043f\u044f\u0442\u044c \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0435\u043c\u0443 \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u0438 \u043c\u0435\u0448\u0430\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0432\u0441\u0451 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043b\u044d\u0439\u0430\u0443\u0442\u043e\u043c.<\/p>\n<p>1. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<p>\u041d\u0430\u0448 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u2014 \u0447\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u0441\u044f \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u0442.\u0435. \u0441\u0430\u043c\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b), \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e (\u0442\u043e \u0435\u0441\u0442\u044c \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a) \u0438 \u0442.\u0434.\u00a0<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/33b\/fae\/ed2\/33bfaeed251c8c2508b6a7301ef5f202.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy\" width=\"463\" height=\"250\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/33b\/fae\/ed2\/33bfaeed251c8c2508b6a7301ef5f202.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/33b\/fae\/ed2\/33bfaeed251c8c2508b6a7301ef5f202.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy<\/em><\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/226\/e2a\/8c3\/226e2a8c3bcfe342431165c54c3c1c86.gif\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy \u2014\u00a0 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044f\u0447\u0435\u0439\u043a\u0438\" title=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy \u2014\u00a0 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044f\u0447\u0435\u0439\u043a\u0438\" width=\"464\" height=\"266\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/226\/e2a\/8c3\/226e2a8c3bcfe342431165c54c3c1c86.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/226\/e2a\/8c3\/226e2a8c3bcfe342431165c54c3c1c86.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy \u2014\u00a0 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044f\u0447\u0435\u0439\u043a\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u043c.<\/strong><\/p>\n<h4>2. \u0421\u043f\u0438\u0441\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0435\u0439\u0441\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0435\u0441\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0441\u043a\u0430\u0434\u0440\u043e\u0432\u043a\u0430 \u2014 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c.\u00a0<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/403\/d25\/1cf\/403d251cf86a6db9513af2708ebca604.gif\" width=\"464\" height=\"116\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/403\/d25\/1cf\/403d251cf86a6db9513af2708ebca604.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/403\/d25\/1cf\/403d251cf86a6db9513af2708ebca604.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0435\u0449\u0451 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c. \u0422\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u043e Viewport.<\/p>\n<p>\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Flutter-\u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 Sliver-\u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043f\u0438\u0441\u043a\u0430, \u0438 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u0430\u043a \u043d\u0430\u0434\u043e. \u041f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u043c\u043e\u0440\u043e\u0447\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0435 \u043a\u0430\u0434\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0438 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. <\/p>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e? \u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u044b\u0448\u0435 \u0432\u0441\u0435\u0433\u043e<\/strong><\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043e\u0434\u0438\u043d \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043d\u0430 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0435 \u043f\u0440\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435, \u0433\u0434\u0435 \u0432\u0438\u0434\u043d\u043e 5 \u043a\u0430\u0434\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u043e Viewport. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e 5 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0432\u0434\u0440\u0443\u0433 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0436\u0435 100 \u043a\u0430\u0434\u0440\u043e\u0432, \u043f\u0440\u0438 \u0442\u043e\u043c \u0447\u0442\u043e \u0432\u043e Viewport \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 5 \u043a\u0430\u0434\u0440\u043e\u0432. \u041a\u0440\u0430\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0438 5 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 95, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/da8\/8e8\/cec\/da88e8cec2de2442eb45209223ae52c6.png\" width=\"1422\" height=\"998\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/da8\/8e8\/cec\/da88e8cec2de2442eb45209223ae52c6.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/da8\/8e8\/cec\/da88e8cec2de2442eb45209223ae52c6.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442? \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e. \u041f\u0440\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u2014 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0442\u044b\u0441\u044f\u0447 \u2014 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0445\u043e\u0442\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0445 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442. \u042d\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u0430\u044f \u0442\u0440\u0430\u0442\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u044b.<\/p>\n<h4>3. \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/h4>\n<p>\u0412 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438: \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438. \u041f\u0440\u0438\u0447\u0451\u043c \u0434\u043b\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0438\u0434\u0435\u043e \u0438 \u0430\u0443\u0434\u0438\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0442\u0438\u043f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443.\u00a0<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7dc\/54e\/1b4\/7dc54e1b488f623c01a4175fa1687659.gif\" width=\"464\" height=\"175\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7dc\/54e\/1b4\/7dc54e1b488f623c01a4175fa1687659.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7dc\/54e\/1b4\/7dc54e1b488f623c01a4175fa1687659.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c34\/8e2\/6d5\/c348e26d500d58056e68e376faa10407.gif\" width=\"464\" height=\"195\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c34\/8e2\/6d5\/c348e26d500d58056e68e376faa10407.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c34\/8e2\/6d5\/c348e26d500d58056e68e376faa10407.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u042d\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u043c.\u00a0<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/330\/845\/873\/3308458733465fdc5441e4c036e09ad8.gif\" width=\"464\" height=\"134\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/330\/845\/873\/3308458733465fdc5441e4c036e09ad8.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/330\/845\/873\/3308458733465fdc5441e4c036e09ad8.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>4. Z-index<\/h4>\n<p>\u0412 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/z-index\" rel=\"noopener noreferrer nofollow\">CSS Z-index<\/a> \u2014 \u044d\u0442\u043e, \u0433\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0448\u0435 \u043d\u0430 \u0433\u0438\u0444\u043a\u0430\u0445 \u0438 \u043d\u0438\u0436\u0435 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0430\u0445.\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0a1\/46f\/309\/0a146f309e5924d52a51eaaed779dfaa.png\" alt=\"\u0421\u043b\u0435\u0432\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0435\u0437 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0435\u0439\" title=\"\u0421\u043b\u0435\u0432\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0435\u0437 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0435\u0439\" width=\"1174\" height=\"384\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/0a1\/46f\/309\/0a146f309e5924d52a51eaaed779dfaa.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0a1\/46f\/309\/0a146f309e5924d52a51eaaed779dfaa.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u0421\u043b\u0435\u0432\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0435\u0437 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0435\u0439<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0443 \u043d\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u043c\u043a\u0430. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0440\u0430\u043c\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0433 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0431\u0440\u0430\u043d, \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c.<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u043e Flutter \u043d\u0435\u0442 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 Z-index (\u0437\u0430\u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 <a href=\"https:\/\/github.com\/flutter\/flutter\/issues\/121173\" rel=\"noopener noreferrer nofollow\">issue<\/a>, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442) \u0438 \u0435\u0441\u043b\u0438 \u043d\u0435 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043d\u0430 UI. \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:\u00a0<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Stack-class.html\" rel=\"noopener noreferrer nofollow\">Stack<\/a> \u2014 \u0447\u0442\u043e\u0431\u044b \u0436\u043e\u043d\u0433\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438.\u00a0 Stack \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438\/\u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u0435, \u043d\u043e \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Overlay-class.html\" rel=\"noopener noreferrer nofollow\">Overlay<\/a> \u2014 \u044d\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430. \u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0442\u043e\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043c\u044b \u0435\u0433\u043e \u0442\u043e\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438. \u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a \u043a\u0430\u043a Overlay \u0436\u0438\u0432\u0451\u0442 \u043f\u043e \u0441\u0432\u043e\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u00ab\u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438\u00bb, \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u044b\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 Overlay \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. <a href=\"https:\/\/pub.dev\/packages\/flutter_portal\" rel=\"noopener noreferrer nofollow\">flutter_portal<\/a>, \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439, \u043d\u043e \u043d\u0435 \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Overlay \u0436\u0438\u0432\u0451\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>Custom layout \u2014 \u043e\u043f\u044f\u0442\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043c \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 layout \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>5. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h4>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a00\/39d\/8e2\/a0039d8e2ba2517b185f95f8f6fbec95.gif\" width=\"462\" height=\"235\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a00\/39d\/8e2\/a0039d8e2ba2517b185f95f8f6fbec95.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a00\/39d\/8e2\/a0039d8e2ba2517b185f95f8f6fbec95.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0443\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043b\u0430\u0432\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0441\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0438\u0436\u0435 \u043d\u0435\u0433\u043e. \u0422\u043e \u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e layout&#8217;\u0430 \u0432\u0441\u0435\u0439 \u00ab\u0442\u0430\u0431\u043b\u0438\u0446\u044b\u00bb. \u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e render-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u0447\u043d\u043e \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431\u043e \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0438\u0445 child, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u0444\u0430\u0437\u0435 layout. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043c\u0438\u043d\u0443\u044f \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/State\/setState.html\" rel=\"noopener noreferrer nofollow\">setState<\/a> \u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 <a href=\"https:\/\/api.flutter.dev\/flutter\/rendering\/RenderObject\/markNeedsLayout.html\" rel=\"noopener noreferrer nofollow\">markNeedsLayout<\/a>\/<a href=\"https:\/\/api.flutter.dev\/flutter\/rendering\/RenderObject\/markNeedsPaint.html\" rel=\"noopener noreferrer nofollow\">markNeedsPaint<\/a> \u043d\u0430 \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435. \u042d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0443\u043d\u043a\u0442, \u0433\u0434\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f, \u0447\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb.<\/p>\n<p>\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u043d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043e\u0442 Flutter-\u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u043d\u043e \u043d\u0435 \u0434\u0430\u0451\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u0430\u0446\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0438\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0432\u0441\u0435\u043c \u0438 \u043a\u0430\u0436\u0434\u043e\u043c\u0443. \u041e\u043d\u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u00ab\u0441\u0440\u0435\u0434\u043d\u0438\u0439\u00bb \u0441\u043b\u0443\u0447\u0430\u0439, \u0443 \u043d\u0430\u0441 \u0436\u0435 \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0438 \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u0435\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 \u0431\u0430\u0437\u0435 \u043d\u043e\u0432\u044b\u0445 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 Flutter, \u0447\u0435\u043c \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0441\u043f\u043e\u0442\u0440\u043e\u0448\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0438 \u043f\u043e\u0434\u043e\u0433\u043d\u0430\u0442\u044c \u043f\u043e\u0434 \u0441\u0435\u0431\u044f.<\/p>\n<h3>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432\u043e Flutter<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 <a href=\"https:\/\/mobiusconf.com\/archive\/2023%20Autumn\/persons\/006382d75fe44da2813bbfbb02c717cb\/\" rel=\"noopener noreferrer nofollow\">Mobius<\/a>, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u043b \u0441 \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u043e\u0439: \u0441\u00a0\u0434\u043e\u043a\u043b\u0430\u0434\u0430\u043c\u0438, \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043a\u0430\u043c\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c, \u0437\u0443\u043c\u0438\u0442\u044c, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e \u0438\u00a0\u0442.\u0434.\u00a0<\/p>\n<figure class=\"bordered full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efe\/56a\/9f2\/efe56a9f2b1f1dcaf986d93f21aa8d4f.gif\" width=\"600\" height=\"800\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efe\/56a\/9f2\/efe56a9f2b1f1dcaf986d93f21aa8d4f.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efe\/56a\/9f2\/efe56a9f2b1f1dcaf986d93f21aa8d4f.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0437\u0430\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0442\u0430\u043b\u0438, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0432 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a> \u2014 \u0432\u0441\u044f \u043d\u0430\u0448\u0430 \u0431\u043e\u043b\u044c, \u0441\u043b\u0435\u0437\u044b \u0438 \u043e\u043f\u044b\u0442 \u0442\u0430\u043c.\u00a0<\/p>\n<h4>\u041c\u043e\u0434\u0435\u043b\u044c<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u0447\u0442\u043e-\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u0423 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u0435\u0441\u0442\u044c: \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u043f\u0443\u0441\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 4 \u0447\u0430\u0441\u0430; id \u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0439.\u00a0<\/p>\n<pre><code class=\"dart\">class MobiusSchedule {  static const capacity = Duration(hours: 4);  final String id;  final Iterable&lt;MobiusSpeech&gt; speeches; }<\/code><\/pre>\n<p>\u00a0\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c: \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c (\u043f\u0443\u0441\u0442\u044c 1 \u0447\u0430\u0441), id, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"dart\">class MobiusSpeech {  static const reservedDuration = Duration(hours: 1);  final String id;  final String title;  final Duration duration;  final Duration start;  final Iterable&lt;MobiusSpeechTimestamp&gt; timestamps; }<\/code><\/pre>\n<p>\u0423 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u043a \u0432\u0441\u0451 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043f\u043b\u044e\u0441 \u043e\u0431\u043b\u043e\u0436\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0431\u044b\u043b\u043e.<\/p>\n<pre><code class=\"dart\">class MobiusSpeechTimestamp {  final Duration startsAt;  final Duration duration;  final String title;  final String? description;  final String coverUrl; }<\/code><\/pre>\n<h4>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u00ab\u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435\u00bb, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<p>\u041c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0447\u0430\u0441\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432.\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce1\/a89\/20c\/ce1a8920c68ea08919d3b18fb0f513e1.png\" width=\"1600\" height=\"626\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ce1\/a89\/20c\/ce1a8920c68ea08919d3b18fb0f513e1.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce1\/a89\/20c\/ce1a8920c68ea08919d3b18fb0f513e1.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u0441\u043b\u043e\u0442\u0443, \u043d\u043e \u043d\u0435 \u0440\u0430\u0432\u043d\u043e \u0435\u043c\u0443, \u043e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u043d\u044c\u0448\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430 \u0434\u043e\u043a\u043b\u0430\u0434\u0430.\u00a0<\/p>\n<p>\u0420\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043d\u0435\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0423 \u0441\u043b\u043e\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043f\u043e \u044d\u0442\u0438\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0441 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u043c\u0438.\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8f4\/d1c\/cc9\/8f4d1ccc9bfd2893d409d3078b669501.png\" width=\"1280\" height=\"1255\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8f4\/d1c\/cc9\/8f4d1ccc9bfd2893d409d3078b669501.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8f4\/d1c\/cc9\/8f4d1ccc9bfd2893d409d3078b669501.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 UI<\/h4>\n<p>\u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c UI. \u041d\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f UI \u0438 layout, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u0430 \u043d\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>\u041e\u043f\u0438\u0448\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0442\u0440\u043e\u043a\u0438, \u0438\u0445 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a (\u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e).<\/p>\n<pre><code class=\"dart\">class MobiusScheduleViewData {  final Iterable&lt;MobiusScheduleViewRow&gt; rows;  final double width;  final int maxCellsCount;  final String? selectedSpeechId; }<\/code><\/pre>\n<p>\u0423 \u0441\u0442\u0440\u043e\u043a\u0438 \u0435\u0441\u0442\u044c: \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u0444\u043b\u0430\u0436\u043e\u043a \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438, \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432 \u0441\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u043c \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.\u00a0<\/p>\n<pre><code class=\"dart\">class MobiusScheduleViewRow { \u00a0final String scheduleId; \u00a0final bool hasSelectedCell; \u00a0final Iterable&lt;MobiusScheduleViewCell&gt; cells; \u00a0final double collapsedHeight; \u00a0final double expandedHeight; }<\/code><\/pre>\n<p>\u0423 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432\u0441\u0451 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435: \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u0448\u0438\u0440\u0438\u043d\u0430, \u0441\u0432\u0435\u0440\u043d\u0443\u0442\u0430\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430, \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u043b\u0438 \u044d\u0442\u0430 \u044f\u0447\u0435\u0439\u043a\u0430.<\/p>\n<pre><code class=\"dart\">class MobiusScheduleViewRow {  final String scheduleId;  final bool hasSelectedCell;  final Iterable&lt;MobiusScheduleViewCell&gt; cells;  final double collapsedHeight;  final double expandedHeight; }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u0438.\u00a0<\/p>\n<pre><code class=\"dart\">const _durationFactor = 1000000;  extension DurationX on Duration {  double toWidth(double screenWidth) =&gt;      inMicroseconds * screenWidth \/ (MobiusSchedule.capacity.inSeconds * _durationFactor); }  extension DoubleX on double {  Duration toDuration(double screenWidth) =&gt;      Duration(        microseconds: this * MobiusSchedule.capacity.inSeconds * _durationFactor ~\/ screenWidth,      ); }<\/code><\/pre>\n<p>\u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f layout.<\/p>\n<pre><code class=\"dart\">factory MobiusScheduleViewData({  required Iterable&lt;MobiusSchedule&gt; schedules,  required double screenWidth,  String? selectedSpeechId, }) {  \/\/ \u0411\u0435\u0440\u0451\u043c \u043d\u0435\u043a\u0438\u0435 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f  var width = 0.0;  final rows = &lt;MobiusScheduleViewRow&gt;[];  \/\/ \u041f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u0432 \u0446\u0438\u043a\u043b\u0435    for (final schedule in schedules) {    \/\/ \"\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c\" \u0441\u0442\u0440\u043e\u043a\u0438    final row = MobiusScheduleViewRow(      schedule: schedule,      screenWidth: screenWidth,      selectedSpeechId: selectedSpeechId,    );    rows.add(row);    \/\/ \u0421\u0447\u0438\u0442\u0430\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a    maxCellsCount = max(maxCellsCount, row.cells.length);    \/\/ \u0421\u0447\u0438\u0442\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0440\u0430\u0432\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0435 \u0441\u0430\u043c\u043e\u0439 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438    width = max(      width,      \/\/ \u041a\u0430\u0436\u0434\u043e\u0435 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c 1 \u0447\u0430\u0441      (MobiusSpeech.reservedDuration * row.cells.length).toWidth(screenWidth),    );  } }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0442\u0440\u043e\u043a\u0435.\u00a0<\/p>\n<pre><code class=\"dart\">factory MobiusScheduleViewRow({   required MobiusSchedule schedule,   required double screenWidth,   required String? selectedSpeechId, }) {   \/\/ \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f   var (hasSelectedCell, maxExpandedHeight, maxCollapsedHeight) =       (false, 0.0, 0.0);   final cells = &lt;MobiusScheduleViewCell&gt;[];      \/\/ \u0418\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044e \u0432 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0438   for (final speech in schedule.speeches) {     \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043e \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435     final isSelected = speech.id == selectedSpeechId;      if (isSelected) hasSelectedCell = true;          \/\/ \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u044f\u0447\u0435\u0439\u043a\u0443 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f     final cell = MobiusScheduleViewCell(       speech: speech,       isSelected: isSelected,       screenWidth: screenWidth,     );          \/\/ \"\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c\" \u044f\u0447\u0435\u0439\u043a\u0438     cells.add(cell);          maxExpandedHeight = math.max(maxExpandedHeight, cell.expandedHeight);     maxCollapsedHeight = math.max(maxCollapsedHeight, cell.collapsedHeight);   }    \/\/ \u0421\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0431\u044b\u043b \u043d\u0430\u0438\u0432\u044b\u0441\u0448\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (Z index)   cells.sort((a, _) =&gt; a.speechId == selectedSpeechId ? 1 : 0); }<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0432\u0430\u0436\u043d\u044b \u0434\u0432\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u0430: <\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0441\u0442\u044c \u043b\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0437\u0434\u0435\u0441\u044c, \u044d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438; <\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0441\u043e\u0442\u0430 \u0432 \u0441\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u043c \u0438 \u0440\u0430\u0437\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u2014 \u0431\u0435\u0440\u0451\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u043e\u0441\u044c. <\/p>\n<\/li>\n<\/ul>\n<p>\u0410 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u00ab\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u00bb Z-index. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u043a\u043e\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0430\u043c\u044b\u0439 \u0433\u0440\u044f\u0437\u043d\u044b\u0439 \u0445\u0430\u043a \u043d\u0430 \u0441\u0432\u0435\u0442\u0435: \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0436\u0435\u0442 \u0441 \u043d\u0430\u0448\u0438\u043c \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u0431\u044b\u043b \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u0435\u0435 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u043c. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0441\u0430\u043c\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c layout \u0438 \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443 \u0434\u0443\u043c\u0430\u0435\u0442 Flutter. \u042d\u0442\u043e \u0445\u0430\u043a, \u043d\u043e \u043e\u043d \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439.\u00a0<\/p>\n<p>\u0421 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u0432\u0441\u0451 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e: \u043f\u043e\u0437\u0438\u0446\u0438\u044f, \u0432\u044b\u0441\u043e\u0442\u0430, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u043e\u043d\u0438 \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<pre><code class=\"dart\">factory MobiusScheduleViewCell({  required MobiusSpeech speech,  required double screenWidth,  required bool isSelected, }) {  return MobiusScheduleViewCell._(    startsAt: speech.start.toWidth(screenWidth),    width: speech.duration.toWidth(screenWidth),    speechId: speech.id,    isSelected: isSelected,    collapsedHeight: 100,    expandedHeight: 250,  ); }<\/code><\/pre>\n<p>\u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 UI.<\/p>\n<h4>UI<\/h4>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 TwoDimensionalScrollView. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 TickerProvider, \u0447\u0442\u043e\u0431\u044b \u0442\u0432\u043e\u0440\u0438\u0442\u044c \u043c\u0430\u0433\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.\u00a0<\/p>\n<pre><code class=\"dart\">class MobiusScheduleScrollView extends TwoDimensionalScrollView {  final MobiusScheduleViewData data;  final TickerProvider vsync;  \/*constructor*\/  @override  Widget buildViewport(    BuildContext context,    ViewportOffset verticalOffset,    ViewportOffset horizontalOffset,  ) {    \/\/ ...  } }<\/code><\/pre>\n<p>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 \u043e\u0442 \u043d\u0430\u0441 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u2014 buildViewport. \u0417\u043d\u0430\u0447\u0438\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u2014 \u0438 \u0442\u0430\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Viewport:<\/p>\n<pre><code class=\"dart\">class MobiusScheduleViewport extends TwoDimensionalViewport {  \/*constructor*\/  @override  RenderTwoDimensionalViewport createRenderObject(BuildContext context) {    \/\/ createRenderObject  }  @override  void updateRenderObject(    BuildContext context,    RenderMobiusScheduleViewport renderObject,  ) {    \/\/ updateRenderObject  } }<\/code><\/pre>\n<p>Viewport \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u0442 RenderObject \u0438 \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u043a\u0435\u0439, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0430\u0442\u0440\u0451\u0448\u043a\u0443:\u00a0<\/p>\n<pre><code class=\"dart\">class RenderScheduleMobiusViewport extends RenderTwoDimensionalViewport { \/*constructor*\/   @override  void layoutChildSequence() {    \/\/ \u0431\u043e\u043b\u044c  } }<\/code><\/pre>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0435\u0440\u0434\u0446\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u043e\u0434\u043d\u043e\u043c\u0443 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043e\u0442 \u043d\u0430\u0441 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u2014 <code>layoutChildSequence<\/code>. \u0417\u0434\u0435\u0441\u044c \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0430\u0433\u043e\u043d\u0438\u044f, \u0431\u043e\u043b\u044c, \u0441\u043b\u0451\u0437\u044b, \u0431\u0435\u0441\u0441\u043e\u043d\u043d\u044b\u0435 \u043d\u043e\u0447\u0438. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u0435\u0441\u044c layout \u0434\u043b\u044f \u0432\u0441\u0435\u0445 child \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c, \u0443\u0447\u0435\u0441\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0438 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e.<\/p>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.\u00a0<\/p>\n<pre><code class=\"dart\">\/\/ \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 2D \u0441\u043a\u0440\u043e\u043b\u043b\u0430 final horizontalPixels = horizontalOffset.pixels; final verticalPixels = verticalOffset.pixels;  \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 + \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0435\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f cacheExtent final viewportWidth = viewportDimension.width + cacheExtent; final viewportHeight = viewportDimension.height + cacheExtent; final rowsCount = _data.rows.length;  \/\/ \u041e\u0431\u0449\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u043e\u043a var allRowsHeight = 0.0;  \/\/ \u041e\u0431\u0449\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u043e\u043a \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0442.\u0434. var totalHeight = 0.0;  \/\/ \u0418\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c for (var rowIndex = 0; rowIndex &lt; rowsCount; rowIndex++) {   final row = _data.rows.elementAt(rowIndex);   final rowHeight =       row.hasSelectedCell ? row.expandedHeight : row.collapsedHeight;      \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438   final rowStarts = allRowsHeight;   final rowEnds = rowStarts + rowHeight;    \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 viewport \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432   final isPartiallyVisibleAbove =       rowStarts &lt; verticalPixels + viewportHeight;   final isPartiallyVisibleBelow = rowEnds &gt; verticalPixels;   final isVisibleVertically =       isPartiallyVisibleAbove &amp;&amp; isPartiallyVisibleBelow;   totalHeight = math.max(rowEnds, totalHeight);    \/\/ \u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 - \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0435\u0451   if (!isVisibleVertically) {     \/\/ \u041e\u0434\u043d\u0430\u043a\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0435\u0451 \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439     allRowsHeight += rowHeight;     continue;   }    \/\/ \u0418\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043f\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438   for (var cellIndex = 0; cellIndex &lt; row.cells.length; cellIndex++) {     final cell = row.cells.elementAt(cellIndex);     final cellWidth = cell.width;          \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438     final cellStarts = cell.startsAt;     final cellEnds = cellStarts + cellWidth;     final cellHeight =         cell.isSelected ? cell.expandedHeight : cell.collapsedHeight;      \/\/ \u0422\u0430\u043a\u0430\u044f \u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a\u0438.     \/\/ \u041d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0443 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.     if (cellStarts &gt; horizontalPixels + viewportWidth) continue;     if (cellEnds &lt; horizontalPixels) continue;      \/\/ \u041e\u043f\u0440\u0435\u0434\u044f\u043b\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u044f\u0447\u0435\u0439\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f ChildVicinity     \/\/ ChildVicinity \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u043e x \u0438 y (\u0438\u043d\u0434\u0435\u043a\u0441 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438)     final vicinity = ChildVicinity(       xIndex: cellIndex,       yIndex: rowIndex,     );         \/\/ \u0412\u044b\u0437\u043e\u0432 buildOrObtainChildFor - \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0432\u043e\u0440\u0438\u0442 \u043c\u0430\u0433\u0438\u044e     \/\/ \u041e\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0431\u044b\u043b \u043b\u0438 \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d RenderObject \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0445\u044d\u0448 \u0442\u0430\u0431\u043b\u0438\u0446\u044b (vicinity \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430)     \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 - \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f builder \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0437 TwoDimensionalScrollView, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442     \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 RenderBox, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c \u0434\u043b\u044f \u043e\u0441\u0443\u0449\u0441\u0442\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u044d\u0439\u0430\u0443\u0442\u0430     final child = buildOrObtainChildFor(vicinity)!       ..layout(         BoxConstraints(           maxWidth: cellWidth,           minHeight: cellHeight,           maxHeight: rowHeight,         ).normalize(),       );      \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0441\u043b\u0435 \u043b\u044d\u0439\u0430\u0443\u0442\u0430     parentDataOf(child).layoutOffset = Offset(       cellStarts - horizontalPixels,       rowStarts - verticalPixels,     );   }    \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439   verticalOffset.applyContentDimensions(     0,     (totalHeight - viewportDimension.height).clamp(0, double.infinity),   );    horizontalOffset.applyContentDimensions(     0,     (data.width - viewportDimension.width).clamp(0, double.infinity),   ); }<\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0432 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>, \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0438\u0441\u043f\u0435\u0447\u0451\u043d\u043d\u044b\u0439 TwoDimensionalScrollView \u0432\u0438\u0434\u0436\u0435\u0442:<\/p>\n<pre><code class=\"dart\">return MobiusScheduleView(   data: _data,   delegate: TwoDimensionalChildBuilderDelegate(     maxXIndex: _data.maxCellsCount - 1, \/\/ do you remeber me?     maxYIndex: _data.rows.length - 1,     builder: (context, vicinity) {       final row = _data.rows.elementAtOrNull(vicinity.yIndex);       if (row == null) return null;       final cell = row.cells.elementAtOrNull(vicinity.xIndex);       if (cell == null) return null;       return MyCoolCellWidget();     },   ), );<\/code><\/pre>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043a\u0430\u043a \u044f \u0447\u0443\u0442\u044c \u0440\u0430\u043d\u044c\u0448\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u043f\u043e\u0437\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a? \u0423\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043d\u0435\u0442, \u043d\u043e \u044f-\u0442\u043e \u043f\u043e\u043c\u043d\u044e!<\/p>\n<p>\u042d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0430 \u043f\u0440\u0438\u0439\u0442\u0438 \u00ab\u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u00bb.<\/p>\n<p>\u0414\u0430, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0443 <code>TwoDimensionalScrollView<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u00ab\u043f\u0443\u0433\u0430\u044e\u0449\u0435\u00bb \u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c: <code>maxXIndex<\/code> \u0438 <code>maxYIndex<\/code>. \u041d\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a <code>itemCount<\/code> \u0443 <code>ListView.builder<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0435\u0439. \u0415\u0441\u043b\u0438 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u0442\u0430\u043a\u043e\u043c \u043a\u043b\u044e\u0447\u0435, \u0432\u0441\u0451 \u0441\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. <code>itemCount<\/code> \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u2014 <code>_data.rows.length -1<\/code>. \u0410 \u0432\u043e\u0442 \u043f\u043e\u0434\u0441\u0447\u0451\u0442 <code>itemCount <\/code>\u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0432 build-\u043c\u0435\u0442\u043e\u0434\u0435 \u043f\u0440\u0438\u0432\u0435\u043b \u0431\u044b \u043a \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u0430\u043c \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 UI \u0438 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u044e FPS, \u0447\u0435\u0433\u043e \u043c\u044b \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0438\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043b\u044d\u0439\u0430\u0443\u0442\u0430, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u043f\u0440\u0438\u043f\u0430\u0441\u043b\u0438\u00bb \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043e\u043d\u043e \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c.<\/p>\n<h4>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438<\/h4>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u043c\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438. \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0436\u0435, \u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <a href=\"https:\/\/api.flutter.dev\/flutter\/animation\/Tween-class.html\" rel=\"noopener noreferrer nofollow\"><code>Tween-\u044b<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043d\u0430 <a href=\"https:\/\/api.flutter.dev\/flutter\/animation\/AnimationController-class.html\" rel=\"noopener noreferrer nofollow\"><code>AnimationController<\/code><\/a><strong>, <\/strong>\u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>TickerProvider<\/code>:\u00a0<\/p>\n<pre><code class=\"dart\">    final rowHeightTween = _rowTweens[row.scheduleId] ??= Tween(        begin: row.collapsedHeight,        end: row.hasSelectedCell ? row.expandedHeight : row.collapsedHeight,     );     final rowHeight = rowHeightTween.evaluate(_animationController);<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0445\u043e\u0434. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0432 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>, \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a \u0438 \u044f\u0447\u0435\u0435\u043a. <\/p>\n<h4>\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u044f\u0447\u0435\u0439\u043a\u0438<\/h4>\n<p>\u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0441\u0430\u043c\u044b\u0439 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u0435\u0439\u0441, \u043a\u0430\u043a \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0442\u0430\u043a \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<p>\u042f\u0447\u0435\u0439\u043a\u0430 \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0433\u043e layout. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0441\u043f\u0438\u0441\u043e\u043a, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043a\u0430\u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 Viewport. \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 Viewport \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u0438\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u044b, scrollOffset, layoutOffset \u0438 \u0442\u0434.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u043b\u0430\u0433\u0430\u043c\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 Viewport \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/46a\/292\/218\/46a2922180f23999fa18365d42c1ee61.png\" width=\"1600\" height=\"617\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/46a\/292\/218\/46a2922180f23999fa18365d42c1ee61.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/46a\/292\/218\/46a2922180f23999fa18365d42c1ee61.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\/blob\/dee8f12150a31f3770414ef540e910a77acba0ad\/lib\/presentation\/widget\/mobius_schedule_view_child_viewport.dart#L9\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434\u0435<\/a> (\u0432 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u0438\u0434\u0435) \u044d\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0431\u0435\u0440\u0451\u043c \u0440\u0435\u043d\u0434\u0435\u0440-\u043e\u0431\u044a\u0435\u043a\u0442, \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\/blob\/dee8f12150a31f3770414ef540e910a77acba0ad\/lib\/presentation\/widget\/mobius_schedule_view_child_viewport.dart#L59\" rel=\"noopener noreferrer nofollow\">layoutChildSequence<\/a> \u0438 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\/blob\/dee8f12150a31f3770414ef540e910a77acba0ad\/lib\/presentation\/widget\/mobius_schedule_view_child_viewport.dart#L5\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043b\u0435\u0433\u0430\u0442<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0443\u0436\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u0445:\u00a0\u00a0<\/p>\n<pre><code class=\"dart\">class RenderChildViewport extends RenderViewport {  @override  double layoutChildSequence(\/*method arguments*\/) {    final data = delegateLayout(\/*method arguments*\/);    return super.layoutChildSequence(\/*delegated data arguments*\/);  } }<\/code><\/pre>\n<p>\u041d\u0430\u0448 TwoDimensionalScrollView \u0443\u0436\u0435 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\/blob\/dee8f12150a31f3770414ef540e910a77acba0ad\/lib\/presentation\/widget\/mobius_speech_widget.dart#L118\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 <\/a>\u2014 \u0432\u0435\u0434\u044c \u0435\u0451 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043c\u044b! \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u043b\u0438\u0448\u043d\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439.\u00a0<\/p>\n<h3>\u0417\u0430\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043c\u043e\u0436\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0412\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Yappy \u2014 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0440\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u0432\u0430 SingleChildScrollView: \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0441\u0438. \u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u0434\u0430\u0432\u0430\u043b\u0430 \u0442\u043e\u0440\u043c\u043e\u0437\u0430 \u0432 UI, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <strong>\u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 10 \u0440\u0430\u0437 (\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435)<\/strong>.\u00a0\u00a0<\/p>\n<h4>1. \u041f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u0430 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430<\/h4>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c5b\/1a6\/680\/c5b1a668050e02d3c72ed8fbbcbe252e.gif\" width=\"464\" height=\"553\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c5b\/1a6\/680\/c5b1a668050e02d3c72ed8fbbcbe252e.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c5b\/1a6\/680\/c5b1a668050e02d3c72ed8fbbcbe252e.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u0438\u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u043c\u0435\u0440\u043e\u0432 \u0441 \u043f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u043e\u0439 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430: \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0438\u0434\u0435\u043e \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u043f\u0440\u0430\u0432\u043e, \u0437\u0430\u043c\u0435\u0440\u044f\u0435\u043c \u0441\u0440\u0435\u0434\u043d\u0438\u0439 FPS. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043b\u0430\u0431\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 Huawei Mate 20 lite\u00a0 \u0438 iPhone 7 \u2014 \u0447\u0442\u043e\u0431\u044b \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u044b\u043b \u0437\u0430\u043c\u0435\u0442\u043d\u0435\u0435 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0443\u0436\u0435 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445.\u00a0 <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a2\/f6d\/007\/1a2f6d007f3f268c3ea1b200a0a43972.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u0438 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u0438 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)\" width=\"1096\" height=\"742\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/1a2\/f6d\/007\/1a2f6d007f3f268c3ea1b200a0a43972.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a2\/f6d\/007\/1a2f6d007f3f268c3ea1b200a0a43972.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u0438 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0413\u0440\u0430\u0444\u0438\u043a\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f\u043c \u0438 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f\u043c \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0442\u0435\u043c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e.\u00a0<\/p>\n<h4>2. \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430<\/h4>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f66\/600\/e72\/f66600e72d5e464f32b57c2083423d08.gif\" width=\"464\" height=\"551\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f66\/600\/e72\/f66600e72d5e464f32b57c2083423d08.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f66\/600\/e72\/f66600e72d5e464f32b57c2083423d08.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0434\u0430\u043b\u0430 \u0441\u0430\u043c\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. \u0420\u0430\u043d\u044c\u0448\u0435 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 FPS \u043d\u0430 \u0437\u0443\u043c\u0435 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u043c\u043e\u0433 \u043f\u0430\u0434\u0430\u0442\u044c \u0434\u043e 4 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432\u0438\u0434\u043d\u0430 \u043d\u0435\u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u043c \u0433\u043b\u0430\u0437\u043e\u043c.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/289\/18d\/a5a\/28918da5a710621b287a9590addb256d.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)\" width=\"922\" height=\"592\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/289\/18d\/a5a\/28918da5a710621b287a9590addb256d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/289\/18d\/a5a\/28918da5a710621b287a9590addb256d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)<\/em><\/figcaption><\/div>\n<\/figure>\n<h4>3. \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0422\u0430\u043a \u043c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b play, \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0441 \u0440\u0430\u0441\u043a\u0430\u0434\u0440\u043e\u0432\u043a\u043e\u0439.\u00a0<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/36d\/c6e\/fe1\/36dc6efe13c1f5d67d21cb9e5198cb25.gif\" width=\"464\" height=\"545\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/36d\/c6e\/fe1\/36dc6efe13c1f5d67d21cb9e5198cb25.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/36d\/c6e\/fe1\/36dc6efe13c1f5d67d21cb9e5198cb25.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430 10-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u043c \u0432\u0438\u0434\u0435\u043e \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0437\u0430\u043c\u0435\u0440\u0430\u0445.\u00a0\u00a0<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/caa\/0d6\/018\/caa0d6018da6fbb52f5ff2db79eb97a9.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)\" width=\"1330\" height=\"663\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/caa\/0d6\/018\/caa0d6018da6fbb52f5ff2db79eb97a9.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/caa\/0d6\/018\/caa0d6018da6fbb52f5ff2db79eb97a9.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption><em>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 FPS)<\/em><\/figcaption><\/div>\n<\/figure>\n<h3>\u0418\u0442\u043e\u0433\u0438 \u0438 \u0432\u044b\u0432\u043e\u0434\u044b<\/h3>\n<p>\u041f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 <code>TwoDimensionalScrollView<\/code> \u0432\u043e Flutter \u2014 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442 Flutter-\u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <strong>\u0441\u0443\u043c\u0430\u0441\u0448\u0435\u0434\u0448\u0438\u0439 \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0430\u0440\u043e\u043c<\/strong>. \u0412\u043e\u0437\u044c\u043c\u0438\u0442\u0435 <code>TableView<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>DataTable + SingleChildScrollView<\/code> \u0438 \u0443\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b.\u00a0\u00a0<\/p>\n<p>\u042d\u0442\u043e \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u0430\u0451\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Flutter, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440. \u0422\u043e\u043b\u044c\u043a\u043e \u0432\u0434\u0443\u043c\u0430\u0439\u0442\u0435\u0441\u044c: \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u043e \u0441\u0443\u0442\u0438 \u043e\u0434\u0438\u043d \u0432\u0438\u0434\u0436\u0435\u0442, \u043d\u043e \u044d\u0442\u043e \u0446\u0435\u043b\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.\u00a0<\/p>\n<p>\u041f\u0440\u0430\u0432\u0434\u0430, \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0443\u044e\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043d\u0435 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u0438 \u043f\u0443\u0442\u044c \u043a \u043d\u0435\u0439 \u0431\u044b\u043b \u0441\u043b\u043e\u0436\u043d\u044b\u043c. \u041e\u0447\u0435\u043d\u044c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u043f\u043e \u0442\u0438\u043f\u0443 Sliver \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043c\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c.\u00a0<\/p>\n<p>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u0441\u0435\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u0440\u043e\u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043f\u0435\u0440\u0435\u0436\u0438\u0442\u0443\u044e \u0431\u043e\u043b\u044c \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u043c\u043e\u0446\u0438\u0438 \u043e\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432\u043e Flutter \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0435\u0441\u044c: <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll<\/a>. <\/p>\n<blockquote>\n<p><em>\u0411\u043e\u043b\u044c\u0448\u0435 Flutter-\u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043a\u0435\u0439\u0441\u043e\u0432 \u0441\u043e\u0442\u0440\u0438\u0442\u0435 \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 <\/em><a href=\"https:\/\/t.me\/ohmyflutter\" rel=\"noopener noreferrer nofollow\"><em>Oh, my Flutter<\/em><\/a><em>. \u0410 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0438\u0434\u0435\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043a\u0430\u043d\u0430\u043b <\/em><a href=\"https:\/\/t.me\/smotrizait\" rel=\"noopener noreferrer nofollow\"><em>\u0421\u043c\u043e\u0442\u0440\u0438 \u0437\u0430 IT<\/em><\/a><em> \u2014 \u0442\u0430\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u0426\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0430\u043a\u0442\u0438\u0432\u043e\u0432 \u00ab\u0413\u0430\u0437\u043f\u0440\u043e\u043c-\u041c\u0435\u0434\u0438\u0430 \u0425\u043e\u043b\u0434\u0438\u043d\u0433\u0430\u00bb, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a RUTUBE, Yappy, PREMIER \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0435\u0434\u0438\u0430\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c. \u0414\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0438 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445!<\/em><\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/922618\/\"> https:\/\/habr.com\/ru\/articles\/922618\/<\/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>\u0414\u0430 \u043a\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u044d\u0442\u043e\u0442 \u0432\u0430\u0448 2D-\u0441\u043a\u0440\u043e\u043b\u043b? \u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433 excel? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043d\u0443\u0436\u0435\u043d \u0432 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u2014 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0448 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.\u00a0<\/p>\n<p>\u0415\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Yappy \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439, \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Flutter, \u0438 \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c 2D-\u0441\u043a\u0440\u043e\u043b\u043b \u2014 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c-\u0442\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e, \u0432 \u0447\u0451\u043c \u0431\u044b\u043b\u0430 \u0431\u044b\u043b\u0430 \u0437\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432\u043e Flutter \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u043a\u0430\u043a\u0438\u0445 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0424\u0451\u0434\u043e\u0440 \u0411\u043b\u0430\u0433\u043e\u0434\u044b\u0440\u044c, \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439, \u044f\u0432\u043b\u044f\u044e\u0441\u044c \u0442\u0435\u0445\u043b\u0438\u0434\u043e\u043c \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Yappy \u0438 \u0441\u043e\u0432\u0435\u0434\u0443\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u00ab<a href=\"https:\/\/t.me\/ohmyflutter\" rel=\"noopener noreferrer nofollow\">Oh, my Flutter<\/a>\u00bb, \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u0438\u043b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 Flutter, \u043f\u043e\u043a\u0430 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f \u0442\u0430\u043c \u043d\u0435 <a href=\"https:\/\/habr.com\/ru\/news\/879478\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043b\u0438<\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430 Flutter \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0438 \u0447\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u0430\u0442\u044c. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 (\u0432\u0435\u0441\u044c \u0435\u0451 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b\u043b\u043e\u0436\u0435\u043d \u043d\u0430 <a href=\"https:\/\/github.com\/feduke-nukem\/mobius_2d_scroll\" rel=\"noopener noreferrer nofollow\">github<\/a>), \u0438 \u043e\u0446\u0435\u043d\u0438\u043c \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Yappy \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0443\u043c\u0430\u0441\u0448\u0435\u0434\u0448\u0438\u0439.\u00a0\u00a0\u00a0\u00a0<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u042d\u0442\u043e 2D-\u0441\u043a\u0440\u043e\u043b\u043b \u0438\u043b\u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043d\u0435\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<h3>\u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0440\u0430\u043d\u044c\u0448\u0435 <\/h3>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432\u043e Flutter \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0438\u0437 \u0434\u0432\u0443\u0445 <code>SingleChildScrollView<\/code> \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c: \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439. \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 DataTable \u0432\u043a\u0443\u043f\u0435 \u0441 <code>SingleChildScrollView<\/code>, \u0432\u0435\u0434\u044c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c.<\/p>\n<pre><code class=\"dart\">@override  Widget build(BuildContext context) {    return SingleChildScrollView(  scrollDirection: Axis.horizontal,  child: SingleChildScrollView(    scrollDirection: Axis.vertical,    child: DataTable(      columns: \/*columns*\/,      rows: \/*rows*\/,  ),    );  }<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u0442\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0431\u0443\u0434\u0435\u0442 FPS \u0432 \u0442\u0430\u043a\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438. \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u0427\u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u0437\u0432\u0443\u0447\u0438\u0442 \u043a\u0430\u043a \u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u0434\u0435\u0433\u0440\u0430\u0434\u0438\u0440\u0443\u0435\u0442 \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\/\u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044f\u0447\u0435\u0435\u043a.<\/p>\n<p>\u0412 <a href=\"https:\/\/web.archive.org\/web\/20240224120232\/https:\/\/api.flutter.dev\/flutter\/material\/DataTable-class.html\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443 \u0431\u044b\u043b\u043e \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e: \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u00bb, \u00ab\u0431\u043e\u043b\u044c\u043d\u043e\u00bb, \u00ab\u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0439\u00bb, \u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 SingleChildScrollView, \u0432\u043e\u0437\u044c\u043c\u0438\u0442\u0435 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/PaginatedDataTable-class.html\" rel=\"noopener noreferrer nofollow\">PaginatedDataTable<\/a>.\u00a0<\/p>\n<blockquote>\n<p>Displaying data in a table is <strong>expensive<\/strong>, because to lay out the table all the data must be <strong>measured twice<\/strong>, once to negotiate the dimensions to use for each column, and once to actually lay out the table given the results of the negotiation.<\/p>\n<p>For this reason, if you have a lot of data (say, more than a dozen rows with a dozen columns, though the precise limits depend on the target device), it is suggested that you use a <strong>PaginatedDataTable<\/strong> which automatically splits the data into multiple pages.<\/p>\n<p>Wrapping a DataTable with SingleChildScrollView is expensive as SingleChildScrollView <strong>mounts and paints the entire DataTable even when only some rows are visible<\/strong>. If scrolling in one direction is necessary, then consider using a CustomScrollView, otherwise use PaginatedDataTable to split the data into smaller pages.<\/p>\n<\/blockquote>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Flutter \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0437\u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e \u2014 \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043c\u044b \u0437\u0430\u0441\u0442\u0440\u044f\u043b\u0438 \u0432 2010-\u043c.\u00a0<\/p>\n<figure class=\"bordered\"><\/figure>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0442\u0430\u043a\u0430\u044f \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u044d\u0442\u043e \u044f\u0432\u043d\u043e \u043d\u0435 user-friendly \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439. \u0418\u00a0\u043c\u044b, \u0438\u00a0\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u043b\u0435\u043d\u0442\u0430\u043c \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u0438\u043c \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043a\u0443\u0434\u0430 \u0438 \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e.\u00a0<\/p>\n<p>\u041d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e <a href=\"https:\/\/web.archive.org\/web\/20240224120232\/https:\/\/api.flutter.dev\/flutter\/material\/DataTable-class.html\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> DataTable \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0430\u0441\u044c \u0438 \u0432 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u0438\u044f\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043e\u043f\u0446\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u2014\u00a0 <a href=\"https:\/\/pub.dev\/documentation\/two_dimensional_scrollables\/latest\/two_dimensional_scrollables\/TableView-class.html\" rel=\"noopener noreferrer nofollow\">TableView<\/a> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables\" rel=\"noopener noreferrer nofollow\">two_dimensional_scrollables<\/a>.\u00a0<\/p>\n<blockquote>\n<p>Performance considerations<\/p>\n<p>Columns are sized automatically based on the table&#8217;s contents. It&#8217;s expensive to display large amounts of data with this widget, since it must be measured twice: once to negotiate each column&#8217;s dimensions, and again when the table is laid out.<\/p>\n<p>A SingleChildScrollView mounts and paints the entire child, even when only some of it is visible. For a table that effectively handles large amounts of data, here are some other options to consider:<\/p>\n<ul>\n<li>\n<p><strong>TableView, a widget from the two_dimensional_scrollables package.<\/strong><\/p>\n<\/li>\n<li>\n<p>PaginatedDataTable, which automatically splits the data into multiple pages.<\/p>\n<\/li>\n<li>\n<p>CustomScrollView, for greater control over scrolling effects.<\/p>\n<\/li>\n<\/ul>\n<\/blockquote>\n<h3>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 TwoDimensionalScrollView<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/TwoDimensionalScrollView-class.html\" rel=\"noopener noreferrer nofollow\">TwoDimensionalScrollView<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \u043d\u0430\u043c \u0448\u0442\u0443\u043a\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u0441\u044f: \u043e\u0441\u044c, \u0441\u043a\u0440\u043e\u043b\u043b-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b, build-\u0434\u0435\u043b\u0435\u0433\u0430\u0442\u044b \u0438 \u0442.\u0434.\u00a0<\/p>\n<pre><code class=\"dart\">abstract class TwoDimensionalScrollView extends StatelessWidget {  const TwoDimensionalScrollView({    super.key,    this.primary,    this.mainAxis = Axis.vertical,    this.verticalDetails = const ScrollableDetails.vertical(),    this.horizontalDetails = const ScrollableDetails.horizontal(),    required this.delegate,    this.cacheExtent,    this.diagonalDragBehavior = DiagonalDragBehavior.none,    this.dragStartBehavior = DragStartBehavior.start,    this.keyboardDismissBehavior,    this.clipBehavior = Clip.hardEdge,    this.hitTestBehavior = HitTestBehavior.opaque,  }); }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 TableView.builder, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 2D-\u0441\u043a\u0440\u043e\u043b\u043b. \u0411\u0443\u0434\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f DataTable \u0438 \u0434\u0432\u0430 SingleChildScrollView? \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440\u0435 \u043d\u0430 \u0442\u0435\u0441\u0442\u0435 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 1000 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c DataTable \u2014 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c 10\u201311 FPS<\/em><\/figcaption><\/div>\n<\/figure>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c TableView.builder \u2014 60 FPS<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u0430\u044f: 60 FPS c TableView.builder \u0432\u043c\u0435\u0441\u0442\u043e 11 FPS \u0432 \u0441\u0442\u0430\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435. \u042d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441 \u2014 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0432 \u043e\u0434\u0438\u043d \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e TableView \u0431\u0438\u043b\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0441\u0432\u044f\u0437\u043a\u0438 DataTable \u0438 SingleChildScrollView.\u00a0<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TableView \u0432 build() 32 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u0451\u043c\u043d\u044b\u043c \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435<\/em><\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0430\u043a\u0435\u0442 two_dimensional_scrollables<\/h3>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f TwoDimensionalScrollView, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442\u00a0 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables\" rel=\"noopener noreferrer nofollow\">two_dimensional_scrollables<\/a>, \u044d\u0442\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0430 \u0436\u0435\u00a0 Flutter-\u043a\u043e\u043c\u0430\u043d\u0434\u0430.\u00a0<\/p>\n<p>\u0412 \u043f\u0430\u043a\u0435\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables#tableview\" rel=\"noopener noreferrer nofollow\">TableView<\/a> \u0438 <a href=\"https:\/\/pub.dev\/packages\/two_dimensional_scrollables#treeview\" rel=\"noopener noreferrer nofollow\">TreeView<\/a> (\u043e\u0431\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430\u043c\u0438 TwoDimensionalScrollView). \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c \u043f\u043e \u0441\u0443\u0442\u0438 <strong>\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e<\/strong>. DataTable \u0438 \u0434\u0432\u0430 SingleChildScrollView \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u2014 \u043c\u043e\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c two_dimensional_scrollables.\u00a0<\/p>\n<figure class=\"bordered\"><\/figure>\n<div class=\"floating-image\"><\/div>\n<figure class=\"\"><\/figure>\n<div class=\"floating-image\">\n<p>\u041d\u043e! \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<\/div>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f 2D-\u0441\u043a\u0440\u043e\u043b\u043b\u0430?<\/h3>\n<p>\u041f\u043e\u043a\u0430\u0436\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Yappy, \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442. \u0415\u0441\u0442\u044c \u043f\u044f\u0442\u044c \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0435\u043c\u0443 \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u0438 \u043c\u0435\u0448\u0430\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0432\u0441\u0451 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043b\u044d\u0439\u0430\u0443\u0442\u043e\u043c.<\/p>\n<p>1. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<p>\u041d\u0430\u0448 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u2014 \u0447\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u0441\u044f \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 (\u0442.\u0435. \u0441\u0430\u043c\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b), \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e (\u0442\u043e \u0435\u0441\u0442\u044c \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044f\u0447\u0435\u0435\u043a) \u0438 \u0442.\u0434.\u00a0<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy<\/em><\/figcaption><\/div>\n<\/figure>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Yappy \u2014\u00a0 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044f\u0447\u0435\u0439\u043a\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u043c.<\/strong><\/p>\n<h4>2. \u0421\u043f\u0438\u0441\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0435\u0439\u0441\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0435\u0441\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0441\u043a\u0430\u0434\u0440\u043e\u0432\u043a\u0430 \u2014 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c.\u00a0<\/p>\n<figure class=\"\"><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0435\u0449\u0451 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c. \u0422\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u043e Viewport.<\/p>\n<p>\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Flutter-\u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 Sliver-\u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043f\u0438\u0441\u043a\u0430, \u0438 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u0430\u043a \u043d\u0430\u0434\u043e. \u041f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u043c\u043e\u0440\u043e\u0447\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0435 \u043a\u0430\u0434\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0438 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. <\/p>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e? \u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u044b\u0448\u0435 \u0432\u0441\u0435\u0433\u043e<\/strong><\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043e\u0434\u0438\u043d \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043d\u0430 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0435 \u043f\u0440\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435, \u0433\u0434\u0435 \u0432\u0438\u0434\u043d\u043e 5 \u043a\u0430\u0434\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u043e Viewport. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e 5 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0432\u0434\u0440\u0443\u0433 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0436\u0435 100 \u043a\u0430\u0434\u0440\u043e\u0432, \u043f\u0440\u0438 \u0442\u043e\u043c \u0447\u0442\u043e \u0432\u043e Viewport \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 5 \u043a\u0430\u0434\u0440\u043e\u0432. \u041a\u0440\u0430\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0438 5 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 95, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442? \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432\u0438\u0434\u0435\u043e\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e. \u041f\u0440\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u2014 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0442\u044b\u0441\u044f\u0447 \u2014 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0445\u043e\u0442\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0445 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442. \u042d\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u0430\u044f \u0442\u0440\u0430\u0442\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u044b.<\/p>\n<h4>3. \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/h4>\n<p>\u0412 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438: \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438. \u041f\u0440\u0438\u0447\u0451\u043c \u0434\u043b\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0438\u0434\u0435\u043e \u0438 \u0430\u0443\u0434\u0438\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0442\u0438\u043f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443.\u00a0<\/p>\n<figure class=\"\"><\/figure>\n<figure class=\"\"><\/figure>\n<p>\u042d\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u043c.\u00a0<\/p>\n<figure class=\"\"><\/figure>\n<h4>4. Z-index<\/h4>\n<p>\u0412 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/z-index\" rel=\"noopener noreferrer nofollow\">CSS Z-index<\/a> \u2014 \u044d\u0442\u043e, \u0433\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0448\u0435 \u043d\u0430 \u0433\u0438\u0444\u043a\u0430\u0445 \u0438 \u043d\u0438\u0436\u0435 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0430\u0445.\u00a0<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0421\u043b\u0435\u0432\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0435\u0437 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0437\u0430\u0446\u0438\u0435\u0439<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0443 \u043d\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u043c\u043a\u0430. \u0421 \u0442\u043e\u0447\u043a\u0438<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-465892","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/465892","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=465892"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/465892\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=465892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=465892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=465892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}