Swipeable
는 Compose Material API로, 개발자가
하단 시트나 창, 서랍과 같은 개별 상태 간에
스와이프하여 닫기 앵커 광고와 같은 고급 사용 사례를 더 효과적으로 지원하기 위해
크기에 따라 달라지지 않는 경우 후속 버전이 게시된
Compose-Foundation 1.6.0-alpha01: AnchoredDraggable
AnchoredDraggable
고정된 상태로 드래그 가능한 구성요소를 빌드하기 위한 Foundation API
하단 시트, 창 또는 스와이프하여 닫기 등 여러 가지 옵션이 있습니다.
Material의 Swipeable
API를 지원 중단하고 Foundation의 API를
AnchoredDraggable
이며 향후 버전에서 삭제될 예정입니다. 이 가이드
Swipeable
API에서 AnchoredDraggable
로 이전하는 방법을 설명합니다.
SwipeableState
를 AnchoredDraggableState
로 이전
먼저 상태 홀더의 변경사항을 식별합니다. AnchoredDraggableState
상속될 수 없으며 오프셋은 그 앞에 Float.NaN
로 표시됩니다.
초기화됩니다.
상태 홀더 업데이트
AnchoredDraggableState
는 최종 클래스이므로 상속될 수 없습니다.
있습니다. 기존 구성요소가 SwipeableState
에서 상속되는 경우
상태 홀더가 대신 AnchoredDraggableState
참조를 보유하도록 합니다.
상속됩니다.
스와이프 가능
class MySwitchState: SwipeableState()
AnchoredDraggable
class MySwitchState {
private val anchoredDraggableState = AnchoredDraggableState(...)
}
상태 홀더는 더 이상 SwipeableState
에서 상속되지 않으므로
API를 직접 노출해야 할 수도 있습니다 사용할 수 있는 가장 일반적인 API는
offset
, progress
, currentValue
, targetValue
.
오프셋 액세스
Swipeable
에서와 달리 AnchoredDraggableState
님의 offset
은(는) 다음 날짜 전의 Float.NaN
입니다.
초기화됩니다 AnchoredDraggable
에서는 앵커를
AnchoredDraggableState
의 생성자 또는 다음을 통해 업데이트됨
AnchoredDraggableState#updateAnchors
앵커를
AnchoredDraggableState
의 생성자가 즉시 오프셋을 초기화합니다.
앵커가 레이아웃에 좌우되거나 변경될 수 있는 경우
AnchoredDraggableState#updateAnchors
:
앵커가 변경됩니다.
updateAnchors
를 사용하는 경우Float.NaN
updateAnchors
에 고정합니다. 실수로 Float.NaN
를
구성요소를 사용하려면 AnchoredDraggableState#requireOffset
를 사용하여
읽을 때 오프셋이 초기화되었는지 확인합니다. 이렇게 하면
버그와 비일관성
즉 잠재적 버그를 개발합니다
@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) }
}
}
Modifier.swipeable
를 Modifier.anchoredDraggable
로 이전
Modifier.anchoredDraggable()
가 Modifier.swipeable
를 대체합니다. 다소 유용함
Modifier.swipeable()
의 매개변수 중 일부가 AnchoredDraggableState
(으)로 이동했습니다.
직접 연결할 수도 있습니다.
앵커 정의
DraggableAnchors
빌더 메서드를 사용하여 앵커를 정의합니다. 그런 다음
AnchoredDraggableState#updateAnchors
또는 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) }
)
}
앵커가 정적이면 생성자에 전달합니다. 만약
레이아웃이거나 정적이 아니라면 updateAnchors
를 사용합니다.
위치 임계값 정의
임곗값 매개변수의 유형과 이름이 변경되었습니다. kubectl 명령어
별도의 ThresholdConfig
인터페이스, AnchoredDraggableState
에는
다음 값을 반환하는 람다 함수를 사용하는 positionalThreshold
매개변수입니다.
위치를 나타냅니다. 예를 들어 위치 임계값을 50% 로 설정하면
다음과 같이 표현됩니다.
val anchoredDraggableState = AnchoredDraggableState(
positionalThreshold = { distance -> distance * 0.5f },
...
)
56dp
의 위치 임곗값은 다음과 같이 표현할 수 있습니다.
val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
positionalThreshold = { with(density) { 56.dp.toPx() } },
...
)
속도 임곗값 정의
속도 임곗값은 AnchoredDraggableState
의 생성자에도 전달됩니다.
람다로 표현되기도 합니다.
val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
velocityThreshold = { with(density) { 125.dp.toPx() } },
...
)
API 노출 영역 변경사항
아래에서 API 노출 영역의 변경사항에 대한 개요를 확인하세요.
AnchoredDraggableState
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
해당 사항 없음 |
|
|
|
|
|
|
|
|
|
|
|
Modifier.anchoredDraggable
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
아직 지원되지 않는 계정입니다. 최신 상태는 b/288084801을 참고하세요. |
|
|