자주 까먹는 compose modifiers

1). border Modifier

@Composable
fun MakeBorder(
    modifier: Modifier = Modifier
) {

    Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Spacer(
            modifier = Modifier
                .border(
                    color = Color.Red,
                    width = 2.dp,
                    shape = CircleShape
                )
                .size(100.dp)
        )
    }

}

2). horizontalScroll Modifier

@Composable
fun HorizontalScroll(
    modifier: Modifier = Modifier
) {

    val scrollState = rememberScrollState()

    Row(
        modifier = modifier
            .padding(20.dp)
            .horizontalScroll(scrollState)
            .fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        repeat(10) {
            Text(
                text = "Text $it",
                style = TextStyle(
                    fontSize = 20.sp,
                    fontWeight = FontWeight.W600
                ),
                modifier = Modifier.padding(horizontal = 10.dp)
            )
        }
    }

}

3). verticalScroll Modifier

@Composable
fun VerticalScroll(
    modifier: Modifier = Modifier
) {

    val scrollState = rememberScrollState()

    Column(
        modifier = modifier
            .padding(20.dp)
            .verticalScroll(scrollState)
            .fillMaxSize(),
    ) {
        repeat(100) {
            Text(
                text = "Text $it",
                style = TextStyle(
                    fontSize = 20.sp,
                    fontWeight = FontWeight.W600
                ),
                modifier = Modifier.padding(vertical = 10.dp)
            )
        }
    }

}

4). align Modifier

Though align Modifier , you can align the composable’s position anywhere in the screen if it is in Box composable function.

@Composable
fun AlignModifier(
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier.padding(20.dp).fillMaxSize()){
        Text(text = "Center", modifier = Modifier.align(Alignment.Center))
        Text(text = "Top Center", modifier = Modifier.align(Alignment.TopCenter))
        Text(text = "Center End", modifier = Modifier.align(Alignment.CenterEnd))
    }
}

5). clip Modifier

@Composable
fun ClipModifier(
    modifier: Modifier = Modifier
) {

    Spacer(modifier = modifier
        .padding(20.dp)
        .clip(CircleShape)
        .background(Color.Red)
        .size(100.dp))
}

Uploaded by N2T