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:
Dapat digeser
class MySwitchState: SwipeableState()
Dapat Ditarik
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
:
Konstruktor
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) }
)
}
updateAnchor
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
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
T/A |
|
|
|
|
|
|
|
|
|
|
|
Modifier.anchoredDraggable
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
Diteruskan ke konstruktor |
|
Belum didukung. Lihat b/288084801 untuk status terbaru. |
|
Diteruskan ke konstruktor |