避免意外點擊/觸摸 Jetpack Compose Slider，它位於可滾動列中

Question

我有一個 Slider 放置在可滾動的列內。 當我滾動瀏覽組件時，有時 slider 值會因意外觸摸而發生變化。 我怎樣才能避免這種情況？

1. 我應該禁用 slider 上的水龍頭嗎？ 如果是，我該怎么做？

2. 有沒有像嵌套滾動而不是列這樣的替代方法可以防止這種情況發生？

    @Composable fun ColumnScope.FilterRange( title: String, range: ClosedFloatingPointRange<Float>, rangeText: String, valueRange: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, ) { Spacer(modifier = Modifier.height(Size_Regular)) Text( text = title, style = MaterialTheme.typography.h6 ) Spacer(modifier = Modifier.height(Size_X_Small)) Text( text = rangeText, style = MaterialTheme.typography.subtitle1 ) RangeSlider( modifier = Modifier.fillMaxWidth(), values = range, valueRange = valueRange, onValueChange = { onValueChange(it) }) Spacer(modifier = Modifier.height(Size_Small)) Divider(thickness = DividerSize) }

Answer 1

我會禁用 RangeSlider 並僅在您點擊它時啟用它。 您可以通過點擊列中的其他任何位置來禁用它。 這是用於模仿失去焦點的類似行為。 這是一個例子：

class MainActivity : ComponentActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(intent)

        setContent {

            var rangeEndabled by remember { mutableStateOf(false)}.apply { this.value }
            var sliderPosition by remember { mutableStateOf(0f..100f) }
            Text(text = sliderPosition.toString())

            Column(modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            rangeEndabled = false
                        }
                    )
                }) {
                
                repeat(30) {
                    Text(it.toString())
                }

                RangeSlider(
                    enabled = rangeEndabled,
                    values = sliderPosition,
                    onValueChange = { sliderPosition = it },
                    valueRange = 0f..100f,
                    onValueChangeFinished = {
                        // launch some business logic update with the state you hold
                        // viewModel.updateSelectedSliderValue(sliderPosition)
                    },
                    modifier = Modifier.pointerInput(Unit) {
                        detectTapGestures(
                            onTap = {
                                rangeEndabled = true
                            }
                        )
                    }
                )

                repeat(30) {
                    Text(it.toString())
                }
            }

        }
    }
}