Jetpack Compose Swipeable View

오리·2024년 5월 30일
@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun SwipeableBox(
  onClickSwipeableButton: () -> Unit = {}
) {
  val scope = rememberCoroutineScope()
  val swipeableState = rememberSwipeableState(initialValue = 0)
  val sizePx = with(LocalDensity.current) { 100.dp.toPx() }
  val anchors = mapOf(0f to 0, sizePx to 1) // 0f~100.dp 까지 스와이프 영역
  
  Box(
    modifier = Modifier
      .fillMaxWidth()
      .height(100.dp),
    contentAlignment = Alignment.Center
  ) {
    Box(
      modifier = Modifier
        .matchParentSize()
        .background(ColorScheme.etc.yellow),
    ) {
      Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "스와이프")
      }
    }
    Column(
      modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
        .background(Color.White)
        .swipeable(
          state = swipeableState,
          anchors = anchors,
          thresholds = { _, _ -> FractionalThreshold(0.5f) },
          orientation = Orientation.Horizontal
        )
    ) {
      Text(
        text = "박스",
        style = MobileTextStyles.RobotoRegular16,
      )
    }
  }
}

0개의 댓글