{"id":436757,"date":"2024-11-02T21:00:43","date_gmt":"2024-11-02T21:00:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=436757"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=436757","title":{"rendered":"<span>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Date and Time picker \u043a\u0430\u043a \u0432 Telegram \u043d\u0430 Kotlin Jetpack Compose<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0432\u0448\u0438\u0441\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u043c\u0438 \u043a\u043e\u043b\u0435\u0441\u0438\u043a\u0430\u043c\u0438 \u0434\u043b\u044f\u00a0\u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0434\u0430\u0442\u044b \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 Telegram, \u044f \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u00a0\u043e\u0434\u043d\u043e\u043c \u0438\u0437\u00a0\u0441\u0432\u043e\u0438\u0445 \u043f\u0435\u0442\u2011\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0447\u0442\u043e\u2011\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435. \u041f\u0435\u0440\u0432\u043e\u0439 \u043c\u044b\u0441\u043b\u044c\u044e\u00a0\u0431\u044b\u043b\u043e\u00a0\u2014 \u043d\u0430\u0439\u0442\u0438 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445 Telegram, \u043d\u043e\u00a0\u0442.\u043a. \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u00a0\u043d\u0438\u0445 \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430\u00a0Java, \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0435\u00a0\u0438\u0433\u0440\u0430\u0442\u044c \u0432\u00a0\u043b\u043e\u0442\u0435\u0440\u0435\u044e \u0438 \u043d\u0435\u00a0\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u0440\u0430\u0441\u043a\u043e\u043f\u043a\u0438 \u0432\u00a0Java\u2011\u043a\u043e\u0434\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u00a0\u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0430\u00a0Jetpack Compose.<\/p>\n<p>\u041d\u0430 Habr \u044f \u043d\u0430\u0448\u0435\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u043f\u043e\u0445\u043e\u0436\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/articles\/255651\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e 2015\u0433\u043e \u0433\u043e\u0434\u0430<\/a>, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u043d\u0430 Java.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0435\u043c. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0432\u043d\u0435\u0448\u043d\u0435 \u0447\u0435\u043c-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u044d\u0442\u043e\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ecf\/2c7\/1a6\/ecf2c71a635efda2112487520cd2c336.png\" width=\"720\" height=\"731\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ecf\/2c7\/1a6\/ecf2c71a635efda2112487520cd2c336.png\"\/><\/figure>\n<p>\u0421 \u0432\u0438\u0434\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0447\u0430\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 (3 \u0448\u0442)<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u043c\u043e\u0447\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)<\/p>\n<\/li>\n<\/ul>\n<h2>Time picker <\/h2>\n<h2>\u0412\u0435\u0440\u0441\u0442\u043a\u0430<\/h2>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 &#8212; \u0437\u043d\u0430\u0447\u0438\u0442, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 3. \u042f \u043d\u0430\u0447\u043d\u0443 \u0441 \u0446\u0438\u0444\u0440.<\/p>\n<pre><code class=\"kotlin\">@Composable internal fun TimeColumnPicker(     initialValue: Int,     onValueChange: (Int) -&gt; Unit,     range: IntRange,     modifier: Modifier = Modifier, ) {     val context = LocalContext.current     val listState = rememberLazyListState(initialFirstVisibleItemIndex = initialValue)      \/\/ \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.     val list by remember {         mutableStateOf(mutableListOf&lt;String&gt;().apply {             (1..(countOfVisibleItemsInPicker \/ 2)).forEach { _ -&gt; add(\"\") }             for (i in range) add(i.getTimeDefaultStr())             (1..(countOfVisibleItemsInPicker \/ 2)).forEach { _ -&gt; add(\"\") }         })     }      var selectedValue by remember { mutableIntStateOf(initialValue) }     var firstIndex by remember { mutableStateOf(0) }     var lastIndex by remember { mutableStateOf(0) }      Box(         modifier = modifier.height(listHeight.dp),         contentAlignment = Alignment.Center     ) {         Border(itemHeight = itemHeight.dp, color = Theme.colors.oppositeTheme)          LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {             itemsIndexed(items = list) { index, it -&gt;                     Box(                         modifier = Modifier.fillParentMaxHeight(1f \/ countOfVisibleItemsInPicker),                         contentAlignment = Alignment.Center                     ) {                         Text(                             text = it,                             fontSize = FontSize.medium19,                         )                     }             }         }     } }<\/code><\/pre>\n<p>\u0426\u0432\u0435\u0442\u0430 \u043a\u0441\u0442\u0430\u0442\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u0438\u0441\u0430\u043b \u0432 \u044d\u0442\u043e\u0439 <a href=\"https:\/\/habr.com\/ru\/articles\/835138\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a>.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0449\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0434\u0435\u0441\u044c \u043d\u0430 <code>fillMaxParentHeight<\/code>: \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 <code>fillMaxHeight<\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044f \u0435\u0433\u043e. <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>getTimeDefaultStr<\/code> \u0437\u0434\u0435\u0441\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0438\u0441\u043b\u0430, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u043c 2 \u0446\u0438\u0444\u0440\u044b, \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 0, \u0435\u0441\u043b\u0438 \u043e\u0434\u043d\u0430:<\/p>\n<pre><code class=\"kotlin\">fun Int.getTimeDefaultStr(): String =  \"${if (this &lt;= 9) \"0\" else \"\"}$this\"<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b Date&amp;&amp;Time \u043f\u0438\u043a\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0430 \u043d\u0435 \u0440\u0430\u0437\u044a\u0435\u0437\u0436\u0430\u043b\u0441\u044f, \u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0435\u043c\u0443 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c. \u041f\u043b\u044e\u0441\u043e\u043c \u043a\u043e \u0432\u0441\u0435\u043c\u0443, \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0435\u0449\u0435 2 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 \u0440\u0430\u0441\u043a\u043e\u043f\u043e\u043a \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<pre><code class=\"kotlin\">\/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u0435   internal const val countOfVisibleItemsInPicker = 5      \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   internal const val itemHeight = 35f      \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430   internal const val listHeight = countOfVisibleItemsInPicker * itemHeight<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0449\u0430\u044e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044f \u0437\u0430\u0434\u0430\u044e \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0435\u0439 \u0432\u043e \u0431\u043b\u0430\u0433\u043e \u0440\u0435\u044e\u0437\u0430.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435, \u0442.\u043a. \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432 <code>Text<\/code> \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0432\u0432\u0435\u0440\u0445\u0443. <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u00a0\u2014 \u0440\u0430\u043c\u043e\u0447\u043a\u0430, \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a\u00a0\u043b\u043e\u0433\u0438\u043a\u0435. \u00ab\u041d\u0438\u0447\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435, (\u0447\u0435\u043c Row) \u043d\u0435\u00a0\u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u00bb (\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u00a0\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043a\u0442\u043e\u2011\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442)<\/p>\n<pre><code class=\"kotlin\">@Composable   internal fun Border(itemHeight: Dp, color: Color) {       val width = 2.dp       val strokeWidthPx = with(LocalDensity.current) { width.toPx() }       Row(           modifier = Modifier               .fillMaxWidth()               .height(itemHeight)               .drawBehind {                   drawLine(                       color = color,                       strokeWidth = strokeWidthPx,                       start = Offset(0f, 0f),                       end = Offset(size.width, 0f)                 )                                    drawLine(                       color = color,                       strokeWidth = strokeWidthPx,                       start = Offset(0f, size.height),                       end = Offset(size.width, size.height)                   )               }       ) {}   }<\/code><\/pre>\n<p>\u0420\u0430\u043c\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443\u00a0\u2014 \u0432\u044b\u0441\u043e\u0442\u0443 \u0430\u0439\u0442\u0435\u043c\u0430. \u0415\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u00a0Box.<br \/> \u0412\u00a0\u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0443\u00a0\u043b\u0438\u043d\u0438\u0438 \u0432 <code>dp<\/code> \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0435\u0435 \u0432\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0434\u0435\u0432\u0430\u0439\u0441\u0430 \u0447\u0435\u0440\u0435\u0437 <code>LocalDensity<\/code>, \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>drawBehind<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u00a0\u0444\u043e\u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u043c 2\u00a0\u043b\u0438\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u043e\u0442 \u0442\u043e\u0447\u043a\u0438 (0,0), \u0434\u043e \u0442\u043e\u0447\u043a\u0438 (x, 0) &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u0445\u0443<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442 \u0442\u043e\u0447\u043a\u0438 (0,y), \u0434\u043e \u0442\u043e\u0447\u043a\u0438 (x, y) &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u043d\u0438\u0437\u0443. <\/p>\n<p>x,y &#8212; \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041b\u043e\u0433\u0438\u043a\u0430 <\/h2>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. (\u0422\u043e, \u043a \u0447\u0435\u043c\u0443 \u044f \u0448\u0435\u043b \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u043d\u0435 \u043b\u044e\u0431\u043b\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 <code>offset<\/code>&#8216;\u0430\u043c\u0438 \u0432 \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043d\u043e \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0438\u043a\u0430\u043a). \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 2 \u0437\u0430\u0434\u0430\u0447\u0438:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u00ab\u043d\u0435 \u0440\u043e\u0432\u043d\u043e\u00bb<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0441\u044b\u043b\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u044b\u0448\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"kotlin\">LaunchedEffect(listState.isScrollInProgress) {       if (!listState.isScrollInProgress &amp;&amp; listState.firstVisibleItemScrollOffset.pixelsToDp(               context           ) % itemHeight != 0f \/\/ \u0438\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u0430\u044f \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f       ) {           \/\/ \u041f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u0430 \u043a \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443       listState.animateScrollToItem(listState.itemForScrollTo(context = context))       }   }<\/code><\/pre>\n<p>\u0412\u00a0\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e\u00a0\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435\u00a0\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0438\u043d\u0430\u0447\u0435 \u043e\u043d \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u043d\u0435\u00a0\u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0431\u043e\u0440\u043e\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u043a\u043e\u0434).<\/p>\n<p>\u0410\u00a0\u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439\u00a0\u2014 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0441\u043f\u0438\u0441\u043e\u043a \u00ab\u043d\u0435 \u0440\u043e\u0432\u043d\u043e\u00bb \u0443\u043c\u0438\u0440\u0430\u0442\u044c. \u0418\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d.<\/p>\n<p>\u041f\u043e\u043c\u043e\u0436\u0435\u0442 <code>offset<\/code>\u00a0\u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u0430\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0436\u0435 \u043f\u0440\u043e\u043c\u043e\u0442\u0430\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a. \u0421\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u00a0\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u00a0\u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<br \/> \u041e\u0441\u0442\u0430\u0442\u043a\u043e\u043c \u043e\u0442\u00a0\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u00a0\u0440\u0430\u0437 \u043c\u044b \u0438 \u0443\u0437\u043d\u0430\u0435\u043c, \u043d\u0430\u00a0\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<br \/> <code>pixelsToDp<\/code>\u00a0\u2014 \u043c\u0435\u0442\u043e\u0434, \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430.<\/p>\n<pre><code class=\"kotlin\">fun Int.pixelsToDp(context: Context): Float {       val densityDpi = context.resources.displayMetrics.densityDpi       return this \/ (densityDpi \/ 160f)   }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u043e\u0439 <code>itemForScrollTo<\/code>: \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0431\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>lazy<\/code> \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u0432 \u044d\u0442\u043e\u043c \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430).<\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">internal fun LazyListState.itemForScrollTo(context: Context): Int {       val offset = firstVisibleItemScrollOffset.pixelsToDp(context)       return when {           offset == 0f -&gt; firstVisibleItemIndex           offset % itemHeight &gt;= itemHeight \/ 2 -&gt; firstVisibleItemIndex + 1           else -&gt; firstVisibleItemIndex       }  \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 if, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044e }<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c <code>offset<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c.<\/p>\n<p>\u041d\u0430\u0434 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043d <code>offset<\/code> \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u043a\u0440\u0443\u0442\u0438\u0442\u044c.<br \/> !! \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u0432 \u0441\u0430\u043c\u044b\u0439 \u0432\u0435\u0440\u0445, \u0442.\u0435. \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u044c\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. !! \u0418 \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0438\u0434\u0435\u043d \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u0435\u0433\u043e <code>offset<\/code> \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0434\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442:<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u044f \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u043b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b offset (\u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b \u0435\u0433\u043e \u0443 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u043c\u043e\u0447\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0430\u0439\u0442\u0435\u043c, \u0431\u044b\u043b\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c. \u0417\u0434\u0435\u0441\u044c \u043f\u043e 3 \u0430\u0439\u0442\u0435\u043c\u0430, \u0442\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0431\u044b\u043b\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 <code>offset<\/code>&#8216;\u0430 . <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0d4\/531\/799\/0d45317993019982d4c067ad651e27b1.png\" width=\"151\" height=\"158\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d4\/531\/799\/0d45317993019982d4c067ad651e27b1.png\"\/><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/41a\/30a\/59a\/41a30a59ac46b1d6baa3177e9c5e9f42.png\" width=\"187\" height=\"195\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/41a\/30a\/59a\/41a30a59ac46b1d6baa3177e9c5e9f42.png\"\/><\/figure>\n<p>\u041d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 50dp (\u0438\u0437\u043c\u0435\u043d\u0438\u043b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0435), \u0442.\u0435. \u0434\u043e \u041d\u0418\u0416\u041d\u0415\u0419 \u0433\u0440\u0430\u043d\u0438 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e 24 \u0441 \u043a\u043e\u043f\u0435\u0439\u043a\u0430\u043c\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d \u0432\u0438\u0434\u0435\u043d \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 &#8212; \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u043a <code>firstVisibleIndex + 1<\/code>, \u0438\u043d\u0430\u0447\u0435 (\u0435\u0441\u043b\u0438 \u0431 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0431\u044b\u043b\u043e, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, 23dp) \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439 \u0432\u0438\u0434\u0435\u043d \u043d\u0430 27dp == \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b, \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0443\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043a <code>firstVisibleIndex<\/code>.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435: \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u044b\u043b\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435<br \/>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">val offset by remember { derivedStateOf { listState.firstVisibleItemScrollOffset } } LaunchedEffect(offset) {         val newValue =             list[listState.itemForScrollTo(context) + countOfVisibleItemsInPicker \/ 2].toIntOrNull()         if (newValue != null &amp;&amp; newValue != selectedValue) {             onValueChange(newValue)             selectedValue = newValue         }     }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u043f\u0443\u043d\u043a\u0442\u0435. \u041c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437,  <code>onValueChange<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044f \u0435\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u0432 <code>selectedValue<\/code> \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a. <code>listState.itemForScrollTo(context) + countOfVisibleItemsInPicker\/2<\/code> &#8212; \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430. <\/p>\n<p><code>toIntOrNull<\/code> \u0437\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0432\u043e\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u0438 == &#171;&#187;, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043d\u0430\u0447\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0435 \u0434\u0430\u0441\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439 \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0443\u0436\u043d\u044b\u043c). <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/db4\/a2c\/f23\/db4a2cf2375eb4fda8732f3061471b60.png\" width=\"267\" height=\"196\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/db4\/a2c\/f23\/db4a2cf2375eb4fda8732f3061471b60.png\"\/><\/figure>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442. \u0412 \u043f\u0443\u0441\u0442\u044b\u0445 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0430\u0445 \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043f\u0443\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<h2>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e \u043a\u043e\u043b\u0435\u0441\u0443<\/h2>\n<p>\u0412 Telegram \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f, \u043a\u0430\u043a \u043a\u043e\u043b\u0435\u0441\u043e. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0432 \u0437\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0442\u0440\u0435\u043c\u044f \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438:<\/p>\n<ol>\n<li>\n<p>\u0421\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 <\/p>\n<\/li>\n<li>\n<p>\u0421\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 <\/p>\n<p>\u042d\u0442\u0438 2 \u043f\u0443\u043d\u043a\u0442\u0430 \u0434\u0430\u0434\u0443\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438\u043b\u043b\u044e\u0437\u0438\u044e \u043e\u0442\u0434\u0430\u043b\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0443\u043d\u043a\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u0434\u0430\u0441\u0442 \u0438\u043b\u043b\u044e\u0437\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e \u043a\u043e\u043b\u0435\u0441\u0443 (\u0438\u043c\u0445\u043e)<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442 \u0430\u0439\u0442\u0435\u043c\u0430 \u0434\u043e \u0446\u0435\u043d\u0442\u0440\u0430. <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0434 \u0441 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0438\u0431\u043e \u0442\u0430\u043a \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u044b\u0439\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439. <\/p>\n<pre><code class=\"kotlin\">internal fun calculateScaleX(listState: LazyListState, index: Int): Float {     \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430     val layoutInfo = listState.layoutInfo     \/\/ \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432     val visibleItems = layoutInfo.visibleItemsInfo.map { it.index }     \/\/ \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0432\u0438\u0434\u0435\u043d, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 1 (\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439)     if (!visibleItems.contains(index)) return 1f     \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443     val itemInfo = layoutInfo.visibleItemsInfo.firstOrNull { it.index == index } ?: return 1f     \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438     val center = (layoutInfo.viewportEndOffset + layoutInfo.viewportStartOffset) \/ 2f     \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0434\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     val distance = abs((itemInfo.offset + itemInfo.size \/ 2) - center)     \/\/ \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0446\u0435\u043d\u0442\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430     val maxDistance = layoutInfo.viewportEndOffset \/ 2f     \/\/ \u0421\u0436\u0438\u043c\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u043f\u0440\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438     return 1f - (distance \/ maxDistance) * 0.5f }  internal fun calculateScaleY(listState: LazyListState, index: Int): Float {     \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430     val layoutInfo = listState.layoutInfo     \/\/ \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432     val visibleItems = layoutInfo.visibleItemsInfo.map { it.index }     \/\/ \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0432\u0438\u0434\u0435\u043d, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 1 (\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439)     if (!visibleItems.contains(index)) return 1f     \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443     val itemInfo = layoutInfo.visibleItemsInfo.firstOrNull { it.index == index } ?: return 1f     \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438     val center = (layoutInfo.viewportEndOffset + layoutInfo.viewportStartOffset) \/ 2f     \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0434\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     val distance = abs((itemInfo.offset + itemInfo.size \/ 2) - center)     \/\/ \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0446\u0435\u043d\u0442\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430     val maxDistanceY = layoutInfo.viewportEndOffset \/ 2f     \/\/ \u0421\u0436\u0438\u043c\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438     return 1f - (distance \/ maxDistanceY) }  internal fun calculateAlpha(index: Int, listState: LazyListState): Float {     \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430     val layoutInfo = listState.layoutInfo     \/\/ \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432     val visibleItems = layoutInfo.visibleItemsInfo.map { it.index }     \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c     if (visibleItems.isEmpty()) return 1f     \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438     val center = (layoutInfo.viewportEndOffset + layoutInfo.viewportStartOffset) \/ 2f     \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443     val itemInfo = layoutInfo.visibleItemsInfo.firstOrNull { it.index == index } ?: return 1f     \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0434\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     val distance = abs((itemInfo.offset + itemInfo.size \/ 2) - center)     \/\/ \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438     val maxDistance = layoutInfo.viewportEndOffset \/ 2f     \/\/ \u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e 0.3 \u043f\u0440\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438     return 1f - (distance \/ maxDistance) * 0.7f }<\/code><\/pre>\n<p> \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0442\u0435\u043a\u0441\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430:<\/p>\n<pre><code class=\"kotlin\">TextForThisTheme(         modifier = Modifier.graphicsLayer(             scaleX = calculateScaleX(listState, index),             scaleY = calculateScaleY(listState, index),             alpha = calculateAlpha(index, listState)         ),         text = it,         fontSize = FontSize.medium19,     )<\/code><\/pre>\n<p>\u0421 Time \u043f\u0438\u043a\u0435\u0440\u043e\u043c \u0432\u0441\u0435, \u043d\u0443 \u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435. \u0422\u0430\u043a\u0436\u0435 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c <code>Box<\/code> \u0443\u043a\u0430\u0437\u0430\u043b <code>modifier<\/code> \u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0431\u0443\u043a\u0432\u044b. \u0412\u0441\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c, \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0438\u043a\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0432\u044b\u0448\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u043c\u0443 \u0432\u0435\u0441 \u0434\u043b\u044f \u0440\u043e\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043a\u0430\u043a \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c <code>Composable<\/code>. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043c\u0435\u043d\u044f Date \u0438 Time \u043f\u0438\u043a\u0435\u0440\u044b \u0438\u043c\u0435\u044e\u0442 \u0432\u0435\u0441\u0430 2 : 1 : 1 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 1 : 1 : 1, \u0434\u0435\u043b\u043e \u0432\u043a\u0443\u0441\u0430.<\/p>\n<h2>Date picker<\/h2>\n<p>\u0412 \u043d\u0435\u0433\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 <code>initialDate<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>initialValue<\/code> (selected \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e)  \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b\u00a0\u2014 callback \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 <code>modifier<\/code> \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0430\u0445 \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c <code>range<\/code>. \u0414\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0441 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f \u0438 \u043d\u0430 \u0433\u043e\u0434 \u0432\u043f\u0435\u0440\u0435\u0434:<\/p>\n<pre><code class=\"kotlin\">var selectedDate by remember { mutableStateOf(initialDate) }\/\/\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430  val context = LocalContext.current   val dateToday by remember { mutableStateOf(LocalDate.now()) }\/\/\u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u044f\u044f \u0434\u0430\u0442\u0430  val initialDaysIndexItem by remember {       mutableStateOf(           ChronoUnit.DAYS.between(               dateToday,               selectedDate           ).toInt()       )   }  \/\/ \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 val listState = rememberLazyListState(       initialFirstVisibleItemIndex = initialDaysIndexItem   ) val list by remember {         mutableStateOf(mutableListOf&lt;String&gt;().apply {             (1..(countOfVisibleItemsInPicker \/ 2)).forEach { _ -&gt; add(\"\") }             for (i in 0..367) add(dateToday.plusDays(i.toLong())                   .getDateStringWithWeekOfDay(context = context)  )             (1..(countOfVisibleItemsInPicker \/ 2)).forEach { _ -&gt; add(\"\") }         })     }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u0442\u044b \u0443\u00a0\u043c\u0435\u043d\u044f \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u0430 \u043d\u0430\u00a0\u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445, \u0442\u0430\u043a \u0447\u0442\u043e\u00a0\u044d\u0442\u043e \u00ab\u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0432\u043e\u0435\u00bb.<br \/> \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 callback&#8217;\u043e\u0432 \u0438\u0437\u00a0\u0434\u0432\u0443\u0445 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432.<\/p>\n<p>\u0426\u0435\u043b\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438\u00a0\u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e, \u043a\u0430\u043a\u00a0\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0438\u043a\u0435\u0440, \u0430\u00a0\u043d\u0435\u00a0\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u043e\u0434 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>date picker<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u00a0\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043f\u043b\u043e\u0434\u044b \u0442\u0440\u0443\u0434\u0430 \u0442\u0435\u043c\u044b \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043b\u043e\u0433\u0430 \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f &#8212; \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043c\u043e\u0438\u0445 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c79\/085\/5f4\/c790855f4916d066f62e6d5cc6af98e3.png\" width=\"282\" height=\"417\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c79\/085\/5f4\/c790855f4916d066f62e6d5cc6af98e3.png\"\/><\/figure>\n<p>(\u043a\u043d\u043e\u043f\u043a\u0430 disabled, title or text required)<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 <\/h2>\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0\u0431\u044b\u043b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e Date \u0438 Time \u043f\u0438\u043a\u0435\u0440\u0430 \u00ab\u043a\u0430\u043a \u0432\u00a0Telegram\u00bb. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0432\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u00a0\u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0443\u043c\u0435\u0435\u0442 \u0447\u0442\u043e\u2011\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u00a0\u043f\u043e\u00a0\u0433\u0430\u0439\u0434\u0430\u043c )<\/p>\n<p>No errors, no warnings, gentlemen and ladies!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/853568\/\"> https:\/\/habr.com\/ru\/articles\/853568\/<\/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>\u0412\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0432\u0448\u0438\u0441\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u043c\u0438 \u043a\u043e\u043b\u0435\u0441\u0438\u043a\u0430\u043c\u0438 \u0434\u043b\u044f\u00a0\u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0434\u0430\u0442\u044b \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 Telegram, \u044f \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u00a0\u043e\u0434\u043d\u043e\u043c \u0438\u0437\u00a0\u0441\u0432\u043e\u0438\u0445 \u043f\u0435\u0442\u2011\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0447\u0442\u043e\u2011\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435. \u041f\u0435\u0440\u0432\u043e\u0439 \u043c\u044b\u0441\u043b\u044c\u044e\u00a0\u0431\u044b\u043b\u043e\u00a0\u2014 \u043d\u0430\u0439\u0442\u0438 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445 Telegram, \u043d\u043e\u00a0\u0442.\u043a. \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u00a0\u043d\u0438\u0445 \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430\u00a0Java, \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0435\u00a0\u0438\u0433\u0440\u0430\u0442\u044c \u0432\u00a0\u043b\u043e\u0442\u0435\u0440\u0435\u044e \u0438 \u043d\u0435\u00a0\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u0440\u0430\u0441\u043a\u043e\u043f\u043a\u0438 \u0432\u00a0Java\u2011\u043a\u043e\u0434\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u00a0\u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0430\u00a0Jetpack Compose.<\/p>\n<p>\u041d\u0430 Habr \u044f \u043d\u0430\u0448\u0435\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u043f\u043e\u0445\u043e\u0436\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/articles\/255651\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e 2015\u0433\u043e \u0433\u043e\u0434\u0430<\/a>, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u043d\u0430 Java.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0435\u043c. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0432\u043d\u0435\u0448\u043d\u0435 \u0447\u0435\u043c-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u044d\u0442\u043e\u0442:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0421 \u0432\u0438\u0434\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0447\u0430\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 (3 \u0448\u0442)<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u043c\u043e\u0447\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)<\/p>\n<\/li>\n<\/ul>\n<h2>Time picker <\/h2>\n<h2>\u0412\u0435\u0440\u0441\u0442\u043a\u0430<\/h2>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 &#8212; \u0437\u043d\u0430\u0447\u0438\u0442, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 3. \u042f \u043d\u0430\u0447\u043d\u0443 \u0441 \u0446\u0438\u0444\u0440.<\/p>\n<pre><code class=\"kotlin\">@Composable internal fun TimeColumnPicker(     initialValue: Int,     onValueChange: (Int) -&gt; Unit,     range: IntRange,     modifier: Modifier = Modifier, ) {     val context = LocalContext.current     val listState = rememberLazyListState(initialFirstVisibleItemIndex = initialValue)      \/\/ \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.     val list by remember {         mutableStateOf(mutableListOf&lt;String&gt;().apply {             (1..(countOfVisibleItemsInPicker \/ 2)).forEach { _ -&gt; add(\"\") }             for (i in range) add(i.getTimeDefaultStr())             (1..(countOfVisibleItemsInPicker \/ 2)).forEach { _ -&gt; add(\"\") }         })     }      var selectedValue by remember { mutableIntStateOf(initialValue) }     var firstIndex by remember { mutableStateOf(0) }     var lastIndex by remember { mutableStateOf(0) }      Box(         modifier = modifier.height(listHeight.dp),         contentAlignment = Alignment.Center     ) {         Border(itemHeight = itemHeight.dp, color = Theme.colors.oppositeTheme)          LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {             itemsIndexed(items = list) { index, it -&gt;                     Box(                         modifier = Modifier.fillParentMaxHeight(1f \/ countOfVisibleItemsInPicker),                         contentAlignment = Alignment.Center                     ) {                         Text(                             text = it,                             fontSize = FontSize.medium19,                         )                     }             }         }     } }<\/code><\/pre>\n<p>\u0426\u0432\u0435\u0442\u0430 \u043a\u0441\u0442\u0430\u0442\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u0438\u0441\u0430\u043b \u0432 \u044d\u0442\u043e\u0439 <a href=\"https:\/\/habr.com\/ru\/articles\/835138\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a>.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0449\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0434\u0435\u0441\u044c \u043d\u0430 <code>fillMaxParentHeight<\/code>: \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 <code>fillMaxHeight<\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044f \u0435\u0433\u043e. <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>getTimeDefaultStr<\/code> \u0437\u0434\u0435\u0441\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0438\u0441\u043b\u0430, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u043c 2 \u0446\u0438\u0444\u0440\u044b, \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 0, \u0435\u0441\u043b\u0438 \u043e\u0434\u043d\u0430:<\/p>\n<pre><code class=\"kotlin\">fun Int.getTimeDefaultStr(): String =  \"${if (this &lt;= 9) \"0\" else \"\"}$this\"<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b Date&amp;&amp;Time \u043f\u0438\u043a\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0430 \u043d\u0435 \u0440\u0430\u0437\u044a\u0435\u0437\u0436\u0430\u043b\u0441\u044f, \u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0435\u043c\u0443 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c. \u041f\u043b\u044e\u0441\u043e\u043c \u043a\u043e \u0432\u0441\u0435\u043c\u0443, \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0435\u0449\u0435 2 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 \u0440\u0430\u0441\u043a\u043e\u043f\u043e\u043a \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<pre><code class=\"kotlin\">\/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u0435   internal const val countOfVisibleItemsInPicker = 5      \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   internal const val itemHeight = 35f      \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430   internal const val listHeight = countOfVisibleItemsInPicker * itemHeight<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0449\u0430\u044e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044f \u0437\u0430\u0434\u0430\u044e \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0435\u0439 \u0432\u043e \u0431\u043b\u0430\u0433\u043e \u0440\u0435\u044e\u0437\u0430.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u043e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435, \u0442.\u043a. \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432 <code>Text<\/code> \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0432\u0432\u0435\u0440\u0445\u0443. <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u00a0\u2014 \u0440\u0430\u043c\u043e\u0447\u043a\u0430, \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a\u00a0\u043b\u043e\u0433\u0438\u043a\u0435. \u00ab\u041d\u0438\u0447\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435, (\u0447\u0435\u043c Row) \u043d\u0435\u00a0\u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u00bb (\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u00a0\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043a\u0442\u043e\u2011\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442)<\/p>\n<pre><code class=\"kotlin\">@Composable   internal fun Border(itemHeight: Dp, color: Color) {       val width = 2.dp       val strokeWidthPx = with(LocalDensity.current) { width.toPx() }       Row(           modifier = Modifier               .fillMaxWidth()               .height(itemHeight)               .drawBehind {                   drawLine(                       color = color,                       strokeWidth = strokeWidthPx,                       start = Offset(0f, 0f),                       end = Offset(size.width, 0f)                 )                                    drawLine(                       color = color,                       strokeWidth = strokeWidthPx,                       start = Offset(0f, size.height),                       end = Offset(size.width, size.height)                   )               }       ) {}   }<\/code><\/pre>\n<p>\u0420\u0430\u043c\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443\u00a0\u2014 \u0432\u044b\u0441\u043e\u0442\u0443 \u0430\u0439\u0442\u0435\u043c\u0430. \u0415\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u00a0Box.<br \/> \u0412\u00a0\u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0443\u00a0\u043b\u0438\u043d\u0438\u0438 \u0432 <code>dp<\/code> \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0435\u0435 \u0432\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0434\u0435\u0432\u0430\u0439\u0441\u0430 \u0447\u0435\u0440\u0435\u0437 <code>LocalDensity<\/code>, \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>drawBehind<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u00a0\u0444\u043e\u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u043c 2\u00a0\u043b\u0438\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u043e\u0442 \u0442\u043e\u0447\u043a\u0438 (0,0), \u0434\u043e \u0442\u043e\u0447\u043a\u0438 (x, 0) &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u0445\u0443<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442 \u0442\u043e\u0447\u043a\u0438 (0,y), \u0434\u043e \u0442\u043e\u0447\u043a\u0438 (x, y) &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u043d\u0438\u0437\u0443. <\/p>\n<p>x,y &#8212; \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041b\u043e\u0433\u0438\u043a\u0430 <\/h2>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. (\u0422\u043e, \u043a \u0447\u0435\u043c\u0443 \u044f \u0448\u0435\u043b \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u043d\u0435 \u043b\u044e\u0431\u043b\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 <code>offset<\/code>&#8216;\u0430\u043c\u0438 \u0432 \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043d\u043e \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0438\u043a\u0430\u043a). \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 2 \u0437\u0430\u0434\u0430\u0447\u0438:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u00ab\u043d\u0435 \u0440\u043e\u0432\u043d\u043e\u00bb<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0441\u044b\u043b\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u044b\u0448\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"kotlin\">LaunchedEffect(listState.isScrollInProgress) {       if (!listState.isScrollInProgress &amp;&amp; listState.firstVisibleItemScrollOffset.pixelsToDp(               context           ) % itemHeight != 0f \/\/ \u0438\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u0430\u044f \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f       ) {           \/\/ \u041f\u0435\u0440\u0435\u043c\u043e\u0442\u043a\u0430 \u043a \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443       listState.animateScrollToItem(listState.itemForScrollTo(context = context))       }   }<\/code><\/pre>\n<p>\u0412\u00a0\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e\u00a0\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435\u00a0\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0438\u043d\u0430\u0447\u0435 \u043e\u043d \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u043d\u0435\u00a0\u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0431\u043e\u0440\u043e\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u043a\u043e\u0434).<\/p>\n<p>\u0410\u00a0\u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439\u00a0\u2014 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0441\u043f\u0438\u0441\u043e\u043a \u00ab\u043d\u0435 \u0440\u043e\u0432\u043d\u043e\u00bb \u0443\u043c\u0438\u0440\u0430\u0442\u044c. \u0418\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d.<\/p>\n<p>\u041f\u043e\u043c\u043e\u0436\u0435\u0442 <code>offset<\/code>\u00a0\u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u0430\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0436\u0435 \u043f\u0440\u043e\u043c\u043e\u0442\u0430\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a. \u0421\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u00a0\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u00a0\u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<br \/> \u041e\u0441\u0442\u0430\u0442\u043a\u043e\u043c \u043e\u0442\u00a0\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u00a0\u0440\u0430\u0437 \u043c\u044b \u0438 \u0443\u0437\u043d\u0430\u0435\u043c, \u043d\u0430\u00a0\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<br \/> <code>pixelsToDp<\/code>\u00a0\u2014 \u043c\u0435\u0442\u043e\u0434, \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430.<\/p>\n<pre><code class=\"kotlin\">fun Int.pixelsToDp(context: Context): Float {       val densityDpi = context.resources.displayMetrics.densityDpi       return this \/ (densityDpi \/ 160f)   }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u043e\u0439 <code>itemForScrollTo<\/code>: \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0431\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>lazy<\/code> \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u0432 \u044d\u0442\u043e\u043c \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430).<\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">internal fun LazyListState.itemForScrollTo(context: Context): Int {       val offset = firstVisibleItemScrollOffset.pixelsToDp(context)       return when {           offset == 0f -&gt; firstVisibleItemIndex           offset % itemHeight &gt;= itemHeight \/ 2 -&gt; firstVisibleItemIndex + 1           else -&gt; firstVisibleItemIndex       }  \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 if, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044e }<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c <code>offset<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c.<\/p>\n<p>\u041d\u0430\u0434 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043d <code>offset<\/code> \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u043a\u0440\u0443\u0442\u0438\u0442\u044c.<br \/> !! \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u0432 \u0441\u0430\u043c\u044b\u0439 \u0432\u0435\u0440\u0445, \u0442.\u0435. \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u044c\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. !! \u0418 \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0438\u0434\u0435\u043d \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u0435\u0433\u043e <code>offset<\/code> \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0434\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442:<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u044f \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u043b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b offset (\u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b \u0435\u0433\u043e \u0443 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u043c\u043e\u0447\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0430\u0439\u0442\u0435\u043c, \u0431\u044b\u043b\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c. \u0417\u0434\u0435\u0441\u044c \u043f\u043e 3 \u0430\u0439\u0442\u0435\u043c\u0430, \u0442\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0431\u044b\u043b\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 <code>offset<\/code>&#8216;\u0430 . <\/p>\n<figure class=\"\"><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430:<\/p>\n<figure class=\"\"><\/figure>\n<p>\u041d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 50dp (\u0438\u0437\u043c\u0435\u043d\u0438\u043b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0435), \u0442.\u0435. \u0434\u043e \u041d\u0418\u0416\u041d\u0415\u0419 \u0433\u0440\u0430\u043d\u0438 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e 24 \u0441 \u043a\u043e\u043f\u0435\u0439\u043a\u0430\u043c\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d \u0432\u0438\u0434\u0435\u043d \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 &#8212; \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u043a <code>firstVisibleIndex + 1<\/code>, \u0438\u043d\u0430\u0447\u0435 (\u0435\u0441\u043b\u0438 \u0431 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0431\u044b\u043b\u043e, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, 23dp) \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439 \u0432\u0438\u0434\u0435\u043d \u043d\u0430 27dp == \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b, \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0443\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043a <code>firstVisibleIndex<\/code>.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435: \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u044b\u043b\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435<br \/>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">val offset by remember { derivedStateOf { listState.firstVisibleItemScrollOffset } } LaunchedEffect(offset) {         val newValue =             list[listState.itemForScrollTo(context) + countOfVisibleItemsInPicker \/ 2].toIntOrNull()         if (newValue != null &amp;&amp; newValue != selectedValue) {             onValueChange(newValue)             selectedValue = newValue         }     }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u043f\u0443\u043d\u043a\u0442\u0435. \u041c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437,  <code>onValueChange<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044f \u0435\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u0432 <code>selectedValue<\/code> \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a. <code>listState.itemForScrollTo(context) + countOfVisibleItemsInPicker\/2<\/code> &#8212; \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430. <\/p>\n<p><code>toIntOrNull<\/code> \u0437\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0432\u043e\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u0438 == &#171;&#187;, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043d\u0430\u0447\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0435 \u0434\u0430\u0441\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439 \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0443\u0436\u043d\u044b\u043c). <\/p>\n<figure class=\"\"><\/figure>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442. \u0412 \u043f\u0443\u0441\u0442\u044b\u0445 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0430\u0445 \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043f\u0443\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<h2>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e \u043a\u043e\u043b\u0435\u0441\u0443<\/h2>\n<p>\u0412 Telegram \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f, \u043a\u0430\u043a \u043a\u043e\u043b\u0435\u0441\u043e. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0432 \u0437\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0442\u0440\u0435\u043c\u044f \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438:<\/p>\n<ol>\n<li>\n<p>\u0421\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 <\/p>\n<\/li>\n<li>\n<p>\u0421\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 <\/p>\n<p>\u042d\u0442\u0438 2 \u043f\u0443\u043d\u043a\u0442\u0430 \u0434\u0430\u0434\u0443\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438\u043b\u043b\u044e\u0437\u0438\u044e \u043e\u0442\u0434\u0430\u043b\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0443\u043d\u043a\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u0434\u0430\u0441\u0442 \u0438\u043b\u043b\u044e\u0437\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u043e \u043a\u043e\u043b\u0435\u0441\u0443 (\u0438\u043c\u0445\u043e)<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442 \u0430\u0439\u0442\u0435\u043c\u0430 \u0434\u043e \u0446\u0435\u043d\u0442\u0440\u0430. <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0434 \u0441 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0438\u0431\u043e \u0442\u0430\u043a \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u044b\u0439\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439. <\/p>\n<pre><code class=\"kotlin\">internal fun<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-436757","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/436757","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=436757"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/436757\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=436757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=436757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=436757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}