Useful modifier

알아두면 유용한 두 개의 수정자를 소개합니다~~

Offset

modifier의 offset 을 통해 x 및 y 위치를 변경할 수 있음

@Composable
funOffsetModifier(
    modifier:Modifier = Modifier
) {
    Box(
        modifier = modifier
            .padding(50. dp)
            .ground(Color.LightGray)
            .fillMaxWidth()
            .height(100. dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Text(
            text = stringResource(R.string.offset_content),
            modifier = Modifier.offset(x =0. dp, y = -(15. dp)),
            style = TextStyle(
                color = Color.Black,
                fontSize =20. sp
            )
        )
    }
}

위의 그림과 같이, y 좌푯값을 -15dp만큼 옮겨줬다

CombinedClickable

여러 번의 클릭을 수행하려면 combinedClickable modifier를 사용할 수 있다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
funCombinedClickableModifier(
    modifier:Modifier
 ) {
    Box(modifier = modifier.combinedClickable(
        onLongClick = {
// 긴 클릭 작업 수행
         },
        onDoubleClick = {
// 두 번 클릭 작업 수행
         },
        onClick = {
// 클릭 작업
         }
    ))
}

basicMarquee Modifier

basicMarquee modifier를 사용하면 아래와 같이 왼 → 오 텍스트 애니메이션이 가능하다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MarqueeText(
    modifier: Modifier
) {
    Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(
            text = stringResource(R.string.this_is_an_example_of_basic_marquee_text_in_jetpack_compose),
            fontSize = 20.sp,
            modifier = Modifier.basicMarquee()
        )
    }
}

TestTag

UI 테스트 사례를 작성하려는 경우 유용

Text(
    text = stringResource(R.string.this_is_an_example_of_basic_marquee_text_in_jetpack_compose),
    fontSize = 20.sp,
    modifier = Modifier
        .basicMarquee()
        .testTag(stringResource(R.string.basicmarqueetest))
)

Uploaded by N2T