Swipeable에서 AnchoredDraggable로 이전

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()

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