Bermigrasi dari Swipeable ke AnchoredDraggable

Swipeable adalah Compose Material API yang membantu Anda membuat komponen yang dapat digeser di antara status terpisah, seperti sheet bawah, panel samping, atau geser untuk menutup. Untuk mendukung kasus penggunaan lanjutan dengan lebih baik, seperti anchor yang bergantung pada ukuran komponen, pengganti dipublikasikan di Compose-Foundation 1.6.0-alpha01: AnchoredDraggable. AnchoredDraggable adalah Foundation API untuk mem-build komponen yang dapat ditarik dengan status yang ditambatkan, seperti sheet bawah, panel samping, atau geser-untuk-menutup.

Swipeable API Material tidak digunakan lagi dan digantikan dengan AnchoredDraggable Foundation dan akan dihapus dalam rilis mendatang. Panduan ini menjelaskan cara bermigrasi dari Swipeable API ke AnchoredDraggable.

Migrasikan SwipeableState ke AnchoredDraggableState

Mulailah dengan mengidentifikasi perubahan pada holder status Anda. AnchoredDraggableState tidak dapat diwariskan, dan offset direpresentasikan sebagai Float.NaN sebelum diinisialisasi.

Memperbarui holder status

AnchoredDraggableState adalah class akhir, yang berarti tidak dapat diwariskan. Jika komponen yang ada mewarisi dari SwipeableState, update holder status Anda untuk menyimpan referensi ke AnchoredDraggableState, bukan mewarisinya:

class MySwitchState: SwipeableState()

class MySwitchState {
    private val anchoredDraggableState = AnchoredDraggableState(...)
}

Karena holder status tidak lagi mewarisi dari SwipeableState, Anda mungkin harus mengekspos API sendiri. API paling umum yang dapat Anda gunakan adalah offset, progress, currentValue, dan targetValue.

Mengakses offset

Tidak seperti dalam Swipeable, offset AnchoredDraggableState adalah Float.NaN sebelum diinisialisasi. Di AnchoredDraggable, anchor dapat diteruskan ke konstruktor AnchoredDraggableState atau diperbarui melalui AnchoredDraggableState#updateAnchors. Meneruskan anchor ke konstruktor AnchoredDraggableState akan langsung menginisialisasi offset.

Jika anchor Anda dapat bergantung pada tata letak atau dapat berubah, gunakan AnchoredDraggableState#updateAnchors untuk menghindari pembuatan ulang status saat anchor berubah.

Jika Anda menggunakan updateAnchors, offsetnya akan menjadi Float.NaN sebelum meneruskan anchor ke updateAnchors. Untuk menghindari penerusan Float.NaN ke komponen secara tidak sengaja, gunakan AnchoredDraggableState#requireOffset untuk mewajibkan offset telah diinisialisasi saat membacanya. Hal ini membantu Anda mengetahui inkonsistensi atau kemungkinan bug sejak awal.

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = remember { DraggableAnchors { ... } }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    }
}

Migrasikan Modifier.swipeable ke Modifier.anchoredDraggable

Modifier.anchoredDraggable() menggantikan Modifier.swipeable. Beberapa parameter Modifier.swipeable() telah dipindahkan ke AnchoredDraggableState secara langsung, seperti yang dijelaskan di bagian berikut.

Menentukan anchor

Tentukan anchor menggunakan metode builder DraggableAnchors. Kemudian, teruskan tersebut ke konstruktor AnchoredDraggableState#updateAnchors atau AnchoredDraggableState:

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val anchors = DraggableAnchors {
        Start at -100.dp.toPx()
        Center at 0f
        End at 100.dp.toPx()
    }
    val state = remember {
        AnchoredDraggableState(anchors = anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = with (density) {
        DraggableAnchors {
            Start at -100.dp.toPx()
            Center at 0f
            End at 100.dp.toPx()
        }
    }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

Jika anchor bersifat statis, teruskan anchor tersebut ke konstruktor. Jika fungsi tersebut bergantung pada tata letak, atau tidak statis, gunakan updateAnchors.

Menentukan nilai minimum posisi

Jenis dan nama parameter nilai minimum telah berubah. Sebagai ganti memiliki antarmuka ThresholdConfig terpisah, AnchoredDraggableState memiliki parameter positionalThreshold yang menggunakan fungsi lambda yang menampilkan posisi ambang batas. Misalnya, nilai minimum posisi 50% dapat dinyatakan sebagai:

val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { distance -> distance * 0.5f },
    ...
)

Nilai minimum posisi 56dp dapat dinyatakan sebagai:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { with(density) { 56.dp.toPx() } },
    ...
)

Menentukan batas kecepatan

Batas kecepatan juga diteruskan ke konstruktor AnchoredDraggableState, dan juga dinyatakan sebagai lambda:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    velocityThreshold = { with(density) { 125.dp.toPx() } },
    ...
)

Perubahan pada platform API

Temukan ringkasan perubahan pada platform API di bawah ini.

AnchoredDraggableState

Modifier.anchoredDraggable