Виджет Android NumberPicker не работает должным образом в Jetpack Compose HorizontalPager

Question

NumberPicker (android.widget.NumberPicker) не работает должным образом при размещении в Jetpack Compose HorizontalPager

Средний номер исчезает после прокрутки 3 страниц, а затем возврата на страницу выбора:

Это происходит потому, что пейджер держит одновременно только 3 экрана (текущий, предыдущий и следующий). Когда мы прокручиваем до 3-й страницы, а затем прокручиваем назад, страница выбора перекомпоновывается, и поэтому мы можем наблюдать такую ​​​​ошибку.

Я пробовал аннулировать метод в области обновления составного AndroidView Picker, но это не помогает.

Любые предложения, как решить проблему? Спасибо!

Код для воспроизведения проблемы:

Источник сборки приложения:

      //ACCOMPANIST
api "com.google.accompanist:accompanist-pager:0.27.0"
api "com.google.accompanist:accompanist-pager-indicators:0.27.0"

//COMPOSE
implementation platform('androidx.compose:compose-bom:2022.10.00')
implementation "androidx.compose.ui:ui"
implementation 'androidx.compose.material:material'
implementation 'androidx.activity:activity-compose:1.6.1'

Основная деятельность:

      import android.os.Bundle
import android.widget.NumberPicker
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.example.composepagerpickerissue.ui.theme.ComposePagerPickerIssueTheme
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalPagerApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposePagerPickerIssueTheme {
                val coroutineScope = rememberCoroutineScope()

                val pages = listOf(
                    Page.PickerPage,
                    Page.EmptyPage,
                    Page.EmptyPage,
                    Page.EmptyPage,
                    Page.PickerPage,
                )

                val pagerState = rememberPagerState(0)

                val onNextPage: () -> Unit = {
                    coroutineScope.launch { pagerState.animateScrollToPage(page = pagerState.currentPage + 1) }
                }
                val onPreviousPage: () -> Unit = {
                    coroutineScope.launch {
                        pagerState.animateScrollToPage(
                            page = (pagerState.currentPage - 1).takeIf { it >= 0 } ?: 0
                        )
                    }
                }

                Column {

                    HorizontalPager(
                        count = pages.size,
                        state = pagerState,
                        modifier = Modifier.weight(1f, true)
                    ) { page ->
                        pages[page].screen()
                    }

                    Row(
                        modifier = Modifier.padding(16.dp),
                        horizontalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        OutlinedButton(
                            modifier = Modifier.weight(1f),
                            onClick = onPreviousPage
                        ) { Text("Back") }
                        Button(
                            modifier = Modifier.weight(1f),
                            onClick = onNextPage
                        ) { Text("Next") }
                    }
                }
            }
        }
    }
}

@Composable
fun SimpleNumberPicker(
    value: Int,
    min: Int = 0,
    max: Int = Int.MAX_VALUE,
    onValueChange: (Int) -> Unit
) {
    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            NumberPicker(context).apply {
                setOnValueChangedListener { numberPicker, i, i2 ->
                    onValueChange(i)
                }
                minValue = min
                maxValue = max
                this.value = value
            }
        },
        update = {}
    )
}

sealed class Page(var screen: @Composable () -> Unit) {
    object EmptyPage : Page(
        screen = { Box(modifier = Modifier.fillMaxSize()) { Text(text = "Empty screen") } })

    object PickerPage : Page(
        screen = { Column(modifier = Modifier.fillMaxSize()) { SimpleNumberPicker(150) {} } })
}

Answer 1

У меня была точно такая же проблема. Я решил это, обновив зависимости компоновки Jetpack до версии1.3.0.

Вы также можете просто добавить текущую спецификацию Compose BOM (Bill of Materials) и опустить номера версий для компоновочных зависимостей, например:

      implementation platform('androidx.compose:compose-bom:2022.10.00')
implementation "androidx.compose.ui:ui"
implementation "androidx.compose.material:material"
implementation ...

Подробнее о Compose BOM можно прочитать здесь: https://developer.android.com/jetpack/compose/setup#using-the-bom.