Saya memiliki kolom yang memiliki banyak item; berdasarkan gulir, saya ingin menampilkan/menyembunyikan tombol tindakan Mengambang, jika gulir turun, sembunyikan dan jika gulir naik, tunjukkan.

Kode saya berfungsi sebagian, tetapi penggulirannya bermasalah. Di bawah ini adalah kodenya. Butuh bantuan.

 Column(
      Modifier
        .background(color = colorResource(id = R.color.background_color))
        .fillMaxWidth(1f)
        .verticalScroll(scrollState)
        .scrollable(
          orientation = Orientation.Vertical,
          state = rememberScrollableState {
            offset.value = it

              coroutineScope.launch {
                scrollState.scrollBy(-it)
              }

            it
          },
        )
    ) { // 10-20 items }

Berdasarkan nilai offset (baik positif/negatif), saya menjaga visibilitas FAB.

1
Ali_Waris 28 Mei 2021, 13:48

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan pengubah nestedScroll.

Sesuatu seperti:

val fabHeight = 72.dp //FabSize+Padding
val fabHeightPx = with(LocalDensity.current) { fabHeight.roundToPx().toFloat() }
val fabOffsetHeightPx = remember { mutableStateOf(0f) }

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {

            val delta = available.y
            val newOffset = fabOffsetHeightPx.value + delta
            fabOffsetHeightPx.value = newOffset.coerceIn(-fabHeightPx, 0f)

            return Offset.Zero
        }
    }
}

Karena yang dapat dikomposisi mendukung pengguliran bersarang, terapkan saja ke Scaffold:

Scaffold(
        Modifier.nestedScroll(nestedScrollConnection),
        scaffoldState = scaffoldState,
        //..

        floatingActionButton = {
            FloatingActionButton(
                modifier = Modifier
                    .offset { IntOffset(x = 0, y = -fabOffsetHeightPx.value.roundToInt()) },
                onClick = {}
            ) {
                Icon(Icons.Filled.Add,"")
            }
        },
        content = { innerPadding ->
            Column(
                Modifier
                    .fillMaxWidth(1f)
                    .verticalScroll(rememberScrollState())
            ) {
                //....your code
            }
        }
 )

Ini dapat bekerja dengan Column dengan verticalScroll dan juga dengan LazyColumn.

enter image description here

2
Gabriele Mariotti 28 Mei 2021, 11:53